Table of contents
1. Create a new springBoot project
3. Import virtual data into the database
4. Generate the entity class of the table
8. Add annotations to the startup class to scan the mapper layer.
10. Create a new controller layer
3. Front-end and back-end interaction
1. Create a new folder on the front end
1. Create a login page
1. Login interface login.wxml
<!-- <text>You are so beautiful</text>
<text>{
{m}}</text>-->
</view>
<view>
<image src="/asset/1.png" mode="aspectFit"></image>
<view>
<input bind:input="changeValue" data-label="account" type="text" placeholder="请输入用户名" maxlength="11"></input>
</view>
<view>
<input bind:input="changeValue" data-label="password" password="true" placeholder="请密码" maxlength="16"></input>
</view>
<view>
<button bindtap="login">登录</button>
</view>
</view>
2. Login layout wxss
image{
width: 400px;
height: 400px;
border-radius: 50%;
}
.mage{
display:flex; /*Set to flex layout*/
justify-content: center; /*Horizontal centering*/
}
.container{
display :flex; /*Set to flex layout*/
justify-content: center; /*Horizontally centered*/
}
3、login.js
import {request} from "../../request/index";
Page({
data: {
m:"鲁拉鲁拉",
user:{
account:"",
password:""
}/*,
level: ["50,000", "100,000", "150,000"]*/
},
changeValue(e){
console.log(e)
//Get the value of the input box
let value=e.detail.value
//Get To the data-label on the label (account/password)
//account->user.account
let label="user."+e.target.dataset.label
this.setData({
[label]:value
})
},
login (){
console.log(this.data.user)
}
});
1. Create a new springBoot project
2. Import dependency 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>
<groupId>com.zking</groupId>
<artifactId>mini_program</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>mini_program</name>
<description>mini_program</description>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<spring-boot.version>2.4.1</spring-boot.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>2.1.5</version>
</dependency>
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>persistence-api</artifactId>
<version>1.0</version>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>${spring-boot.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.4.1</version>
<configuration>
<mainClass>com.zking.mini_program.MiniProgramApplication</mainClass>
</configuration>
<executions>
<execution>
<id>repackage</id>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
3. Import virtual data into the database
4. Generate the entity class of the table
Entity class User:
package com.zy.mini_program.pojo;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import org.springframework.format.annotation.DateTimeFormat;
import javax.persistence.*;
import java.io.Serializable;
import java.time.LocalDateTime;
@Data
@Table(name = "t_user")
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class User implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String account;
private String password;
@Column(name = "modify_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime modifyTime;
@Column(name = "create_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime createTime;
}
5. Configure yml file
server:
port: 8080
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: 123456
url: jdbc:mysql://localhost:3306/eshop?useSSL=false&serverTimezone=Asia/Shanghai&useEncoding=utf8mb4
6. Import the util package
JsonResponseParse ：
package com.zy.mini_program.util.response;
import lombok.extern.slf4j.Slf4j;
import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
@SuppressWarnings("all")
@RestControllerAdvice
@Slf4j
/**
* 响应增强类,配合{@link JsonResponseResult}实现自定义快速返回
* beforeBodyWrite在{@link org.springframework.web.bind.annotation.ResponseBody}完成return之后并在消息解析器之前执行
*/
public class JsonResponseParse implements ResponseBodyAdvice {
@Override
/**
* 返回值决定他是否需要进入beforeBodyWrite
*/
public boolean supports(MethodParameter methodParameter, Class aClass) {
/*methodParameter是当前执行返回响应的方法,判断在该类上是否存在对应的注解*/
return methodParameter.getMethod().isAnnotationPresent(JsonResponseResult.class);
}
@Override
/**
* 用于修改返回前的值
*/
public Object beforeBodyWrite(Object o, MethodParameter methodParameter, MediaType mediaType, Class aClass, ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse) {
if (o == null) {
return ResponseResult.success();
}
if (o instanceof Integer) {
return ResponseResult.failure(ResponseResultCode.queryCode((Integer) o));
}
if (o instanceof ResponseResultCode) {
return ResponseResult.failure((ResponseResultCode) o);
}
if (o instanceof ResponseResult) {
return o;
}
return ResponseResult.success(o);
}
}
JsonResponseResult :
package com.zy.mini_program.util.response;
import java.lang.annotation.*;
@SuppressWarnings("all")
@Retention(value = RetentionPolicy.RUNTIME)
@Documented
@Target({ElementType.METHOD})
/**
* 此注解用于配合{@link JsonResponseParse}使用
*/
public @interface JsonResponseResult {
}
ResponseResult<T>：
package com.zy.mini_program.util.response;
import lombok.Data;
import java.io.Serializable;
@Data
@SuppressWarnings("all")
public class ResponseResult<T> implements Serializable {
/*响应的状态码*/
private Integer code;
/*响应信息*/
private String message;
/*响应的携带数据*/
private T data;
/*响应的分页数据*/
private Long total;
/**
* 私有构造, 只允许通过static调用构造
*
* @param resultCode 结果枚举
* @param data 响应数据
*/
private ResponseResult(ResponseResultCode resultCode, T data) {
this.code = resultCode.getCode();
this.message = resultCode.getMessage();
this.data = data;
}
/**
* 私有构造, 只允许通过static调用构造
*
* @param resultCode 结果枚举
* @param data 响应数据
* @param total 数据总大小(用于分页请求)
*/
private ResponseResult(ResponseResultCode resultCode, Long total, T data) {
this.code = resultCode.getCode();
this.message = resultCode.getMessage();
this.data = data;
this.total = total;
}
/**
* 成功调用返回的结果(无数据携带)
*/
public static ResponseResult<?> success() {
return success(null);
}
/**
* 成功调用返回的结果(数据携带)
*
* @param data 携带的数据
*/
public static <T> ResponseResult success(T data) {
return new ResponseResult(ResponseResultCode.SUCCESS, data);
}
/**
* 成功调用返回的结果(分页使用)
*
* @param data 携带的数据
* @param total 数据总条数
*/
public static <T> ResponseResult success(T data, Long total) {
return new ResponseResult(ResponseResultCode.SUCCESS, total, data);
}
/**
* 失败调用返回的结果(数据携带)
*
* @param resultCode 状态枚举
* @param data 携带的数据
*/
public static <T> ResponseResult failure(ResponseResultCode resultCode, T data) {
return new ResponseResult(resultCode, data);
}
/**
* 失败调用返回的结果(无数据携带)
*
* @param resultCode 状态枚举
*/
public static ResponseResult failure(ResponseResultCode resultCode) {
return failure(resultCode, null);
}
}
ResponseResultCode ：
package com.zy.mini_program.util.response;
import java.io.Serializable;
@SuppressWarnings("all")
public enum ResponseResultCode implements Serializable {
/* 正常状态 */
SUCCESS(200, "成功"),
FAILURE(300, "失败"),
UNKNOWN(400, "未知错误"),
/**
* 用户code范围: 1000;
*/
USER_ACCOUNT_NOT_FIND(1001, "用户名不存在"),
USER_ACCOUNT_DISABLED(1002, "该用户已被禁用"),
USER_PASSWORD_NOT_MATCH(1003, "该用户密码不一致"),
USER_PERMISSION_ERROR(1004, "该用户不具备访问权限"),
USER_STATE_OFF_LINE(1005, "该用户未登录"),
USER_CREDENTIAL_NOT_BE_EMPTY(1006, "用户的登录信息不能为空值"),
USER_ACCOUNT_NOT_MOBLIE(1007, "该用户登录信息格式不符合"),
USER_LOGIN_ERROR(1008, "登录失败"),
/**
* 其它异常: 4000;
*/
TRIKET_ERROR(4001, "triket失效,请重新登录"),
/**
* 商品异常: 6000;
*/
GOODS_ADD_ERROR(6001, "商品添加失败"),
GOODS_EDIT_ERROR(6002, "商品修改失败"),
GOODS_REMOVE_ERROR(6003, "商品删除失败");
/*响应状态码*/
private final Integer code;
/*响应状态信息*/
private final String message;
/*此构造无法调用,用来定义常量枚举使用*/
ResponseResultCode(Integer code, String message) {
this.code = code;
this.message = message;
}
/**
* 此方法用于配合{@link JsonResponseParse}实现快速返回json类型响应码
* 需要结合{@link JsonResponseResult}注解使用
*
* @param code 响应码(对应枚举中的code,如无法找到则返回`UNKNOWN`)
*/
public static ResponseResultCode queryCode(Integer code) {
for (ResponseResultCode value : values()) {
if (code.equals(value.code)) {
return value;
}
}
return UNKNOWN;
}
public Integer getCode() {
return code;
}
public String getMessage() {
return message;
}
}
package com.zking.mini_program.util.response;
import java.io.Serializable;
@SuppressWarnings("all")
public enum ResponseResultCode implements Serializable {
/* 正常状态 */
SUCCESS(200, "成功"),
FAILURE(300, "失败"),
UNKNOWN(400, "未知错误"),
/**
* 用户code范围: 1000;
*/
USER_ACCOUNT_NOT_FIND(1001, "用户名不存在"),
USER_ACCOUNT_DISABLED(1002, "该用户已被禁用"),
USER_PASSWORD_NOT_MATCH(1003, "该用户密码不一致"),
USER_PERMISSION_ERROR(1004, "该用户不具备访问权限"),
USER_STATE_OFF_LINE(1005, "该用户未登录"),
USER_CREDENTIAL_NOT_BE_EMPTY(1006, "用户的登录信息不能为空值"),
USER_ACCOUNT_NOT_MOBLIE(1007, "该用户登录信息格式不符合"),
USER_LOGIN_ERROR(1008, "登录失败"),
/**
* 其它异常: 4000;
*/
TRIKET_ERROR(4001, "triket失效,请重新登录"),
/**
* 商品异常: 6000;
*/
GOODS_ADD_ERROR(6001, "商品添加失败"),
GOODS_EDIT_ERROR(6002, "商品修改失败"),
GOODS_REMOVE_ERROR(6003, "商品删除失败");
/*响应状态码*/
private final Integer code;
/*响应状态信息*/
private final String message;
/*此构造无法调用,用来定义常量枚举使用*/
ResponseResultCode(Integer code, String message) {
this.code = code;
this.message = message;
}
/**
* 此方法用于配合{@link JsonResponseParse}实现快速返回json类型响应码
* 需要结合{@link JsonResponseResult}注解使用
*
* @param code 响应码(对应枚举中的code,如无法找到则返回`UNKNOWN`)
*/
public static ResponseResultCode queryCode(Integer code) {
for (ResponseResultCode value : values()) {
if (code.equals(value.code)) {
return value;
}
}
return UNKNOWN;
}
public Integer getCode() {
return code;
}
public String getMessage() {
return message;
}
}
ThrowableAdvice ：
package com.zy.mini_program.util.response;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@SuppressWarnings("all")
@Slf4j
@RestControllerAdvice
public class ThrowableAdvice {
/**
@JsonResponseResult
@ExceptionHandler(value = {BusinessException.class})
public ResponseResultCode globalBusinessException(Model m, Exception e) {
log.error(e.toString());
return ((BusinessException) e).getResponseResultCode();
}
@JsonResponseResult
@ExceptionHandler(value = {BindException.class})
public ResponseResultCode globalBindException(Model m, Exception e) {
log.error(e.toString());
BindException error = (BindException) e;
return (ResponseResultCode) error.getFieldError().getArguments()[1];
}
@JsonResponseResult
@ExceptionHandler(value = {Throwable.class})
public ResponseResultCode globalException(Model m, Exception e) {
log.error(e.toString());
return ResponseResultCode.UNKNOWN;
}
**/
}
7. Create a new mapper layer
UserMapper.java:
package com.zy.mini_program.mapper;
import com.zking.mini_program.pojo.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;
@SuppressWarnings("all")
@Repository
public interface UserMapper extends Mapper<User> {
}8. Add annotations to the startup class to scan the mapper layer.
@MapperScan("com.zy.mini_program.mapper")
9. Create a new service layer
Interface IuserService:
package com.zy.mini_program.service;
import com.zking.mini_program.pojo.User;
import com.zking.mini_program.util.response.ResponseResult;
@SuppressWarnings("all")
public interface IUserService {
ResponseResult<?> findUserByAccount(User user);
}
Implement interface userServiceImpl:
package com.zy.mini_program.service.impl;
import com.zking.mini_program.mapper.UserMapper;
import com.zking.mini_program.pojo.User;
import com.zking.mini_program.service.IUserService;
import com.zking.mini_program.util.response.ResponseResult;
import com.zking.mini_program.util.response.ResponseResultCode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.util.StringUtil;
@SuppressWarnings("all")
@Service
public class UserServiceImpl implements IUserService {
@Autowired
private UserMapper userMapper;
@Override
public ResponseResult<?> findUserByAccount(User user) {
if (StringUtil.isEmpty(user.getAccount())) {
return ResponseResult.failure(ResponseResultCode.USER_CREDENTIAL_NOT_BE_EMPTY);
}
//声明一个条件载体
Example example = new Example(User.class);
//放入一个条件
example.createCriteria().andEqualTo("account", user.getAccount());
//使用条件载体进行查询
User u = userMapper.selectOneByExample(example);
if (u == null) {
return ResponseResult.failure(ResponseResultCode.USER_ACCOUNT_NOT_FIND);
}
if (!user.getPassword().equals(u.getPassword())) {
return ResponseResult.failure(ResponseResultCode.USER_PASSWORD_NOT_MATCH);
}
return ResponseResult.success(u);
}
}
10. Create a new controller layer
package com.zy.mini_program.controller;
import com.zy.mini_program.pojo.User;
import com.zy.mini_program.service.IUserService;
import com.zy.mini_program.util.response.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Async;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@SuppressWarnings("all")
@RequestMapping("/user")
@RestController
public class UserController {
@Autowired
private IUserService userService;
@Async
@RequestMapping("/login")
public ResponseResult<?> login(/*@RequestBody*/ User user) {
return userService.findUserByAccount(user);
}
}
3. Front-end and back-end interaction
1. Create a new folder on the front end
Contains JavaScript file: index.js
export let request=(url,data)=>{ let baseURL="http://localhost:8080" url=baseURL+url // 异步代码 return new Promise((resolve, reject) => { wx.request({ url, data, timeout:4000, //method:"POST", method:"GET", dataType:"json", success:(res)=>resolve(res), fail:(res)=>reject(res) }) }) }
login.js call:
import {request} from "../../request/index"; Page({ data: { m:"鲁拉鲁拉", user:{ account:"", password:"" }/*, level: ["50,000", "100,000", "150,000"]*/ }, changeValue(e){ console.log(e) //Get the value of the input box let value=e.detail.value //Get To the data-label on the label (account/password) //account->user.account let label="user."+e.target.dataset.label this.setData({ [label]:value }) }, login (){ wx.showLoading({showLoading({ title: "Desperately accessing", mask:true }) /*console.log(this.data.user)*/ let ff= request("/user/login",this.data.user) .then((res)=>{ wx.hideLoading() let icon="success" if(res.data.code!==200){ icon="error" } wx.showToast({ icon, title:res.data.message }) }).catch(()=>{ console.log("no") }) console.log(ff) } });