Предисловие

Я только начал изучать разработку небольших программ. Каждый день, проснувшись, я не иду смотреть документацию, а открываю группу и проверяю информацию о посещаемости, заполняю таблицу ex (бедный второкурсник, каждый день получает более 99 уведомлений), поэтому у меня появилась идея создать небольшую программу для регистрации информации об учащихся. Сначала я написал простую форму для отправки отчётов, но после того как закончил, мне показалось, что чего-то не хватает, поэтому функций становилось всё больше, проект постоянно перестраивался, многое в нём было изучено и применено на практике, на это ушло около 10 дней, и я почти исчерпал все идеи... Нет, я просто написал всё, что мог, в проекте есть полный набор взаимодействия между передней и задней частью, из-за того, что многие данные на начальном этапе и на более позднем этапе имеют разные концепции проектирования, можно сказать, что я бью себя по лицу, поэтому будет много несовершенных мест, надеюсь, вы отнесётесь к этому с пониманием... (* ゜ェ゜ *) Не буду много говорить, сейчас я расскажу о дизайне и некоторых функциях этого проекта.

Связанные адреса

• juejin.im
• zhihu.com

Технологический стек

• Программа WeChat Mini
• Облачная разработка
• Vant
• Colorui
• Версия Echarts для программы WeChat Mini

Дизайн функций

Главная страница

Главная страница выглядит так: она состоит из слухов (источник данных — «Аромат жасмина») и карты распределения зимних каникул студентов нашей школы по провинциям и т. д., после того как студенты отправят данные, карта будет обновлена соответствующим образом в зависимости от количества людей в каждой провинции.
Данные карты хранятся в облачной базе данных, они управляются отдельной таблицей, каждая провинция является записью.

{
  "_id": "Шанхай",  
  "name": "Шанхай", //провинция
  "value": 87.0  //количество студентов из этой провинции в нашей школе
}

Данные карты извлекаются из функции облака getArea, а затем возвращаются на переднюю страницу для инициализации карты. Конкретный пример можно посмотреть в версии Echarts для WeChat Mini, или вы можете напрямую посмотреть мой исходный код. Здесь я хочу упомянуть некоторые проблемы, с которыми я столкнулся. Поскольку для рисования карты необходимо импортировать данные карты Китая в формате json (каталог mapData), а в примере версии Echarts для WeChat Mini есть только данные карты провинции Хэнань в формате json, необходимо перейти в echarts, чтобы скопировать данные карты Китая в формате json и вставить их в каталог mapData, чтобы нарисовать карту Китая (остальные карты такие же). В начале это было очень сложно. Поскольку данные карты загружаются асинхронно, инициализация карты происходит после получения данных.

    this.ecComponent = this.selectComponent('#mychart-dom-bar');
    wx.cloud.callFunction({
      name: 'getArea'
    }).then((res)=>{
      let result = res.result
      let option = initOption(result)
      this.ecComponent.init((canvas, width, height) => {
        // Получение компонентов canvas, width, height и последующее выполнение обратного вызова
        // Инициализировать диаграмму здесь
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        chart.setOption(option)
        // Привязать экземпляр диаграммы к this, чтобы его можно было получить в других функциях-членах (например, dispose)
        this.chart = chart;
        return chart;
      });
    })

Карусель взята из colorui, это библиотека css для программы WeChat Mini, просто добавьте соответствующий класс.

Страница отправки данных

Студенты вводят свои имена, номера студентов и телефоны, выбирают школу и класс (из-за нехватки времени реализовано только несколько школ), выбирают, есть ли у них жар, и могут отправлять данные.
Данные учащихся хранятся в облачной базе данных, ими управляет отдельная таблица, каждый учащийся является записью

//Пример данных одного учащегося
{
  "passCity": [
    "Пекин-Пекин-Восточный округ"                  //текущее местоположение
  ],
  "openId": "oLuLy5MxC_dnd0eZhDVESsoMRln0", //уникальный идентификатор пользователя
  "isHot": 1.0,                             //1 нет жара 2 есть жар
  "admin": true,                            //является ли он администратором
  "classId": 1.0,                           //идентификатор класса
  "isCommited": 1.0,                        //отправлено ли
  "name": "Ма Хуатэн",                         //имя
  "phone": "18074815679",                   //номер телефона
  "studentId": "1233545"                    //номер студента
}

Вход

