• 会议OA小程序项目 与后台数据的交互【首页】

    目录

    一. 与后台数据进行交互

    pom.xml

    配置数据源

    MinoaApplication

    WxHomeController

    后台数据展示 

    二. request的封装

    三. 会议展示

    一. 与后台数据进行交互

    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</groupId>
    12.     <artifactId>minoa</artifactId>
    13.     <version>0.0.1-SNAPSHOT</version>
    14.     <name>minoa</name>
    15.     <description>Demo project for Spring Boot</description>
    16.     <properties>
    17.         <java.version>1.8</java.version>
    18.         <fastjson.version>1.2.70</fastjson.version>
    19.         <jackson.version>2.9.8</jackson.version>
    20.     </properties>
    21.     <dependencies>
    22.         <dependency>
    23.             <groupId>org.springframework.boot</groupId>
    24.             <artifactId>spring-boot-starter-jdbc</artifactId>
    25.         </dependency>
    26.         <dependency>
    27.             <groupId>org.springframework.boot</groupId>
    28.             <artifactId>spring-boot-starter-web</artifactId>
    29.         </dependency>
    30.  
    31.         <dependency>
    32.             <groupId>org.mybatis.spring.boot</groupId>
    33.             <artifactId>mybatis-spring-boot-starter</artifactId>
    34.             <version>2.2.1</version>
    35.         </dependency>
    36.  
    37.         <dependency>
    38.             <groupId>mysql</groupId>
    39.             <artifactId>mysql-connector-java</artifactId>
    40.             <version>5.1.44</version>
    41.             <scope>runtime</scope>
    42.         </dependency>
    43.         <dependency>
    44.             <groupId>org.projectlombok</groupId>
    45.             <artifactId>lombok</artifactId>
    46.             <optional>true</optional>
    47.         </dependency>
    48.  
    49.         <dependency>
    50.             <groupId>com.alibaba</groupId>
    51.             <artifactId>fastjson</artifactId>
    52.             <version>${fastjson.version}</version>
    53.         </dependency>
    54.  
    55.     </dependencies>
    56.  
    57.     <build>
    58.         <plugins>
    59.             <plugin>
    60.                 <groupId>org.springframework.boot</groupId>
    61.                 <artifactId>spring-boot-maven-plugin</artifactId>
    62.                 <configuration>
    63.                     <excludes>
    64.                         <exclude>
    65.                             <groupId>org.projectlombok</groupId>
    66.                             <artifactId>lombok</artifactId>
    67.                         </exclude>
    68.                     </excludes>
    69.                 </configuration>
    70.             </plugin>
    71.  
    72.             <plugin>
    73.                 <groupId>org.mybatis.generator</groupId>
    74.                 <artifactId>mybatis-generator-maven-plugin</artifactId>
    75.                 <version>1.3.2</version>
    76.                 <dependencies>
    77.                     <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
    78.                     <dependency>
    79.                         <groupId>mysql</groupId>
    80.                         <artifactId>mysql-connector-java</artifactId>
    81.                         <version>${mysql.version}</version>
    82.                     </dependency>
    83.                 </dependencies>
    84.                 <configuration>
    85.                     <overwrite>true</overwrite>
    86.                 </configuration>
    87.             </plugin>
    88.         </plugins>
    89.     </build>
    90.  
    91. </project>

    配置数据源

    application.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/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=false
    7.     username: root
    8.     password: 123456
    9. mybatis:
    10.   mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
    11.   type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包
    12.  
    13. logging:
    14.   level:
    15.     root: info
    16.     com.zking.minoa.mapper: debug

    MinoaApplication

    1. package com.zking.minoa;
    2.  
    3. import org.mybatis.spring.annotation.MapperScan;
    4. import org.springframework.boot.SpringApplication;
    5. import org.springframework.boot.autoconfigure.SpringBootApplication;
    6.  
    7. @MapperScan("com.zking.minoa.mapper") //指mapper接口所在包
    8. @SpringBootApplication
    9. public class MinoaApplication {
    10.  
    11.     public static void main(String[] args) {
    12.         SpringApplication.run(MinoaApplication.class, args);
    13.     }
    14.  
    15. }

    WxHomeController

    1. package com.zking.minoa.wxcontroller;
    2.  
    3. import com.zking.minoa.mapper.InfoMapper;
    4. import com.zking.minoa.model.Info;
    5. import com.zking.minoa.util.ResponseUtil;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.web.bind.annotation.RequestMapping;
    8. import org.springframework.web.bind.annotation.RestController;
    9.  
    10. import java.util.HashMap;
    11. import java.util.List;
    12. import java.util.Map;
    13.  
    14. /**
    15.  * @Autho donkee
    16.  * @Since 2022/6/29
    17.  */
    18. @RestController
    19. @RequestMapping("/wx/home")
    20. public class WxHomeController {
    21.     @Autowired
    22.     private InfoMapper infoMapper;
    23.     @RequestMapping("/index")
    24.     public Object index(Info info) {
    25.         List infoList = infoMapper.list(info);
    26.         Map data = new HashMap();
    27.         data.put("infoList",infoList);
    28.         return ResponseUtil.ok(data);
    29.     }
    30. }

    后台数据展示 

    二. 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. }
    26. module.exports = {
    27.   request
    28. }

    三. 会议展示

    api.js

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3.  var WxApiRoot = 'http://localhost:8080/wx/';
    4.  // 测试环境部署api地址
    5.  // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
    6.  // 线上平台api地址
    7.  //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9.  module.exports = {
    10.    IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.    SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
    12.    MettingInfos: WxApiRoot+'meeting/list', //会议信息
    13.  };

    index/index.js

    1. // index.js
    2. // 获取应用实例
    3. const app = getApp()
    4. const api = require("../../config/api.js")
    5. const util = require("../../utils/util.js")
    6. Page({
    7.   data: {
    8.     imgSrcs: [{
    9.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    10.         "text": "1"
    11.       },
    12.       {
    13.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
    14.         "text": "2"
    15.       },
    16.       {
    17.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
    18.         "text": "3"
    19.       },
    20.       {
    21.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
    22.         "text": "4"
    23.       },
    24.       {
    25.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
    26.         "text": "5"
    27.       },
    28.       {
    29.         "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
    30.         "text": "6"
    31.       }
    32.     ],
    33.     lists: [
    34.  
    35.     ]
    36.   },
    37.   // 事件处理函数
    38.   bindViewTap() {
    39.     wx.navigateTo({
    40.       url: '../logs/logs'
    41.     })
    42.   },
    43.   loadMeetInfos() {
    44.     util.request(api.IndexUrl).then(res => {
    45.       console.log(res);
    46.       this.setData({
    47.         lists: res.data.infoList
    48.       })
    49.     })
    50.   },
    51.  
    52.   onLoad() {
    53.     if (wx.getUserProfile) {
    54.       this.setData({
    55.         canIUseGetUserProfile: true
    56.       })
    57.     }
    58.  
    59.     this.loadMeetInfos();
    60.   },
    61.   getUserProfile(e) {
    62.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    63.     wx.getUserProfile({
    64.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    65.       success: (res) => {
    66.         console.log(res)
    67.         this.setData({
    68.           userInfo: res.userInfo,
    69.           hasUserInfo: true
    70.         })
    71.       }
    72.     })
    73.   },
    74.   getUserInfo(e) {
    75.     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    76.     console.log(e)
    77.     this.setData({
    78.       userInfo: e.detail.userInfo,
    79.       hasUserInfo: true
    80.     })
    81.   }
    82. })

    utils/comm.wxs

    1. // /pages/comm.wxs
    2.  
    3. function getStateName(state){
    4.   if(state == 1){
    5.     return "待审核"
    6.   }else if(state == 2){
    7.     return "审核通过"
    8.   }else if(state == 3){
    9.     return "审核不通过"
    10.   }else if(state == 4){
    11.     return "待开会议"
    12.   }
    13.   return "其他";
    14. }
    15.  
    16. function getNum(canyuze,liexize,zhuchiren){
    17.   var person = canyuze + "," + liexize + "," + zhuchiren
    18.   return person.split(",").length;
    19. }
    20.  
    21. function formatDate(ts, option) {
    22.   var date = getDate(ts)
    23.   var year = date.getFullYear()
    24.   var month = date.getMonth() + 1
    25.   var day = date.getDate()
    26.   var week = date.getDay()
    27.   var hour = date.getHours()
    28.   var minute = date.getMinutes()
    29.   var second = date.getSeconds()
    30.   
    31.   //获取 年月日
    32.   if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')
    33.  
    34.   //获取 年月
    35.   if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')
    36.  
    37.   //获取 年
    38.   if (option == 'YY') return [year].map(formatNumber).toString()
    39.  
    40.   //获取 月
    41.   if (option == 'MM') return  [mont].map(formatNumber).toString()
    42.  
    43.   //获取 日
    44.   if (option == 'DD') return [day].map(formatNumber).toString()
    45.  
    46.   //获取 年月日 周一 至 周日
    47.   if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    48.  
    49.   //获取 月日 周一 至 周日
    50.   if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)
    51.  
    52.   //获取 周一 至 周日
    53.   if (option == 'Week')  return getWeek(week)
    54.  
    55.   //获取 时分秒
    56.   if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')
    57.  
    58.   //获取 时分
    59.   if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')
    60.  
    61.   //获取 分秒
    62.   if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')
    63.  
    64.   //获取 时
    65.   if (option == 'hh')  return [hour].map(formatNumber).toString()
    66.  
    67.   //获取 分
    68.   if (option == 'mm')  return [minute].map(formatNumber).toString()
    69.  
    70.   //获取 秒
    71.   if (option == 'ss') return [second].map(formatNumber).toString()
    72.  
    73.   //默认 时分秒 年月日
    74.   return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    75. }
    76. function formatNumber(n) {
    77.   n = n.toString()
    78.   return n[1] ? n : '0' + n
    79. }
    80.  
    81. function getWeek(n) {
    82.   switch(n) {
    83.       case 1:
    84.       return '星期一'
    85.       case 2:
    86.       return '星期二'
    87.       case 3:
    88.       return '星期三'
    89.       case 4:
    90.       return '星期四'
    91.       case 5:
    92.       return '星期五'
    93.       case 6:
    94.       return '星期六'
    95.       case 7:
    96.       return '星期日'
    97.   }
    98. }
    99. module.exports = {
    100.   getStateName: getStateName,
    101.   getNum:getNum,
    102.   formatDate:formatDate
    103. };

    index/index.wxml

    1. <!--index.wxml-->
    2. <view>
    3.   <swiper indicator-dots="true"
    4.         autoplay="true">
    5.         <block wx:for="{{imgSrcs}}" wx:key="*text">
    6.           <swiper-item>
    7.             <image src="{{item.img}}"/>
    8.           </swiper-item>
    9.         </block>
    10.       </swiper>
    11. </view>
    12.  
    13. <wxs src="/utils/comm.wxs" module="tools" />
    14. <view class="mobi-title">
    15.     <text class="mobi-icon"></text>
    16.     <text>会议信息</text>
    17. </view>
    18. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    19.     <view class="list" data-id="{{item.id}}">
    20.         <view class="list-img">
    21.             <image class="video-img" mode="scaleToFill" src="{{item.image !=null ? item.image:'/static/persons/1.jpg'}}"></image>
    22.         </view>
    23.         <view class="list-detail">
    24.             <view class="list-title"><text>{{item.title}}</text></view>
    25.             <view class="list-tag">
    26.                 <view class="state">{{tools.getStateName(item.state)}}</view>
    27.                 <view class="join"><text class="list-num">{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}</text>人参与</view>
    28.             </view>
    29.             <view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view>
    30.         </view>
    31.     </view>
    32. </block>
    33. <view class="section bottom-line">
    34. 		<text>到底啦</text>
    35. </view>

     效果展示

  • 相关阅读:
    根据文章段落内容自动插入图片php版
    【ESP 保姆级教程】疯狂Node.js服务器篇 ——案例：ESP8266 + 环境监测 +NodeJs本地服务+文件存储数据 + 钉钉/微信/飞书报警
    Android基础二：常见的几种组件
    在外包公司干了一年半软件测试的一些反思与总结
    [ZOOKEEPER]zookeeper基础知识笔记
    C语言-写一个简单的Web服务器(二)
    Docker部署ELK
    DFS之剪枝与优化
    BaGet搭建Nuget私仓（window10&docker）
    为什么Facebook运营需使用IP代理？有哪些美国IP代理好用？
  • 原文地址：https://blog.csdn.net/lijie1025/article/details/133958604