小程序项目-后台交互（首页）

目录

一，后台准备

配置数据源

整合mybatis

二，准备前端的首页的数据

封装request

会议展示

---

一，后台准备

先建一个新的项目，建好后导入相关的pom依赖，将

以下的一些工具类也准备好，工具类可参考前面有关SpringMVC项目搭建的博客 

pom依赖如下

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.7
         
    
    com.dengxiyan
    minoa
    0.0.1-SNAPSHOT
    minoa
    Demo project for Spring Boot
    
        1.8
        1.2.70
        2.9.8
    
    
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.1
        

        
            mysql
            mysql-connector-java
            5.1.44
            runtime
        
        
            org.projectlombok
            lombok
            true
        

        
            com.alibaba
            fastjson
            ${fastjson.version}
        

    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            

            
                org.mybatis.generator
                mybatis-generator-maven-plugin
                1.3.2
                
                    
                    
                        mysql
                        mysql-connector-java
                        ${mysql.version}
                    
                
                
                    true
                
            
        
    

配置数据源

appliation.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-generator

生成mapper接口，model实体类，mapper映射文件

整合mybatis

application.yml

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

在启动类

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);
    }

}

数据展示

二，准备前端的首页的数据

将以上的数据展示到前台

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

• promise运行中有三个状态：

  • pending: 等待 (进行中) promise一创建出来，就是pending进行中

  • fulfilled: 成功 (已完成), 调用 resolve, 就会将状态从pending改成fulfilled, 且将来就会执行.then

  • rejected: 失败 (拒绝), 调用 reject, 就会将状态从pending改成rejected, 且将来就会执行.catch

• 注意点：

  • 一旦promise的状态发生变化, 状态就会被凝固

  • 如果再调用reject或resolve,进行状态修改就没有意义了

封装request

 在/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)
      }
    })
  });
}

会议展示

index/index.js

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

 新增/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
};

修改meeting/list/list.wxml

    
        
            
        
        
            {{item.title}}
            
                {{item.state}}
                {{item.num}}人报名
            
            {{item.address}}|{{item.time}}
        
    
 

效果图如下