Перед отправкой данных пользователь должен запросить информацию, которая будет сохранена в базе данных. Идентификатор openId пользователя WeChat используется в качестве уникального идентификатора пользователя, поскольку используется облачная разработка, получить openId очень просто, просто получите контекст пользователя в функции облака, чтобы получить его. Вернёмся к основной теме. Если пользователь уже существует в базе данных, верните соответствующие данные пользователя, если нет, инициализируйте данные и сохраните их в базе данных.

// login
const cloud = require('wx-server-sdk')
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database().collection('user')

// 云函数入口函数
exports.main = async (event, context) => {
  const {OPENID} = cloud.getWXContext()
  let result = await db.where({
    openId: OPENID
  }).get()
  //Если в базе данных нет этого пользователя, то инициализируем данные и сохраняем их в базу данных
  if(!result.data.length){
    Object.assign(event.user, event.userInfo)
    event.user.isPut = false
    event.user.isHot = 0
    event.user.passCity = []
    await db.add({
      data:event.user
    })
  }
  return result
}

Отправка данных

После того как учащиеся заполнят информацию, будут вызваны две функции облака: одна для обновления данных учащихся, другая — для добавления учащихся в соответствующий класс, а другая — для обновления данных карты, чтобы увеличить количество учащихся в соответствующей провинции на единицу.

//updateArea
exports.main = async(event, context) => {
  const {
    OPENID
  } = cloud.getWXContext()
  // Если уже отправленный студент снова отправляет данные, то количество людей в предыдущем местоположении уменьшается на 1
  if (event.isCommited) {
    let oldCity = await db.collection('user').where({
      openId: event.userInfo.openId
    }).get()
    oldCity = oldCity.data[0].passCity[0].substr(0, 2)
    //Поскольку названия провинций в Гуанси и Внутренней Монголии трудно контролировать, используется приблизительное соответствие
    await db.collection('area').where({
      name: db.RegExp({
        regexp: oldCity,
        options: 's',
      })
    }).update({
      data: {
        value: _.inc(-1)
      }
    })
  }
  //Поскольку названия провинций в Гуанси и Внутренней Монголии трудно контролировать, используется приблизительное соответствие

``` ```
await db.collection('area').where({
    name: db.RegExp({
      regexp: event.citys[0],
      options: 's',
    })
  }).update({
    data: {
      value: _.inc(1)
    }
  })
  return 'ok'
}

///updataUser
exports.main = async (event, context) => {
  const {
    OPENID
  } = cloud.getWXContext()
  const { name, phone, citys, isHot, studentId, classId} = event
  //第一次提交时会提交所属的班级，将该学生的信息存到相应班级的表中
  if (classId){
    await db.collection('class').where({
      classId
    }).update({
      data:{
        commitedStudents:_.push({
          name,
          phone,
          citys,
          isHot: isHot - 0
        })
      }
    })
  }
  await db.collection('user').where({
    openId: OPENID
  }).update({
      data: {
        name,
        studentId,
        phone,
        classId,
        passCity: citys,
        isHot: isHot - 0,
        isCommited:1,
        isPut:true}
  })
  return 'ok'
}

管理员页面

В тексте описывается интерфейс администратора системы, который позволяет просматривать информацию о студентах в определённом регионе, о студентах с повышенной температурой, а также о статусе студентов в классах. Для доступа к этой странице требуется проверка прав доступа, которая осуществляется путём проверки наличия поля «admin: true» в записи пользователя в базе данных.

//验证权限云函数
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const OPENID = wxContext.OPENID || event.OPENID
  let user = await db.collection('user').where({
    openId: OPENID
  }).get()
  user = user.data[0]
  if(!user.admin){
    return 'error'
  }
  return 'ok'
}

Данные о классах хранятся в отдельной таблице в облачной базе данных, и каждый класс представлен одной записью.

{
  "classId": 9,                   //班级id
  "name": "16经济一",             //班级名字
  "student_sum": 50,              //班级总人数
  "commitedStudents": []          //已经提交信息了的学生，每个学生是个对象
}

Как запустить проект

• git clone git@github.com:Akakiiiiii/students-system.git
• cd students-system
• cd cloudfunctions
• npm i
• Используйте инструмент разработки для мобильных приложений от WeChat для импорта этого мини-приложения. Введите свой собственный appId.
• Откройте проект, перейдите в раздел «Облачные функции», создайте три таблицы: area, user и class, и импортируйте файлы JSON из папки проекта, по одному файлу для каждой таблицы. Файлы с именем, содержащим «area», должны быть импортированы в таблицу area и так далее.
• Наконец, загрузите все облачные функции в инструмент разработчика WeChat. Выберите «Установить зависимости на сервере», чтобы запустить этот проект.