小程序之后台数据动态交互及WXS的使用 (5)

                                                ⭐⭐ 小程序专栏:小程序开发专栏

                                                ⭐⭐ 个人主页:个人主页


目录

一.前言

二.后台数据交互

  2.1 准备工作

 2.1 前台首页数据连接:

三.WXS的使用

今天就分享到这啦!!!


一.前言

        本文章续前面的文章的前端界面进行后台数据的交互,因为使用的是前后端分离的模式进行的

二.后台数据交互

        2.1 准备工作

        首先导入已经准备好的后台数据代码:

接着要修改Maven:

 最后启动项目:选择MinoaApplication 启动项目,出现8080端口号即可

 测试:localhost:8080/wx/home/index

 2.1 前台首页数据连接:

  记住要关闭mockjs

将路径改成后台的查询方法的路径:                                                                                      

接着在utiles/util.js里面封装request请求,并导出来:

/*** 封装微信的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
}

最后在index.js里面写一个加载数据的方法,并在onload方法里面调用:

    需要引入utils:

const utils = require("../../utils/util.js");
//   加载会议信息
loadMeetInfos(){
utils.request(api.IndexUrl).then(res=>{console.info(res)this.setData({lists:res.data.infoList})
});},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}//调用this.loadSwiperImgs();this.loadMeetInfos();},

 可以看到仍然还存在很多问题,比如会议的状态不应该是数字,还有参加的人数,会议的时间等等,一些问题,现在就用WXS来解决其问题

三.WXS的使用

        官网:小程序框架 / 视图层 / WXS (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/        WXS(WeChat eXtensible Storage)是微信小程序提供的一种本地数据存储解决方案。它类似于浏览器的Web Storage API,可以在小程序端存储和读取数据,用于保存小程序的临时数据或用户个人数据。通过合理使用WXS,可以提升小程序的性能和用户体验。

首先,在工具类utils下面建立一个comm.wxs文件

会议状态的判断 ,并且导出:

function getStateName(state){// 条件判断会议状态if(state ==1 ){return '待审核'}else if(state == 2){return '审核通过'}else if(state == 3){return '审核驳回'}else if(state == 4){return '待开会议'}else{return '其它'}
}
//   导出
module.exports = {getStateName:getStateName,
}

        首先在index.wxml文件中引入wxs:

<!-- 引入 -->

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

         最后在前台调用该方法即可:

     <!-- 调用判断数字的方法 --><view class="state">{{tools.getStateName(item.state)}}</view>

 统计参会人数 并导出:

// 统计参会人数  字段(canyuze,liexize,zhuchiren)相加
function getNum(canyuze,liexize,zhuchiren){// 用逗号拼接var person = canyuze + "," + liexize + "," + zhuchiren;// 进行分割并计算其长度,算出总人数return person.split(",").length;}
//   导出
module.exports = {getStateName:getStateName,getNum:getNum
}

在前台引用:

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

时间问题 并导出:

// 时间的判断
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
}

前端引用:

  <!-- 调用时间的判断方法 --><view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view>

效果:

今天就分享到这啦!!!

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

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

相关文章

Python数据结构——队列

当涉及到数据结构时&#xff0c;队列&#xff08;Queue&#xff09;是一个常用的工具&#xff0c;它按照“先进先出”&#xff08;FIFO&#xff09;的原则管理元素&#xff0c;允许在队列的一端添加元素&#xff0c;而在另一端取出元素。本文将详细介绍Python中队列数据结构的使…

Kotlin + 协程 + Room 结合使用

文章目录 前言集成Room结合协程的使用总结 一、前言, 现在kotlin 是趋势&#xff0c;那必然就要用到协程&#xff0c;还有就是随着jetpack 的发力&#xff0c;带来了很多好用的库&#xff0c;比如今天提到Room&#xff0c;是一个类似greenDao的数据库。它不但支持kotlin协程…

怎么在爬虫中使用ip代理服务器,爬虫代理IP的好处有哪些?

随着互联网的快速发展&#xff0c;网络爬虫已经成为数据采集、分析和整理的重要工具。然而&#xff0c;随着网络技术的不断发展&#xff0c;许多网站都会采取反爬虫措施&#xff0c;以避免数据被恶意获取。在这种情况下&#xff0c;代理IP服务器就成为了爬虫们的必本备文工将具…

31二叉树-递归遍历二叉树

目录 LeetCode之路——145. 二叉树的后序遍历 分析 LeetCode之路——94. 二叉树的中序遍历 分析 LeetCode之路——145. 二叉树的后序遍历 给你一棵二叉树的根节点 root &#xff0c;返回其节点值的 后序遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出…

二阶系统时域响应

二阶系统微分方程 二阶系统传递函数 二阶系统单位阶跃响应 过阻尼系统 临界阻尼系统 欠阻尼系统 无阻尼系统 二阶系统阶跃响应仿真 在Matlab中进行仿真&#xff0c;设置不同阻尼比2、1、0.5和0&#xff0c;可以得到结论&#xff1a; 阻尼比越小&#xff0c;系统响应速度越快&…

JavaWeb——IDEA相关配置(Maven配置以及创建自己的第一个Maven项目)

写在前面&#xff1a; 笔者根据狂神说的javaweb视频&#xff0c;一步一步跟着配置IDEA中的Maven&#xff0c;在后面&#xff0c;笔者将讲述自己如何从0配置Maven以及创建自己的第一个Maven项目&#xff0c;笔者将自己的心路历程&#xff0c;包括配置的过程&#xff0c;都以文字…

数字滚动动效(纯HTML5版和Vue版本)

数字从0到指定数字的滚动动效&#xff0c;直接上代码&#xff1b; H5 <!DOCTYPE html> <html> <head><style>/* 设置数字显示的样式 */.counter {font-weight:700;font-size: 36px;color: #333;}</style> </head> <body><div cl…

网络参考资料搬运(3)

(1) Python: 使用Python打开新的终端(terminal)并执行语句 通过Python 打开各系统&#xff08;MAC, LINUX, WINDOWS&#xff09;下的终端 &#xff08;Terminal&#xff09; python执行shell脚本的几种方法 自己写Linux命令 用Python写个Linux系统命令 Python 使用sftp传输文件…

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState,Kotlin

Android切换主题生命周期流程与onSaveInstanceState和onRestoreInstanceState&#xff0c;Kotlin import android.os.Bundle import android.util.Log import androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() {private val TAG "fly&…

NarrowBERT: Accelerating Masked Language Model Pretraining and Inference

本文是LLM系列文章&#xff0c;针对《NarrowBERT: Accelerating Masked Language Model Pretraining and Inference》的翻译。 NarrowBERT&#xff1a;加速掩蔽语言模型的预训练和推理 摘要1 引言2 NarrowBERT3 实验4 讨论与结论局限性 摘要 大规模语言模型预训练是自然语言处…

栈和队列的C++模拟实现

一、栈stack 1.介绍&#xff08;库里面的文档介绍&#xff09; 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对…

PositiveSSL的泛域名SSL证书

PositiveSSL是Sectigo旗下的一个子品牌&#xff0c;致力于为全球用户提供优质、高效的SSL证书服务。PositiveSSL以Sectigo强大的品牌影响力和全球网络为基础&#xff0c;秉承“安全、可靠、高效”的服务理念&#xff0c;为各类网站提供全面的SSL证书解决方案。今天就随SSL盾小编…

统信uos 1030 企业版 安装.net core环境

安装.net core步骤 添加密钥和包存储库 安装 .NET 之前&#xff0c;请运行以下命令&#xff0c;将 Microsoft 包签名密钥添加到受信任密钥列表&#xff0c;并添加包存储库wget https://packages.microsoft.com/config/debian/10/packages-microsoft-prod.deb -O packages-mic…

【LeetCode】71. 简化路径

1 问题 给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为更加简洁的规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&#xf…

HarmonyOS版本号,API level(updateing)

版本列表&#xff1a; OS名称API Ver工具更新特性更新Harmony4.0Beta102023年9月Harmony3.192023年5月OpenHarmony SDK 3.2.12.2 Toolchains 3.2.3.6 DevEco Studio 3.1.0.500Harmony3.1Beta292023年4月OpenHarmony SDK 3.2.5.8 Toolchains 3.2.3.2 DevEco Studio 3.1.0.400Ar…

收藏,安装报错信息汇总,MacOS上安装Adobe等软件/插件报错问题解决合集

打开允许“允许任何来源” 如何打开允许任何来源&#xff1f;在 Finder 菜单栏选择 【前往】 – 【实用工具 】&#xff0c;找到【终端】程序&#xff0c;双击打开&#xff0c;在终端窗口中输入&#xff1a;sudo spctl --master-disable 输入代码后&#xff0c;按【return 回车…

JVM第十七讲:调试排错 - Java 问题排查之Linux命令

调试排错 - Java 问题排查之Linux命令 本文是JVM第十七讲&#xff0c; Java 问题调试排错。Java 在线问题排查主要分两篇&#xff1a;本文是第一篇&#xff0c;通过linux常用命令排查。 文章目录 调试排错 - Java 问题排查之Linux命令在项目中&#xff0c;日志操作的常用命令1、…

Mac 远程桌面软件

对于使用 Mac 计算机和笔记本电脑的企业来说&#xff0c;适用于 Mac 的远程桌面软件变得越来越重要&#xff0c;随着远程工作变得越来越普遍&#xff0c;IT 管理员和组织需要一种安全的方式来访问和修复问题、处理紧急任务以及监控远程工作站的状态&#xff0c;为了促进远距离协…

【Edabit 算法 ★☆☆☆☆☆】Convert Hours into Seconds

【Edabit 算法 ★☆☆☆☆☆】Convert Hours into Seconds language_fundamentals math numbers Instructions Write a function that converts hours into seconds. Examples howManySeconds(2) // 7200 howManySeconds(10) // 36000 howManySeconds(24) // 86400Notes 60…

Java:ApacheHttpClient连接寿命(timeToLive)未配置问题分析

一、问题描述 若 Apache HttpClient 未设置 timeToLive&#xff0c;通过服务域名访问服务的实例并且服务域名解析出的 IP 发生变化时&#xff0c;在短时间内会有部分请求出现连接异常错误。 二、问题分析 Apache HttpClient 通过服务域名从连接池获取连接&#xff0c;当连接…