Внедрите систему управления фоном вашего апплета на основе vue-admin-template+Koa.

Vue.js
Внедрите систему управления фоном вашего апплета на основе vue-admin-template+Koa.

Ваша система управления фоном апплета WeChat уже здесь! ! ! (Это относится только к аплету, разработанному в облаке. 😁) Если вы уже сделали апплет WeChat, разработанный в облаке, но еще не оснастили его системой фонового управления, то действуйте быстро! ! ! В этой статье вы подробно его реализуете, включая некоторые решения ошибок в процессе (возможно, это не ошибка для большого парня🤣)

предисловие

Автор этой статьи: Цзин Цзин
Эта статья содержит в общей сложности 3920 слов и занимает 15 минут, чтобы прочитать.
Сначала лайкните, а потом смотрите, сделайте привычкой! Это не легко создать, спасибо за вашу поддержку! ✨✨

Пожалуйста, найдите время, чтобы спокойно прочитать эту статью, поверьте мне, вы сможете реализовать свою собственную систему управления фоном апплета. (Все же немного интересно для тех, кому это нужно 😊😊😊)

Эта статья в основном основана на проектах с открытым исходным кодом.vue-admin-template + koa + element-ui + HTTP API облачной разработки WeChatВнедрите систему фонового управления апплетами WeChat. Внедрите архитектуру разделения интерфейсов и серверов, чтобыvue-admin-templateРеализовать внешний интерфейс системы управления, здесь мы используем внутренний интерфейсKoa2Для достижения, конечно, вы также можете переключиться на другие фреймворки для достижения.

Давай посмотрим на волну рендеров

Предстоят конкретные шаги по реализации

Во-первых, инициализация внешнего интерфейса

Клонировать первоначальный проект переднего плана из githubПрикрепите адрес проекта

  • 1. Используйте после успехаvscodeРедактор, чтобы открыть проект

  • 2. Мыviewsосталось только в каталогеloginпапка и404.vue, все остальные удаляются. Затем, в соответствии с данными, которыми нужно управлять в собственном апплете, вы можете спроектировать, какие страницы интерфейса вам нужны, и построить файл представления проекта в соответствии с вашими потребностями.

  • 3. Далееrouterв папкеindex.jsПланирование маршрута в соответствии с разработанной вами страницей (настройка маршрутизации подробно не рассматривается)

  • 4. Подумайте, как отобразить данные и какие операции необходимо выполнить(Потому что в этот шаблон интегрирован element-ui, то есть какие компоненты element-ui нужно использовать для отображения интерфейса. Проект, написанный в этой статье, относительно прост, поэтому используются только таблица, кнопка, диалог, форма.)

  • 5, последний шаг, мы находимся вsrcвнизapiПапка инкапсулирована для каждой страницы интерфейса..jsфайл, напишите в нем метод для получения внутренних данных, а затем вviewsСтраница просмотра в папке введена для получения данных, возвращаемых серверной частью.

Здесь я сравниваю этот каталог проекта с каталогом клонированного проекта, он должен быть понятнее.

На следующем рисунке показан исходный каталог файла клонированного проекта, обратите внимание на отмеченные на рисунке места.

На следующем рисунке показан каталог файлов проекта. Обратите внимание на отмеченные места, и вы заметите, что только два места изменились.

  • 1. ЯviewsВ каталоге создаются три папкиplaylist,swiper,blog, соответственно представляющие вышеуказанныеgifФайлы просмотра трех страниц управления списками воспроизведения, управления каруселями и управления блогами показаны на рисунке. (Конечно, вы должны разработать его в соответствии с вашим собственным апплетом.)
  • 2. ВapiВ каталоге создаются три новых файлаplaylist.js,swiper.js,blog.js, которые соответственно используются для получения данных трех страниц в предыдущем пункте.

  • На этом инициализация внешнего интерфейса завершена. 💦💦
  • Далее мы инициализируем серверный проект.

