devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序之会议OA首页后台交互

作者：知新_RL | 2024-03-01 12:04:17

赞

踩

微信小程序之会议OA首页后台交互

目录

后台准备

pom.xml

配置数据源

mybatis-generator

整合mybatis

准备前端的首页的数据

Promise

封装request

会议展示

WXS

入门示例

注意事项

页面渲染

数据处理

综合案例

后台准备

springboot+mybatis

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.6.2</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.zking.ssm</groupId>
  12.     <artifactId>ssm-oa</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <description>OAPRO</description>
  15.     <properties>
  16.         <java.version>1.8</java.version>
  17.         <fastjson.version>1.2.70</fastjson.version>
  18.         <jackson.version>2.9.8</jackson.version>
  19.     </properties>
  20.     <dependencies>
  21.         <dependency>
  22.             <groupId>org.springframework.boot</groupId>
  23.             <artifactId>spring-boot-starter-jdbc</artifactId>
  24.         </dependency>
  25.         <dependency>
  26.             <groupId>org.springframework.boot</groupId>
  27.             <artifactId>spring-boot-starter-web</artifactId>
  28.         </dependency>
  29.  
  30.         <dependency>
  31.             <groupId>org.mybatis.spring.boot</groupId>
  32.             <artifactId>mybatis-spring-boot-starter</artifactId>
  33.             <version>2.2.1</version>
  34.         </dependency>
  35.  
  36.         <dependency>
  37.             <groupId>mysql</groupId>
  38.             <artifactId>mysql-connector-java</artifactId>
  39.             <version>5.1.44</version>
  40.             <scope>runtime</scope>
  41.         </dependency>
  42.         <dependency>
  43.             <groupId>org.projectlombok</groupId>
  44.             <artifactId>lombok</artifactId>
  45.             <optional>true</optional>
  46.         </dependency>
  47.         
  48.         <dependency>
  49.             <groupId>com.alibaba</groupId>
  50.             <artifactId>fastjson</artifactId>
  51.             <version>${fastjson.version}</version>
  52.         </dependency>
  53.  
  54.     </dependencies>
  55.  
  56.     <build>
  57.         <plugins>
  58.             <plugin>
  59.                 <groupId>org.springframework.boot</groupId>
  60.                 <artifactId>spring-boot-maven-plugin</artifactId>
  61.                 <configuration>
  62.                     <excludes>
  63.                         <exclude>
  64.                             <groupId>org.projectlombok</groupId>
  65.                             <artifactId>lombok</artifactId>
  66.                         </exclude>
  67.                     </excludes>
  68.                 </configuration>
  69.             </plugin>
  70.  
  71.             <plugin>
  72.                 <groupId>org.mybatis.generator</groupId>
  73.                 <artifactId>mybatis-generator-maven-plugin</artifactId>
  74.                 <version>1.3.2</version>
  75.                 <dependencies>
  76.                     <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
  77.                     <dependency>
  78.                         <groupId>mysql</groupId>
  79.                         <artifactId>mysql-connector-java</artifactId>
  80.                         <version>${mysql.version}</version>
  81.                     </dependency>
  82.                 </dependencies>
  83.                 <configuration>
  84.                     <overwrite>true</overwrite>
  85.                 </configuration>
  86.             </plugin>
  87.         </plugins>
  88.     </build>
  89.  
  90. </project>

配置数据源

appliation.yml

  1. spring:
  2.   datasource:
  3.     #type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikari
  4.     type: com.zaxxer.hikari.HikariDataSource
  5.     driver-class-name: com.mysql.jdbc.Driver
  6.     url: jdbc:mysql://localhost:3306/oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
  7.     username: root
  8.     password: sasa

mybatis-generator

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

整合mybatis

application.yml

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

在启动类

