深圳住建局最新通知,织梦网站怎么做seo优化,温州网站建设前十公司,微信精准推广#x1f3ac; 艳艳耶✌️#xff1a;个人主页 #x1f525; 个人专栏 #xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 #xff0c;越幸运。 1.数据库连接 数据表结构#xff1a; 数据测式#xff1a; 2.后台配置
pom.xml
?xml version 艳艳耶✌️个人主页 个人专栏 《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 越幸运。 1.数据库连接 数据表结构 数据测式 2.后台配置
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.CloudJun/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/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/mybatis_oapro?useUnicodetruecharacterEncodingUTF-8useSSLfalseusername: rootpassword: 123456
mybatis:mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置type-aliases-package: com.zking.minoa.model #指定自动生成别名所在包logging:level:root: infocom.zking.minoa.mapper: debug
3.前端代码
index.wxml !-- view classbox
view1/view
view2/view
view3/view
view4/view
view5/view
view6/view
view7/view
view8/view
view9/view
view10/view
view11/view
view12/view
/view --
!--index.wxml--!--index.wxml--
viewswiper autoplaytrue indicator-dotstrue indicator-color#fff indicator-active-color#00fblock wx:for{{images}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiper
/view
wxs src/utils/comm.wxs moduletools /
view classmobi-titletext classmobi-icon/texttext会议信息/text
/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.seatpic}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{tools.getStateName(item.state)}}/viewview classjointext classlist-num{{tools.getNum
(item.canyuze,item.liexize,item.zhuchiren)}} /text 人报名/view/viewview classlist-infotext{{item.location}}/text | text{{tools.formatDate(item.starttime)}}/text/view/view/view
/block
view classsection bottom-linetext到底啦/text
/view
index.wxss
/* pages/meeting/list/list.wxss */
.list {display: flex;flex-direction: row;width: 100%;padding: 0 20rpx 0 0;border-top: 1px solid #eeeeee;background-color: #fff;margin-bottom: 5rpx;/* border-radius: 20rpx;box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}.list-img {display: flex;margin: 10rpx 10rpx;width: 150rpx;height: 220rpx;justify-content: center;align-items: center;
}.list-img .video-img {width: 120rpx;height: 120rpx;}.list-detail {margin: 10rpx 10rpx;display: flex;flex-direction: column;width: 600rpx;height: 220rpx;
}.list-title text {font-size: 11pt;color: #333;font-weight: bold;
}.list-detail .list-tag {display: flex;height: 70rpx;
}.list-tag .state {font-size: 9pt;color: #81aaf7;width: 120rpx;border: 1px solid #93b9ff;border-radius: 2px;margin: 10rpx 0rpx;display: flex;justify-content: center;align-items: center;
}.list-tag .join {font-size: 11pt;color: #bbb;margin-left: 20rpx;display: flex;justify-content: center;align-items: center;
}.list-tag .list-num {font-size: 11pt;color: #ff6666;
}.list-info {font-size: 9pt;color: #bbb;margin-top: 20rpx;
}
.bottom-line{display: flex;height: 60rpx;justify-content: center;align-items: center;background-color: #f3f3f3;
}
.bottom-line text{font-size: 9pt;color: #666;
}
效果展示 4.WXS的使用
WXSWeChat Mini Program Storage是微信小程序提供的本地存储方案用于在小程序中进行数据的存储和管理。相比远程数据库WXS更适合于小规模、简单的数据存储需求。
4.1.wxs 文件
在微信开发者工具里面右键可以直接创建 .wxs 文件在其中直接编写 WXS 脚本。
// /pages/comm.wxsvar foo hello world from comm.wxs;
var bar function(d) {return d;
}
module.exports {foo: foo,bar: bar
}; exports: 通过该属性可以对外共享本模块的私有变量与函数。
在需要使用的页面进行引用即可
wxs src/tools.wxs moduletools /
view {{tools.msg}} /view
view {{tools.bar(tools.FOO)}} /view
4.2.解决数据显示数字问题
function getStateName(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 开启投票;}else if(state 6 ){return 结束会议;}return 其它;}
module.exports {getStateName:getStateName,};4.3.解决统计人数问题
function getNum(canyuze,liexize,zhuchiren){
var person canyuze , liexize , zhuchiren;
var arr person.split(,);
var res [];
for(var i 0; i arr.length; i){
if(res.indexOf(arr[i] -1)){
res.push(arr[i]);
}
}return res.length;
}
module.exports {getNum:getNum,};
4.4.解决时间进制问题
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
formatDate:formatDate,};
效果展示
