1. Preparación de antecedentes

Primero cree un nuevo proyecto y luego importe las dependencias pom relevantes.

Algunas de las siguientes clases de herramientas también están listas. Para las clases de herramientas, consulte el blog anterior sobre la construcción del proyecto SpringMVC.

El pom depende de lo siguiente

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.dengxiyan</groupId>
    <artifactId>minoa</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>minoa</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
        <fastjson.version>1.2.70</fastjson.version>
        <jackson.version>2.9.8</jackson.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.44</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.2</version>
                <dependencies>
                    <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>${mysql.version}</version>
                    </dependency>
                </dependencies>
                <configuration>
                    <overwrite>true</overwrite>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

Configurar origen de datos

aplicación.yml

spring:
  datasource:
    #type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikari
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    username: root
    password: 123456
mybatis:
  mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
  type-aliases-package: com.dengxiyan.minoa.model #指定自动生成别名所在包

logging:
  level:
    root: info
    com.dengxiyan.minoa.mapper: debug

mybatis-generador

Generar interfaz de mapeador, clase de entidad modelo, archivo de mapeo de mapeador

Integrar mybatis

aplicación.yml

mybatis:
  mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
  type-aliases-package: com.zking.ssm.model #指定自动生成别名所在包

en la clase de inicio

package com.dengxiyan.minoa;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.dengxiyan.minoa.mapper")
@SpringBootApplication
public class MinoaApplication {

    public static void main(String[] args) {
        SpringApplication.run(MinoaApplication.class, args);
    }

}

Visualización de datos

En segundo lugar, prepare los datos de la página de inicio del front-end

Mostrar los datos anteriores en primer plano

Promesa

Las promesas son una solución a la programación asíncrona que son más lógicas y poderosas que las soluciones tradicionales: eventos y funciones de devolución de llamada. La comunidad lo propuso e implementó por primera vez. ES6 lo escribió en el lenguaje estándar, unificó el uso y proporcionó objetos de Promise de forma nativa.

La llamada Promesa es simplemente un contenedor que contiene el resultado de un evento (generalmente una operación asíncrona) que terminará en el futuro. Sintácticamente, una Promesa es un objeto del que se pueden obtener mensajes de una operación asíncrona. Promise proporciona una API unificada y varias operaciones asincrónicas se pueden procesar de la misma manera.

Hay tres estados en la operación de promesa:

pendiente: esperando (en progreso) tan pronto como se crea la promesa, el pendiente está en progreso

cumplido: éxito (completado), llamar a resolver cambiará el estado de pendiente a cumplido, y se ejecutará en el futuro.

rechazado: falla (rechazo), llamar al rechazo cambiará el estado de pendiente a rechazado y ejecutará .catch en el futuro

punto importante:

Una vez que cambie el estado de la promesa, el estado se congelará

Si llama a rechazar o resolver nuevamente, no tiene sentido modificar el estado

solicitud de encapsulación

en /utils/util.js

/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
      },
      success: function (res) {
        if (res.statusCode == 200) {
            resolve(res.data);//会把进行中改变成已成功
        } else {
          reject(res.errMsg);//会把进行中改变成已失败
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  });
}

pantalla de conferencia

índice/índice.js

loadMeetingInfos(){
    util.request(api.IndexUrl).then(res=>{
      this.setData({
        lists:res.data.infoList
      })
    }).catch(res=>{
        console.log('服器没有开启，使用模拟数据!')
    })
  }

Agregue /utils/page.wxs

function getState(state){
  if(state == 0){
    return '取消会议';
  }
  else if(state == 1){
    return '待审核';
  }
  else if(state == 2){
    return '驳回';
  }
  else if(state == 3){
    return '待开';
  }
  else if(state == 4){
    return '进行中';
  }
  else if(state == 5){
    return '开启投票';
  }
  else if(state == 6){
    return '结束会议';
  }
    return '其他';
}
function getNumber(s){
    s+=""
    var arr = s.split(",");
    return arr.length;
}

function formatDate(ts, option) {
  var date = getDate(ts)
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  
  //获取 年月日
  if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')

  //获取 年
  if (option == 'YY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return  [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week')  return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh')  return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm')  return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch(n) {
      case 1:
      return '星期一'
      case 2:
      return '星期二'
      case 3:
      return '星期三'
      case 4:
      return '星期四'
      case 5:
      return '星期五'
      case 6:
      return '星期六'
      case 7:
      return '星期日'
  }
}


module.exports = {
  getState: getState,
  getNumber: getNumber,
  formatDate:formatDate
};

Modificar reunión/lista/lista.wxml

<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{
   
   {tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{
   
   {lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{
   
   {item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{
   
   {item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{
   
   {item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{
   
   {item.state}}</view>
                <view class="join al-center"><text class="list-num">{
   
   {item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{
   
   {item.address}}</text>|<text>{
   
   {item.time}}</text></view>
        </view>
    </view>
</block>

Las representaciones son las siguientes

Proyecto de miniprograma: interacción de fondo (página de inicio)