南京企业建设网站设计,如何建设dj网站,建设开发有限公司网站,东营区住房和城乡建设局网站目录
一、后台准备
1.1 pom.xml
1.2 配置数据源
1.3 整合mybatis
二、前后端交互
2.1 method1
2.2 method2
2.2.1 封装request
2.2.2 头部引用util
2.2.3 编写方法
2.2.4 展示效果
三、WXS的使用
3.1 会议状态
3.1.2 引入wxs
3.1.3 修改代码
3.1.4 展示效果
3…目录
一、后台准备
1.1 pom.xml
1.2 配置数据源
1.3 整合mybatis
二、前后端交互
2.1 method1
2.2 method2
2.2.1 封装request
2.2.2 头部引用util
2.2.3 编写方法
2.2.4 展示效果
三、WXS的使用
3.1 会议状态
3.1.2 引入wxs
3.1.3 修改代码
3.1.4 展示效果
3.2 参会人统计 3.4 时间处理 一、后台准备 springbootmybatis 1.1 pom.xml
代码如下
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.6.2/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.zking/groupIdartifactIdminoa/artifactIdversion0.0.1-SNAPSHOT/versionnameminoa/namedescriptionDemo project for Spring Boot/descriptionpropertiesjava.version1.8/java.versionfastjson.version1.2.70/fastjson.versionjackson.version2.9.8/jackson.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.2.1/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion5.1.44/versionscoperuntime/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion${fastjson.version}/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationexcludesexcludegroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/exclude/excludes/configuration/pluginplugingroupIdorg.mybatis.generator/groupIdartifactIdmybatis-generator-maven-plugin/artifactIdversion1.3.2/versiondependencies!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion${mysql.version}/version/dependency/dependenciesconfigurationoverwritetrue/overwrite/configuration/plugin/plugins/build/project1.2 配置数据源
appliation.yml
spring:datasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/mybatis_oapro?useUnicodetruecharacterEncodingUTF-8useSSLfalseusername: rootpassword: 123456
然后生成mapper接口model实体类以及mapper映射文件
1.3 整合mybatis
application.yml
mybatis:mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包
在启动类
MapperScan(com.zking.minoa.mapper) //指mapper接口所在包
启动后台 二、前后端交互
2.1 method1
在index.js中加入以下方法 loadMeetingInfo(){let thatthis;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 classvideo-img modescaleToFill src{{item.image ! null ? item.image : /static/persons/会议桌.jpg}}/image
然后使用模拟器展示以下效果如下 2.2 method2
2.2.1 封装request
在/utils/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
}2.2.2 头部引用util
在index.js的头部引用util
const util require(../../utils/util.js)
2.2.3 编写方法
先把method1的代码注释再写method2代码如下
loadMeetingInfo(){util.request(api.IndexUrl).then(res{this.setData({lists:res.data.infoList})});// let thatthis;// wx.request({// url: api.IndexUrl,// dataType: json,// success(res) {// console.log(res)// that.setData({// lists:res.data.data.infoList// })// }// })},
2.2.4 展示效果
模拟器展示效果如下 三、WXS的使用
3.1 会议状态
在微信开发者工具里面右键可以直接创建 .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
};
3.1.2 引入wxs
在index.wxml中引入wxs如下
wxs src/utils/comm.wxs moduletools /
3.1.3 修改代码
将index.wxml中class为state的view代码块改为以下代码如下
view classstate{{tools.getStateName(item.state)}}/view
3.1.4 展示效果
模拟器展示会议状态效果如下 3.2 参会人统计
在comm.wxs中加入以下代码如下
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 classjointext classlist-num{{tools.getNum(item.canyuze,item.liexize,item.zhuchiren)}}/text人报名/view
效果展示如下 3.4 时间处理
在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 classlist-infotext{{item.location}}/text|text{{tools.formatDate(item.starttime)}}/text/view
展示效果如下 最后微信小程序进阶——后台交互就到这里祝大家在敲代码的路上一路通畅!
感谢大家的观看 !