Во-вторых, инициализация внутреннего проекта

  • 1. Инициализироватьnodeproject, установите связанные с проектом зависимости. Этот проект использует только следующие зависимости
    koa—— Внутренняя структура, используемая в этом проекте
    koa-router- Инструмент управления маршрутизацией
    koa-body- заpostРазбор параметра запроса
    koa2-cors—— Решение внешних и внутренних междоменных проблемnpmСумка
    request,request-promise——Используется для отправки запроса на получение данных в облачной базе данных Mini Program

  • 2. Создайте новый в корневом каталогеapp.jsфайл ввода файла для серверных служб

  • 3. Создайте новый в корневом каталогеcontrollersПапка используется для хранения js-файлов, которые получают данные из облачной базы данных.

  • 4. Создайте новый в корневом каталогеutilsПапки используются для хранения некоторых файлов инструментов

  • На этом этапе инициализация внутреннего проекта также завершена. 💦💦
  • Далее мы соединим front-end и back-end проекты.

3. Стыковка между front-end и back-end проектами

Здесь я прохожу весь процесс сбора данных для страницы в этом проекте, чтобы все могли понять. Возьмите первую страницу, приобретение списка воспроизведения в качестве примера. Давайте начнем! ! !

внешний интерфейс:

  • во фронтенд проектахviewsв папкеplaylist.vueдеконструированныйapiв папкеplaylist.jsИнкапсулированный метод в . как показано на рисунке:

fetchListМетод используется для получения плейлиста,delМетод используется для удаления плейлиста. Код не длинный, я просто поставилplaylist.jsЭти два метода публикуются напрямую. следующее:(baseURLАдрес, открытый для бэкэнд-проекта,requestМетод инкапсулирован проектом шаблонаaxiosметод запроса)

import request from '@/utils/request'
const baseURL = 'http://localhost:8888'

export function fetchList(params) {
    return request({
        params,
        url: `${baseURL}/playlist/list`,
        method: 'get'
    })
}
export function del(params) {
    return request({
        params,
        url: `${baseURL}/playlist/del`,
        method: 'get',
    })
}

задняя часть:

  • 1. Фронтенд-метод запроса написан, и следующим шагом будет переход к бэкенд-проекту. Сначала перейдите к входному файлу нашего бэкэнд-проекта.app.jsсередина.

Код выглядит следующим образом (код написан с некоторыми пояснениями выше):

const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router')
const router = new Router()
    //跨域解决方法之一cors
const cors = require('koa2-cors')
    // 接受post请求参数解析
const koaBody = require('koa-body')
    //对应你自己的小程序云环境id
const ENV = 'jingjing-haohao'

// 跨域
app.use(cors({
    //前端项目的请求地址。
    origin: ['http://localhost:9528'],
    credentials: true
}))

// 接受post请求参数解析
app.use(koaBody({
    multipart: true
}))

app.use(async(ctx, next) => {
    console.log('jingjing 全局中间件')
    //配置全局变量。方便其他页面使用，这里用于定义好云环境id
    ctx.state.env = ENV
    await next()
})

//定义好playlist路由
const playlist = require('./controllers/playlist')
router.use('/playlist', playlist.routes())

app.use(router.routes())
app.use(router.allowedMethods())

//开启服务
app.listen(8888, () => {
    console.log('项目已启动在8888端口、、、')
})
  • 2. Зарегистрируйтесь в файле входа проектаplaylistПосле маршрутизации мы приходим кcontrollersв папкеplaylist.jsсередина.

Код выглядит следующим образом: (Чтобы не быть слишком длинным, я разместил только код функции удаления.) Щелкните здесь, чтобы просмотреть весь кодplaylist.js

const Router = require('koa-router')
const router = new Router()
const callCloudDB = require('../utils/callCloudDB')
router.get('/del', async(ctx, next) => {
    const params = ctx.request.query
    const query = `db.collection('playlist').doc('${params.id}').remove()`
    const res = await callCloudDB(ctx, 'databasedelete', query)
    ctx.body = {
        code: 20000,
        data: res
    }
})
module.exports = router

