小程序：后台交互-首页

目录

数据库准备

后台准备

pom.xml

配置数据源

mybatis-generator

整合mybatis

准备前端的首页的数据

Promise

封装request

会议展示

通过wxs将首页动态数据优化

---

数据库准备

新建数据库oapro：

 

 

 

后台准备

• springboot+mybatis

• 

   

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.7
         
    
    com.ycx
    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
                
            
        
    

别忘了修改maven配置哦~

配置数据源

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: 1234

mybatis-generator

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

generatorConfig.xml：

 jdbc.properties：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/oapro?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=1234
jdbc.initialSize=10
jdbc.maxTotal=100
jdbc.maxIdle=50
jdbc.minIdle=10
jdbc.maxWaitMillis=-1

一些工具类：

 

整合mybatis

application.yml

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

在启动类

@MapperScan("com.ycx.minoa.mapper") //指mapper接口所在包

运行后台：

 访问到数据库数据：

 后台即搭建完成！

准备前端的首页的数据

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中

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}
/**
 * 封装微信的request请求
 * $.post(url)
 */
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)
      }
    })
  });
}

module.exports = {
  formatTime,request
}

会议展示

• index/index.js

loadMeetingInfos(){
    let that=this;
    // wx.request({
    //     url: api.MettingInfos,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           lists:res.data.lists
    //       })
    //     }
    //   })
    util.request(api.IndexUrl).then(res=>{
      this.setData({
        lists:res.data.infoList
      })
    }).catch(res=>{
        console.log('服器没有开启，使用模拟数据!')
    })
  }

 数据已是动态的。

通过wxs将首页动态数据优化

新增/utils/page.wxs：

function getState(state){
  // 状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
  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 '其它';

}
var getNumber = function(str) {
var s = str+'';
var array = s.split(',');
var len = array.length;
return len;
}
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
};

修改pages/index/index.wxml

    
        
            
                
                    
                
            
        
    


    
    会议信息


    
        
            
        
        
            {{item.title}}
            
                {{tools.getState(item.state)}}
                {{tools.getNumber(item.canyuze)}}人报名
            
            {{item.location}}|{{tools.formatDate(item.starttime)}}
        
    


		到底啦

效果图： 

 

今日内容就先到这里咯，再会！