목차
1. 배경 준비
먼저 새 프로젝트를 빌드한 다음 관련 pom 종속성을 가져옵니다.
다음 도구 클래스 중 일부도 준비되어 있으며 도구 클래스는 SpringMVC 프로젝트 구성에 대한 이전 블로그를 참조하십시오.
pom은 다음 사항에 따라 달라집니다.
<?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.7.7</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.dengxiyan</groupId>
<artifactId>minoa</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>minoa</name>
<description>Demo project for Spring Boot</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>
데이터 소스 구성
application.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: 123456
mybatis:
mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
type-aliases-package: com.dengxiyan.minoa.model #指定自动生成别名所在包
logging:
level:
root: info
com.dengxiyan.minoa.mapper: debugmybatis 생성기
매퍼 인터페이스, 모델 엔터티 클래스, 매퍼 매핑 파일 생성
마이바티스 통합
application.yml
mybatis:
mapper-locations: classpath*:mapper/*.xml #指定mapper文件位置
type-aliases-package: com.zking.ssm.model #指定自动生成别名所在包스타트업 수업에서
package com.dengxiyan.minoa;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@MapperScan("com.dengxiyan.minoa.mapper")
@SpringBootApplication
public class MinoaApplication {
public static void main(String[] args) {
SpringApplication.run(MinoaApplication.class, args);
}
}
데이터 표시
둘째, 프런트엔드 홈페이지의 데이터를 준비합니다.
위의 데이터를 전경에 표시
약속하다
Promise는 콜백 함수 및 이벤트와 같은 기존 솔루션보다 더 논리적이고 강력한 비동기 프로그래밍 솔루션입니다. 커뮤니티에서 처음 제안하고 구현했으며, ES6는 이를 언어 표준으로 작성하고 사용법을 통합했으며 기본적으로 Promise 객체를 제공했습니다.
소위 Promise는 단순히 미래에 종료될 이벤트(일반적으로 비동기 작업)의 결과를 보관하는 컨테이너입니다. 구문적으로 Promise는 비동기 작업의 메시지를 얻을 수 있는 개체입니다. Promise는 통합 API를 제공하며 다양한 비동기 작업을 동일한 방식으로 처리할 수 있습니다.
약속 작업에는 세 가지 상태가 있습니다.
pending: 대기(진행 중) 약속이 생성되자마자 대기 중이 진행 중입니다.
fulfilled: 성공(완료), resolve를 호출하면 상태가 보류에서 이행으로 변경되고 나중에 실행됩니다.
거부: 실패(거부), 거부를 호출하면 상태가 보류에서 거부로 변경되고 향후 .catch가 실행됩니다.
주의점:
약속의 상태가 변경되면 상태가 동결됩니다.
거부 또는 해결을 다시 호출하면 상태를 수정하는 것은 의미가 없습니다.
캡슐화 요청
/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.js
loadMeetingInfos(){
util.request(api.IndexUrl).then(res=>{
this.setData({
lists:res.data.infoList
})
}).catch(res=>{
console.log('服器没有开启，使用模拟数据!')
})
}/utils/page.wxs 추가
function getState(state){
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 if(state == 6){
return '结束会议';
}
return '其他';
}
function getNumber(s){
s+=""
var arr = s.split(",");
return arr.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 '星期日'
}
}
module.exports = {
getState: getState,
getNumber: getNumber,
formatDate:formatDate
};meeting/list/list.wxml 수정
<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{
{tabs}}" bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{
{lists}}" wx:for-item="item" wx:key="item.id">
<view class="list" data-id="{
{item.id}}">
<view class="list-img al-center">
<image class="video-img" mode="scaleToFill" src="{
{item.image}}"></image>
</view>
<view class="list-detail">
<view class="list-title"><text>{
{item.title}}</text></view>
<view class="list-tag">
<view class="state al-center">{
{item.state}}</view>
<view class="join al-center"><text class="list-num">{
{item.num}}</text>人报名</view>
</view>
<view class="list-info"><text>{
{item.address}}</text>|<text>{
{item.time}}</text></view>
</view>
</view>
</block>
렌더링은 다음과 같습니다