Ниже приведены некоторые пояснения:

  • 1, используется здесьgetвсе ещеpostМетод должен совпадать с методом внешнего запроса.
  • 2,queryработает с базой данныхsqlутверждение.
  • 3. Вернуться к внутренним даннымcode=20000, который является кодом состояния, указанным в шаблоне внешнего интерфейса, который должен возвращать серверный. Только с этим кодом состояния запрос может считаться успешным.
  • 4. Импортируется третья строка кодаcallCloudDBмодуль, это связано с тем, что когда мы запрашиваем или запрашиваем облачную базу данных и работаем с облачной базой данных, мы проверяем официальный документ WeChat и обнаруживаем, что данный адрес запроса очень похож (отличается только один параметр в адресе), а параметры запроса точно такие же. Поэтому мы инкапсулируем его вcallCloudDBмодуль. После этого, когда вам нужно взаимодействовать с базой данных, вы можете напрямую вызвать этот метод и передать соответствующие параметры. Например вышеdelметод требует кода для удаления данных базы данныхconst res = await callCloudDB(ctx, 'databasedelete', query),вctxэто контекст,databasedeleteФиксированные параметры для операций удаления,queryзаsqlутверждение. После этого вам нужно выполнить другие операции, пока вы меняете соответствующие параметры. Как же это не очень удобно 😬😬😬.

callCloudDB.jsКод прилагается:

const getAccessToken = require('./getAccessToken.js')
const rp = require('request-promise')

const callCloudDB = async(ctx, fnName, query = {}) => {
    const ACCESS_TOKEN = await getAccessToken()
    const options = {
        method: 'POST',
        uri: `https://api.weixin.qq.com/tcb/${fnName}?access_token=${ACCESS_TOKEN}`,
        body: {
            query,
            env: ctx.state.env,
        },
        json: true // Automatically stringifies the body to JSON
    }

    return await rp(options)
        .then((res) => {
            return res
        })
        .catch(function (err) {
            console.log(err);
        })
}

module.exports = callCloudDB

Еще несколько пояснений:

  • ACCESS_TOKENНазвать учетные данные для интерфейса апплета, а параметры, необходимые для взаимодействия с данными апплета, ввестиgetAccessToken.jsпросто чтобы получить это,getAccessToken.jsЭто будет подробно объяснено позже. оAccessToken, в официальном документе есть подробное пояснениеСсылка здесь!

Давайте просто начнем снова с нуля.

  • 1. Передняя частьapiВ файле пропишите метод запроса для получения данных и передайте параметры, которые будут использоваться бэкенду.
  • 2. Мы в бэкендеcontrollersСоздайте в папке соответствующие файлы, как показано на рисунке:

  • 3. В файле использовать официальный документ WeChat под облачной разработкойДокументация по HTTP-APIПредоставляет метод написания кода для работы вашей собственной облачной функции или облачной базы данных. Верните полученное значение в интерфейс, не забудьте ввести код состояния (20000)
  • 4. Написать страницу в интерфейсном проекте (исходный проект был интегрированelement-ui, мы можем использовать его напрямую), выполнить некоторую обработку данных, возвращаемых серверной частью, а затем отобразить их на странице.

Весь процесс, вероятно, такой, и другие страницы точно такие же. Есть некоторые детали, о которых я продолжу говорить далее, и некоторые детали, о которых я не буду подробно говорить. Может быть, мой текст недостаточно хорош и труден для понимания, или, может быть, мои друзья не слишком много понимают, добро пожаловать на обсуждение и обмен мнениями в области комментариев. При необходимости свяжитесь с автором для обсуждения. 😁

4. Я чувствую себя лучше в проекте (Дабай чувствует себя 🙄🙄🙄)

