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

news/2024/7/20 1:20:20 标签: 微信小程序, 交互, 小程序

后台准备

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,默认为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: 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结束会议，默认值为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
    return "会议结束";
};

参会人数统计

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

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.niftyadmin.cn/n/5382411.html

相关文章

Linux------环境变量

Linux------环境变量

目录 前言 一、环境变量 二、添加PATH环境变量 三、HOME环境变量 四、查看所有环境变量 1.指令获取 2.代码获取 2.1 getenv 2.2main函数的第三个参数 2.3 全局变量environ 五、环境变量存放地点 六、添加自命名环境变量 七、系统环境变量具有全局属性 八、环境变…
阅读更多...
程序员为什么不喜欢关电脑？我来回答

程序员为什么不喜欢关电脑？我来回答

程序员为什么不喜欢关电脑&#xff1f; 主题&#xff1a; 你是否注意到&#xff0c;程序员们似乎从不关电脑&#xff1f;别以为他们是电脑上瘾&#xff0c;实则是有他们自己的原因&#xff01;让我们一起揭秘背后的原因&#xff0c;看看程序员们真正的“英雄”本色&#xff01…
阅读更多...
前端基础Document

前端基础Document

前端基础Document 在浏览器的JavaScript环境中&#xff0c;document是默认的全局变量之一&#xff0c;提供对当前网页文档&#xff08;HTML文档&#xff09;的访问和操作。 document对象是Document接口的一个实例&#xff0c;表示整个HTML文档。它作为全局变量存在于浏览器的…
阅读更多...
Panalog 日志审计系统RCE漏洞

Panalog 日志审计系统RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
跟无神学AI之一文读尽Sora

跟无神学AI之一文读尽Sora

openAI发布视频生成模型Sora&#xff0c;意味着人类距离AI模拟世界又近了一步&#xff0c;流浪地球2中数字人女儿也是对未来科技发展的一个缩影。 作为最具有代表性的大模型公司&#xff0c;openAI的任何一个产品都具有一定的价值&#xff0c;代表着AI的前沿发展方向。 博主今…
阅读更多...
ai图片放大老照片ai处理ps学习

ai图片放大老照片ai处理ps学习

老照片处理 1.bigjpg&#xff1a;AI人工智能图片放大 体验后评价&#xff1a;快速稳定 2.jpgHD&#xff1a;同bigjpg 另支持老照片上色 付费可用&#xff1a;破损修复&#xff0c;魔法动态照片 3.bigmp4&#xff1a;ai视频无损放大 4.jpgrm&#xff1a;ai擦除 利用2023年最先进…
阅读更多...
《白话C++》第10章 STL和boost，Page85 std::shared_ptr常用功能

《白话C++》第10章 STL和boost，Page85 std::shared_ptr常用功能

std::shared_ptr基本用法包括&#xff1a; &#xff08;1&#xff09;取裸指针 //get()成员取回裸指针 std::shared_ptr <int> pa(new int(5)); int* p pa.get(); /**< 取回裸指针 */ &#xff08;2&#xff09;判断是否为空 肯定可以这样写&#xff1a; std::s…
阅读更多...
js设计模式:工厂模式

js设计模式:工厂模式

作用: 可以通过new关键字,批量的创建对象。 将对象的创建和具体业务逻辑进行分离,代码清晰可维护。 示例: function workFactory(workName,name){switch(workName){case jsCoder:return new jsCoder(name)breakcase javaCoder:return new javaCoder(name)break …
阅读更多...
最新文章

Copyright @ 2022~2023