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

后台准备

springboot+mybatis

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.ssm</groupId><artifactId>ssm-oa</artifactId><version>0.0.1-SNAPSHOT</version><description>OAPRO</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

spring:datasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/oapro?useUnicode=true&characterEncoding=UTF-8&useSSL=falseusername: rootpassword: sasa

mybatis-generator

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

整合mybatis

application.yml

mybatis:mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置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中

/*** 封装微信的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(){let that=this;util.request(api.IndexUrl).then(res=>{this.setData({lists:res.data.infoList})}).catch(res=>{console.log('服器没有开启，使用模拟数据!')})}

WXS

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

入门示例

  • 新建一个wxs文件

var toDecimal2 = function (x) {var f = parseFloat(x);if (isNaN(f)) {return '0.00'}var f = Math.round(x * 100) / 100;var s = f.toString();var rs = s.indexOf('.');if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + 2) {s += '0';}return s;}//module.exports = toDecimal2
module.exports = {toDecimal2:toDecimal2
}

在wxml中使用

<!--pages/c/c.wxml-->
<wxs src="../../wxs/PageUtils.wxs" module="PageUtils"></wxs>
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs>
<view><text>pages/c/c.wxml,</text><text>{{m1.message}}</text><view><text>{{PageUtils.toDecimal2(123.453)}}</text></view><view><button type="primary" bindtap="jump">跳转到D页面</button></view>
</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 语法参考 | 微信开放文档

页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs><view> {{m1.message}} </view>

页面输出： hello world

数据处理

// page.js
Page({data: {array: [1, 2, 3, 4, 5, 1, 2, 3, 4]}
})
<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {var max = undefined;for (var i = 0; i < array.length; ++i) {max = max === undefined ?array[i] :(max >= array[i] ? max : array[i]);}return max;
}module.exports.getMax = getMax;
</wxs><!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：5

综合案例

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

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

  • 会议状态切换

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

参会人数统计

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

参会日期转换

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 '星期日'}
}

3.wxs页面渲染处理

模块输出

module.exports={changeStatus:changeStatus,getCount:getCount,formatDate:formatDate
}

页面渲染

<wxs src="/utils/common.wxs" module="common"></wxs>
...
<block wx:for="{{lists}}" wx:key="id"><view class="list"><view class="list-img"><image src="{{item.image?item.image:'/static/persons/1.jpg'}}"></image></view><view class="list-detail"><view class="list-title"><text>{{item.title}}</text></view><view class="list-tag"><view>{{common.changeStatus(item.state)}}</view><view><text>{{common.getCount(item.canyuze+','+item.liexize+','+item.zhuchiren)}}</text>人报名</view></view><view class="list-info"><text>{{item.location}} | {{common.formatDate(item.starttime)}}</text></view></view></view>
</block>

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

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

相关文章

K8s进阶之路-控制器无状态服务：

K8s进阶之路-控制器无状态服务：

RC/RS/Deployment 控制器 deployment无状态&#xff08;最常用&#xff09;&#xff1a; nginx和Apache statefulset有状态&#xff1a; mysql和redis damonset初始化 job一次性任务 cronjob任务计划 1无状态&#xff1a;不会对本地环境产生依赖如&#xff1a;nginx和Apache …
阅读更多...
Kubernetes基础(二十二)-k8s持久化存储详解

Kubernetes基础(二十二)-k8s持久化存储详解

1 volume 1.1 介绍 在容器中的磁盘文件是短暂的&#xff0c;当容器崩溃时&#xff0c;Kubelet会重新启动容器&#xff0c;但容器运行时产生的数据文件都将会丢失&#xff0c;之后容器会以最干净的状态启动。另外&#xff0c;当一个Pod运行多个容器时&#xff0c;各个容器可能…
阅读更多...
vs2022中 _CRT_SECURE_NO_WARNINGS错误提示,解决办法（绝对管用）

vs2022中 _CRT_SECURE_NO_WARNINGS错误提示,解决办法（绝对管用）

下面给出这个问题的解决方案&#xff1a; 方案一 在预编译头文件stdafx.h里&#xff08;注意&#xff1a;一定要在没有include任何头文件之前&#xff09;定义下面的宏&#xff1a; #define _CRT_SECURE_NO_DEPRECATE或声明 #pragma warning(disable:4996) 更改预处理定义&…
阅读更多...
新版Java面试专题视频教程——框架篇

新版Java面试专题视频教程——框架篇

新版Java面试专题视频教程——框架篇 框架篇 01-框架篇介绍02-Spring-单例bean是线程安全的吗03-Spring-AOP相关面试题04-Spring-事务失效的场景05-Spring-bean的生命周期5.1 BeanDefinition 06-Spring-bean的循环依赖(循环引用)6.1 一般对象的循环依…
阅读更多...
【C++】类与对象的项目实践 — 日期管理工具

【C++】类与对象的项目实践 — 日期管理工具

类与对象的实践 项目背景项目需求项目实现1 日期结构设计2 构造函数2.1 全缺省构造函数2.2 拷贝构造函数2.3 析构函数 3 赋值运算符重载3.1 重载3.2 重载重载前置 和 后置 4 关系操作符重载5 工具方法5.1 计算日期差5.2 日期转换为字符串5.3 通过字符串构建对象 完整源代码Dat…
阅读更多...
C++递归复习

C++递归复习

骨牌铺路 #include<bits/stdc.h> using namespace std; int n,m,sum0; int f(int); int main() {cin>>n;cout<<f(n);return 0; } int f(int n){if(n1) return 1;if(n2) return 2;if(n3) return 4;return f(n-1)f(n-2)f(n-3); } 统计每个月兔子的总数 #includ…
阅读更多...
云数贸云生活中心：用云生活理念引领社会和谐发展

云数贸云生活中心：用云生活理念引领社会和谐发展

在数字经济的浪潮下&#xff0c;云数贸云生活中心不仅在科技进步与文明程度上作出了积极贡献&#xff0c;更在推动社会和谐、承担企业社会责任方面展现出了模范作用。通过与“草根互助爱心社区”的紧密合作&#xff0c;云数贸云生活中心正致力于构建一个更加和谐、互助的社会环…
阅读更多...
socket通信 smallchat简介

socket通信 smallchat简介

文章目录 前言一、socket的基本操作(1) socket()函数(2) bind()函数(3) listen()、connect()函数(4) accept()函数(5) read()、write()等函数(6) close()函数 二、smallchat代码流程smallchat-server.csmallchat-client.cchatlib.c 参考资料 前言 本文介绍了socket通信的相关A…
阅读更多...
六、图像的几何变换

六、图像的几何变换

文章目录 前言一、镜像变换二、缩放变换 前言 在计算机视觉中&#xff0c;图像几何变换是指对图像进行平移、旋转、缩放、仿射变换和镜像变换等操作&#xff0c;以改变图像的位置、尺寸、形状或视角&#xff0c;而不改变图像的内容。这些变换在图像处理、模式识别、机器人视觉…
阅读更多...
更改WordPress作者存档链接author和用户名插件Change Author Link Structure

更改WordPress作者存档链接author和用户名插件Change Author Link Structure

WordPress作者存档链接默认情况为/author/Administrator&#xff08;用户名&#xff09;&#xff0c;为了防止用户名泄露&#xff0c;我们可以将其改为/author/1&#xff08;用户ID&#xff09;&#xff0c;具体操作可参考『如何将WordPress作者存档链接中的用户名改为昵称或ID…
阅读更多...
猪圈Pigsty-PG私有RDS集群搭建教程

猪圈Pigsty-PG私有RDS集群搭建教程

博客 https://songxwn.com/Pigsty-PG-RDS/ 简介 Pigsty 是一个更好的本地自建且开源 RDS for PostgreSQL 替代&#xff0c;具有以下特点&#xff1a; 开箱即用的 PostgreSQL 发行版&#xff0c;深度整合地理、时序、分布式、图、向量、分词、AI等 150 余个扩展插件&#xff…
阅读更多...
文件IO的lseek以及目录IO

文件IO的lseek以及目录IO

文件IO之 lseek: 1. lseek off_t lseek(int fd, off_t offset, int whence); 功能: 重新设定文件描述符的偏移量 参数: fd:文件描述符 offset:偏移量 whence: SEEK_SET 文件开头 …
阅读更多...
基于scrapy框架的单机爬虫与分布式爬虫

基于scrapy框架的单机爬虫与分布式爬虫

我们知道&#xff0c;对于scrapy框架来说&#xff0c;不仅可以单机构建复杂的爬虫项目&#xff0c;还可以通过简单的修改&#xff0c;将单机版爬虫改为分布式的&#xff0c;大大提高爬取效率。下面我就以一个简单的爬虫案例&#xff0c;介绍一下如何构建一个单机版的爬虫&#…
阅读更多...
更快找到远程/自由工作的网站

更快找到远程/自由工作的网站

不要使用Fiver或Upwork。 它们已经饱和了。 下面是10个更快找到远程/自由工作的网站&#xff1a; 1. Toptal 这个网站专门为熟练的自由职业者提供远程工作机会&#xff0c;如Shopify和Priceline等一流公司。 他们只接受软件开发、设计和金融等领域的顶级3%自由职业者。 htt…
阅读更多...
2024-02-19(Flume)

2024-02-19(Flume)

1.flume中拦截器的作用&#xff1a;个人认为就是修改或者删除事件中的信息&#xff08;处理一下事件&#xff09;。 2.一些拦截器 Host Interceptor&#xff0c;Timestamp Interceptor&#xff0c;Static Interceptor&#xff0c;UUID Interceptor&#xff0c;Search and Rep…
阅读更多...
C++集群聊天服务器 nginx+redis安装 笔记 （中）

C++集群聊天服务器 nginx+redis安装 笔记 （中）

一、nginx安装 nginx: download 下载nginx安装包 hehedalinux:~/package$ tar -zvxf nginx-1.24.0.tar.gz nginx-1.24.0/ nginx-1.24.0/auto/ nginx-1.24.0/conf/ nginx-1.24.0/contrib/ nginx-1.24.0/src/ nginx-1.24.0/configure nginx-1.24.0/LICENSE nginx-1.24.0/README…
阅读更多...
PLC远程监控在制药行业的应用

PLC远程监控在制药行业的应用

PLC远程监控在制药行业的应用 制药行业是一个需要高度控制和精确性的行业&#xff0c;而PLC远程监控技术正是这种需求的完美解决方案。PLC远程监控技术是指将传感器、执行器和其他设备连接到PLC系统中&#xff0c;并使用网络和远程访问技术实现对设备的远程监控和控制。下面我…
阅读更多...
Python系列（14）—— 字符串运算符

Python系列（14）—— 字符串运算符

Python中的字符串运算符 1. 拼接运算符 Python中的加号被用作字符串的拼接运算符&#xff0c;它可以将两个或多个字符串连接起来。 str1 "Hello" str2 "World" result str1 " " str2 print(result) # 输出&#xff1a;Hello World2. 重…
阅读更多...
2月19日，每日信息差

2月19日，每日信息差

第一、小米徕卡光学研究所正式成立。据介绍&#xff0c;这是以光学底层技术为核心&#xff0c;影像数字技术、AI等多学科交叉融合的研发机构。将于本月22日发布的全新影像旗舰小米14 Ultra就是这一标准实践演进的第一个里程碑。 第二、东方甄选试水“小时达”&#xff0c;目前…
阅读更多...
2024年华为OD机试真题-数组去重和排序-Java-OD统一考试（C卷）

2024年华为OD机试真题-数组去重和排序-Java-OD统一考试（C卷）

题目描述： 给定一个乱序的数组，删除所有的重复元素，使得每个元素只出现一次，并且按照出现的次 数从高到低进行排序，相同出现次数按照第一次出现顺序进行先后排序。 输入描述： 一个数组 输出描述： 去重排序后的数组 补充说明： 数组大小不超过100 数组元素值大小不超过10…
阅读更多...
最新文章

Copyright @ 2022~2023