微信小程序OA会议系统数据交互

前言

经过我们所写的上一文章:微信小程序会议OA系统其他页面-CSDN博客

在我们的是基础面板上面,可以看到出来我们的数据是死数据,今天我们就完善我们的是数据

后台

在我们去完成项目之前我们要把我们的项目后台准备好资源我放在我资源中,大家可以用于参考,也可以去使用

pom.xml

这个是我们用来导入的

<?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.6.2</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.zking</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>
appliation.yml

这个应用于生成mapper接口,model实体类以及mapper映射文件

spring:datasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=falseusername: rootpassword: 123456
@MapperScan("com.zking.minoa.mapper") //指mapper接口所在包

前端

在我们使用我们的微信小程序开发之前我们可以不我们的之前所配置的Mock等等关闭

index.js
  loadMeetingInfo(){let that=this;wx.request({url: api.IndexUrl,dataType: 'json',success(res) {console.log(res)that.setData({lists:res.data.data.infoList})}})},

在我们添加后,我们要在生命周期函数加入以下代码

  onLoad(options) {// this.loadSwiperImgs();// this.loadMeetingInfos();this.loadMeetingInfo();//首页会议信息},
index.wxml
 
 <image class="video-img" mode="scaleToFill" src="{{item.image != null ? item.image : '/static/persons/会议桌.jpg'}}"></image>

效果:

request
util.js
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const 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请求*/
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
}
头部引用util
const util = require("../../utils/util.js")
方法 
loadMeetingInfo(){util.request(api.IndexUrl).then(res=>{this.setData({lists:res.data.infoList})});// let that=this;// wx.request({//     url: api.IndexUrl,//     dataType: 'json',//     success(res) {//       console.log(res)//       that.setData({//           lists:res.data.data.infoList//       })//     }//   })},

WXS如何使用

会议状态

在微信开发者工具里面,右键可以直接创建 .wxs 文件,在其中直接编写 WXS 脚本。如下:

comm.wxs:
// /pages/comm.wxs
function getStateName(state){if(state == 1){return "待审核"}else if(state == 2){return "审核通过"}else if(state == 3){return "审核不通过"}else if(state == 4){return "待开会议"}return "其他"
}
module.exports = {getStateName: getStateName
};
引入wxs

在我们的index.wxml中引入wxs,代码如下:

<wxs src="/utils/comm.wxs" module="tools" />

将index.wxml中class为state的view代码块改为以下代码

<view class="state">{{tools.getStateName(item.state)}}</view>

统计参会人

在我们的comm.wxs中加入以下代码

<view class="join"><text class="list-num">{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}</text>人报名</view>
function getNum(canyuze,liexize,zhuchiren){var person = canyuze + "," + liexize + "," + zhuchiren;return person.split(",").length;
}
module.exports = {getStateName: getStateName,getNum: getNum
};

然后在index.wxml中class为list-num的view代码块改为以下代码

<view class="join"><text class="list-num">{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}</text>人报名</view>

处理时间

在comm.wxs中加入时间处理代
function formatDate(ts, option) {var date = getDate(ts)var year = date.getFullYear()var month = date.getMonth() + 1var 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 = {getStateName: getStateName,getNum: getNum,formatDate: formatDate
};

在index.wxml中class为list-info的view代码块代码改为以下代码

<view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/169076.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么进行设备维护与保养?智能巡检系统有什么用?

设备维护与保养需要遵循三个原则&#xff1a;故障设备全面分析的原则、故障设备深入检查的原则以及故障设备分析排查的原则。 一、故障设备全面分析的原则   检修人员在对设备维护与保养时&#xff0c;如果看到设备在运行中出现了异常的现象&#xff0c;要立刻停止设备的工作…

【C语言】指针错题(类型分析)

题目&#xff1a; #include <stdio.h> int main () {int*p NULL;int arr[10] {0}; return 0; } 选项&#xff1a; A、p arr ; B、 int (* ptr )[10]& arr ; C、 p & arr [ 0 ]; D、 p & arr ; 解析&#xff1a; 1、 p 是一个指针变量&#xff0c;指…

docker和k8s之间的关系

一句话总结&#xff1a;Docker只是容器的一种&#xff0c;它面向的是单体&#xff0c;K8S可以管理多种容器&#xff0c;它面向的是集群&#xff0c;Docker可以作为一种容器方案被K8S管理。 https://baijiahao.baidu.com/s?id1763716289717819767&wfrspider&forpc 背…

无障碍阅读他人开源项目结构:看完本文,你将信心满满

先看看阿里是怎么约定的 我印象中&#xff0c;以前在看《阿里巴巴Java开发手册》时&#xff0c;好像有关于工程结构和应用分层相关的内容&#xff0c;于是我回翻了一下&#xff0c;果然有&#xff1a; 它这里面讲的内容大概就是&#xff1a;关于一个正常的企业项目里一种通用的…

3D模型如何添加表面贴图?

1、模型表面贴图介绍 模型表面贴图&#xff08;Texture Mapping&#xff09;是一种将纹理映射到三维模型表面的技术&#xff0c;用于增加模型的细节和真实感。它通过在模型的每个表面点上应用纹理坐标&#xff0c;并将纹理像素与模型的对应点进行匹配&#xff0c;使得模型表面…

学习MAVEN

MAVEN的详细介绍和作用、意义 好的&#xff0c;小朋友们&#xff0c;我们今天来聊聊一个非常神奇的工具箱&#xff0c;它的名字叫做Maven! &#x1f31f; 1. **神奇的工具箱Maven**: Maven就像是一个神奇的工具箱&#x1f9f0;&#xff0c;它可以帮助大人们把他们的电脑工…

大众出版深陷囹圄,教育学术出版坚挺丨十大国际出版集团2022/2023财年出版业务分析

近期&#xff0c;各大国际出版传媒集团陆续披露了2022/2023财年报告&#xff0c;由此我们可以洞察学术出版、教育出版及大众出版领域的发展趋势和业务布局变化&#xff0c;为国内同行提供借鉴&#xff0c;助推我国出版企业更多更快进入第一梯队。一些未公开数据的家族企业&…

Openlayers加载天地图和geoserver服务

Openlayers加载天地图和geoserver服务 前提 下载openlayers js和css文件 已申请天地图key 已通过geoserver发布服务 开始 <!DOCTYPE> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" conte…

CSS 基础知识-02

CSS 基础知识-01 1. flex布局 1. flex布局

Qt扫盲-QImage 理论总结

QImage 理论总结 一、概述二、读写图像文件三、图像信息四、像素操作1. 32位2. 8位 五、图像格式六、图像转换 一、概述 QImage类提供了一个独立于硬件的图像表示&#xff0c;允许直接访问像素数据&#xff0c;并且可以用作绘画设备。Qt提供了四个类来处理图像数据&#xff1a…

蓝桥杯(路径 动态规划 C++)

思路&#xff1a; 1、利用动态规划的思想。 2、用f[i]来记录从第一个点到第i个点的最短距离。 3、f[i]赋值分两种情况&#xff0c;第一种&#xff1a;f[i]为0的时候&#xff0c;也就是第一种刚到i点的情况&#xff0c;记录其距离为最小公倍数&#xff1b;第二种&#xff1a;…

2023年【危险化学品生产单位主要负责人】考试报名及危险化学品生产单位主要负责人模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位主要负责人考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品生产单位主要负责人模拟考试题题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品生产单位主要负…

Plex Media Server for Mac: 打造您的专属媒体库

在数字媒体时代&#xff0c;我们越来越依赖各种媒体应用来丰富我们的生活。其中&#xff0c;Plex Media Server for Mac以其高效、稳定和多功能性&#xff0c;逐渐成为了Mac用户们的首选。今天&#xff0c;我们就来深入探讨这款个人媒体软件的优势和应用场景。 Plex Media Serv…

Kafka与MySQL的组合使用

根据上面给出的student表&#xff0c;编写Python程序完成如下操作&#xff1a; &#xff08;1&#xff09;读取student表的数据内容&#xff0c;将其转为JSON格式&#xff0c;发送给Kafka&#xff1b; 创建Student表的SQL语句如下&#xff1a; create table student( sno ch…

类似东郊到家预约家政保洁小程序搭建

随着生活水平的提高&#xff0c;人们对健康养生的需求越来越重视&#xff0c;按摩作为一种传统的养生方式&#xff0c;备受关注。为了方便用户快速、方便地预约按摩服务&#xff0c;本文将介绍一款按摩预约小程序的开发。 首先&#xff0c;我们通过市场调研和分析发现&#xf…

网络协议--IP:网际协议

3.1 引言 IP是TCP/IP协议族中最为核心的协议。所有的TCP、UDP、ICMP及IGMP数据都以IP数据报格式传输&#xff08;见图1-4&#xff09;。许多刚开始接触TCP/IP的人对IP提供不可靠、无连接的数据报传送服务感到很奇怪。 不可靠&#xff08;unreliable&#xff09;的意思是它不能…

2023年中国监控光端机优点、市场规模及发展前景分析[图]

监控光端机是一种用于光纤通信网络的设备&#xff0c;用于连接光纤到用户设备&#xff08;如计算机、路由器等&#xff09;。监控光端机行业涉及制造、销售和维护这些设备&#xff0c;以确保高速、稳定的光纤通信连接&#xff0c;适用于家庭、企业和数据中心等不同应用场景。 …

Python创建条形图加点重叠

目录 代码效果图 要使用Python的Seaborn库创建一个条形图加点重叠的统计图&#xff0c;可以使用 seaborn.barplot和 seaborn.stripplot函数。以下是一个论文级别的简单示例代码&#xff0c;演示如何创建这种效果的图 代码 import seaborn as sns import matplotlib.pyplot a…

MSQL系列(七) Mysql实战-SQL语句Join,exists,in的区别

Mysql实战-SQL语句Join&#xff0c;exists&#xff0c;in的区别 前面我们讲解了索引的存储结构&#xff0c;BTree的索引结构&#xff0c;以及索引最左侧匹配原则及讲解一下常用的SQL语句的优化建议&#xff0c;今天我们来详细讲解一下 我们经常使用的 join&#xff0c; exist&…

一种融合偶然和认知不确定性的贝叶斯深度学习RUL框架

_原文&#xff1a; _《《A Bayesian Deep Learning RUL Framework Integrating Epistemic and Aleatoric Uncertainties》 _作者__&#xff1a; _Gaoyang Lia&#xff0c;Li Yangb&#xff0c;Chi-Guhn Leec&#xff0c;Xiaohua Wangd&#xff0c;Mingzhe Ronge _作者单位&am…