1. Файлы инструментов, упакованные бэкендом, очень хороши (то есть файлы в папке utils)

  • Учетные данные вызова для интерфейса апплетаACCESS_TOKENВыборка инкапсулируетgetAccessToken.jsфайл, его роль состоит в том, чтобы получитьACCESS_TOKENЗатем создайте каталог на том же уровнеaccess_token.jsonизJSONфайл, положитьACCESS_TOKENХраните и сохраняйте время приобретения одновременно. тогда поставьgetAccessTokenЭкспортированный как модуль, его можно напрямую импортировать и использовать на других страницах. и файл противACCESS_TOKENВремя истечения оценивается, и оно будет повторно получено, когда оно истечет (потому чтоACCESS_TOKENДействует 2 часа)
  • Он инкапсулирует облачную базу данных для работыcallCloudDB.js, роль этого файла была упомянута выше.
  • Инкапсулирует облачную функцию для работыcallCloudFn.js, потому что параметры, необходимые для работы интерфейса, вызываемого облачной функцией, также отличаются от имени облачной функции и параметров, передаваемых в облачную функцию, которые можно использовать повторно.

2. Интерфейсный проект шаблона особенно мощный.Нам нужно только изменить представление и маршрутизацию в проекте шаблона в соответствии с нашими собственными потребностями для реализации нашего собственного проекта.

5. Проблемы, возникшие в процессе выполнения проекта (конечно, это не значит, что у мелких партнеров будут такие же проблемы)

1. Когда браузер проскальзывает вниз страницы, данные снова берутся из базы данных и отображаются на странице.

  • На предмет того, скатился ли браузер в самый низ, я только начал делать следующее суждение.

1. Получите реальную высоту документа (то есть вы устанавливаете высоту того, сколько фрагментов данных отображается на странице каждый раз)const scrollHeight = document.documentElement.scrollHeight
2. Получить видимую высоту окна браузера, которая является видимой невооруженным глазом частью полной высоты экрана.
const clientHeight = document.documentElement.clientHeight
3. Получите высоту прокрутки браузера вверх
const scrollTop = document.documentElement.scrollTop

  • После получения этих трех данных, согласноscrollHeight == scrollTop + clientHeightЭто условие оценки определяет, нужно ли снова получать данные, а затем,🤕🤕
  • посмотрите на картинку

  • Наконец-то я задумался над этим моментом, есть ли с этим проблема. Распечатайте эти три данных, как показано выше, красное поле — это данные, напечатанные браузером, сдвинувшимся вниз, я плакал🤪🤪
  • мы обнаруживаемscrollHeight 比 scrollTop + clientHeightМалый то 0,28,. так привести кscroll.jsне вступило в силу. Изменение этого условия оценки решит проблему.

2. Когда я получу время выпуска на странице блога

  • То есть красная часть рисунка
  • Я только начал видеть в данных, возвращаемых серверной частью, что естьcreateTimeНиже приведен$date, но я просто не могу получить это значение. После долгих попыток я поставилcreateTimeраспечатай и узнай, что это{__ob__: Observer}. Затем Baidu нашла множество таких проблем и решила их плавно по методу пользователя сети. данные, которые необходимо вернутьdataсначала преобразовать вJSONстроковую форму, а затем преобразовать из строковой формы вJSONФорматJSON.parse(JSON.stringify(data))(Хотя я знаю, что я могу решить проблему, сделав это, но я не знаю, почему😅, надеюсь, если найдется большой парень, который это знает, я смогу объяснить это Дабаю. 😁)
  • для форматирования времениmoment.jsрешать,moment.jsНа этот раз библиотека классов обработки действительно удобна! Он также очень прост в использовании! Рекомендуем, ссылка в конце статьи. (Я узнал на полпути к написанию этой статьи 🤣🤣)

напиши в конце

Автор просто мастер интерфейса (●—●) Эта статья вторая, написанная автором, хоть и заняло много времени, все же немного сложно писать такую ​​большую статью. Если в тексте есть ошибки, прошу меня простить, лучше указывать на ошибки, чтобы новички имели возможность учиться. 😊😊

Я надеюсь, что друзья, которые прочитали это, могут поставить большой палец вверх перед уходом, спасибо 🙏🙏. Ваша поддержка - моя самая большая поддержка! ! ! Адрес проекта прилагается, и нуждающиеся студенты могут его забрать.

Справочная документация

Категории