@MapperScan("com.zking.ssm.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中

  1. /**
  2.  * 封装微信的request请求
  3.  */
  4. function request(url, data = {}, method = "GET") {
  5.   return new Promise(function (resolve, reject) {
  6.     wx.request({
  7.       url: url,
  8.       data: data,
  9.       method: method,
  10.       header: {
  11.         'Content-Type': 'application/json',
  12.       },
  13.       success: function (res) {
  14.         if (res.statusCode == 200) {
  15.             resolve(res.data);//会把进行中改变成已成功
  16.         } else {
  17.           reject(res.errMsg);//会把进行中改变成已失败
  18.         }
  19.       },
  20.       fail: function (err) {
  21.         reject(err)
  22.       }
  23.     })
  24.   });
  25. }

会议展示

index/index.js

  1. loadMeetingInfos(){
  2.     let that=this;
  3.     util.request(api.IndexUrl).then(res=>{
  4.       this.setData({
  5.         lists:res.data.infoList
  6.       })
  7.     }).catch(res=>{
  8.         console.log('服器没有开启，使用模拟数据!')
  9.     })
  10.   }

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

入门示例

  • 新建一个wxs文件

  1. var toDecimal2 = function (x) {
  2.     var f = parseFloat(x);
  3.     if (isNaN(f)) {
  4.       return '0.00'
  5.     }
  6.     var f = Math.round(x * 100) / 100;
  7.     var s = f.toString();
  8.     var rs = s.indexOf('.');
  9.     if (rs < 0) {
  10.       rs = s.length;
  11.       s += '.';
  12.     }
  13.     while (s.length <= rs + 2) {
  14.       s += '0';
  15.     }
  16.     return s;
  17.   }
  18.   //module.exports = toDecimal2
  19. module.exports = {
  20.     toDecimal2:toDecimal2
  21. }

在wxml中使用

  1. <!--pages/c/c.wxml-->
  2. <wxs src="../../wxs/PageUtils.wxs" module="PageUtils"></wxs>
  3. <wxs module="m1">
  4. var msg = "hello world";
  5.  
  6. module.exports.message = msg;
  7. </wxs>
  8. <view>
  9.     <text>pages/c/c.wxml,</text>
  10.     <text>{{m1.message}}</text>
  11.     <view>
  12.         <text>{{PageUtils.toDecimal2(123.453)}}</text>
  13.     </view>
  14.     <view>
  15.         <button type="primary" bindtap="jump">跳转到D页面</button>
  16.     </view>
  17. </view>

注意事项

  1. WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

  2. WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

  3. WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

  4. WXS 函数不能作为组件的事件回调。

  5. 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考:WXS 语法参考 | 微信开放文档

页面渲染

  1. <!--wxml-->
  2. <wxs module="m1">
  3. var msg = "hello world";
  4.  
  5. module.exports.message = msg;
  6. </wxs>
  7.  
  8. <view> {{m1.message}} </view>

页面输出： hello world

数据处理

  1. // page.js
  2. Page({
  3.   data: {
  4.     array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  5.   }
  6. })
  7. <!--wxml-->
  8. <!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
  9. <wxs module="m1">
  10. var getMax = function(array) {
  11.   var max = undefined;
  12.   for (var i = 0; i < array.length; ++i) {
  13.     max = max === undefined ?
  14.       array[i] :
  15.       (max >= array[i] ? max : array[i]);
  16.   }
  17.   return max;
  18. }
  19.  
  20. module.exports.getMax = getMax;
  21. </wxs>
  22.  
  23. <!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
  24. <view> {{m1.getMax(array)}} </view>

页面输出：5

综合案例

  1. 在utils目录下创建创建common.wxs文件

  2. 添加首页数据处理转换方法

  • 会议状态切换

  1. var changeStatus=function(state){
  2.   //状态：0取消会议1待审核2驳回3待开4进行中5开启投票6结束会议，默认值为1
  3.   if(state==0)
  4.     return "取消会议";
  5.   else if(state==1)
  6.     return "待审核";
  7.   else if(state==2)
  8.     return "驳回";
  9.   else if(state==3)
  10.     return "待开";
  11.   else if(state==4)
  12.     return "进行中";
  13.   else if(state==5)
  14.     return "开启投票";
  15.   else
  16.     return "会议结束";
  17. };

参会人数统计

  1. var getCount=function(str){
  2.   //参与者+列席者+主持人==全部参会人员
  3.   //数组分割
  4.   var arr=str.split(',');
  5.   //用于接收数组去重后的结果
  6.   var arr2=[];
  7.   //循环并进行数组去重处理
  8.   for(var i=0;i<arr.length;i++){
  9.     if(arr2.indexOf(arr[i])==-1){
  10.       arr2.push(arr[i]);
  11.     }
  12.   }
  13.   return arr2.length;
  14. }

参会日期转换

  1. function formatDate(ts, option) {
  2.   var date = getDate(ts)
  3.   var year = date.getFullYear()
  4.   var month = date.getMonth() + 1
  5.   var day = date.getDate()
  6.   var week = date.getDay()
  7.   var hour = date.getHours()
  8.   var minute = date.getMinutes()
  9.   var second = date.getSeconds()
  10.   
  11.   //获取 年月日
  12.   if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
  13.   //获取 年月
  14.   if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
  15.   //获取 年
  16.   if (option == 'YY') return [year].map(formatNumber).toString()
  17.   //获取 月
  18.   if (option == 'MM') return  [mont].map(formatNumber).toString()
  19.   //获取 日
  20.   if (option == 'DD') return [day].map(formatNumber).toString()
  21.   //获取 年月日 周一 至 周日
  22.   if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
  23.   //获取 月日 周一 至 周日
  24.   if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
  25.   //获取 周一 至 周日
  26.   if (option == 'Week')  return getWeek(week)
  27.   //获取 时分秒
  28.   if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
  29.   //获取 时分
  30.   if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
  31.   //获取 分秒
  32.   if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
  33.   //获取 时
  34.   if (option == 'hh')  return [hour].map(formatNumber).toString()
  35.   //获取 分
  36.   if (option == 'mm')  return [minute].map(formatNumber).toString()
  37.   //获取 秒
  38.   if (option == 'ss') return [second].map(formatNumber).toString()
  39.   //默认 时分秒 年月日
  40.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  41. }
  42.  
  43. function formatNumber(n) {
  44.   n = n.toString()
  45.   return n[1] ? n : '0' + n
  46. }
  47.  
  48. function getWeek(n) {
  49.   switch(n) {
  50.       case 1:
  51.       return '星期一'
  52.       case 2:
  53.       return '星期二'
  54.       case 3:
  55.       return '星期三'
  56.       case 4:
  57.       return '星期四'
  58.       case 5:
  59.       return '星期五'
  60.       case 6:
  61.       return '星期六'
  62.       case 7:
  63.       return '星期日'
  64.   }
  65. }

3.wxs页面渲染处理

模块输出

  1. module.exports={
  2.   changeStatus:changeStatus,
  3.   getCount:getCount,
  4.   formatDate:formatDate
  5. }

页面渲染

  1. <wxs src="/utils/common.wxs" module="common"></wxs>
  2. ...
  3. <block wx:for="{{lists}}" wx:key="id">
  4.   <view class="list">
  5.       <view class="list-img">
  6.         <image src="{{item.image?item.image:'/static/persons/1.jpg'}}"></image>
  7.       </view>
  8.       <view class="list-detail">
  9.         <view class="list-title"><text>{{item.title}}</text></view>
  10.         <view class="list-tag">
  11.           <view>{{common.changeStatus(item.state)}}</view>
  12.           <view><text>{{common.getCount(item.canyuze+','+item.liexize+','+item.zhuchiren)}}</text>人报名</view>
  13.         </view>
  14.         <view class="list-info">
  15.           <text>{{item.location}} | {{common.formatDate(item.starttime)}}</text>
  16.         </view>
  17.       </view>
  18.   </view>
  19. </block>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/173826
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号