目录
一、创建登录页面搭建
1、登录界面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、登录布局wxss
image{
width: 400px;
height: 400px;
border-radius: 50%;
}
.mage{
display:flex; /*设置为flex布局*/
justify-content: center; /*水平居中*/
}
.container{
display:flex; /*设置为flex布局*/
justify-content: center; /*水平居中*/
}
3、login.js
import {request} from "../../request/index";
Page({
data: {
m:"噜啦噜啦",
user:{
account:"",
password:""
}/*,
level:["5万","10万","15万"]*/
},
changeValue(e){
console.log(e)
//取到输入框的值
let value=e.detail.value
//拿到标签上的data-label（account/password）
//account->user.account
let label="user."+e.target.dataset.label
this.setData({
[label]:value
})
},
login(){
console.log(this.data.user)
}
});
1、新建一个springBoot项目
2、导入依赖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、导入虚拟数据到数据库
4、生成表的实体类
实体类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、配置yml文件
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、导入util包
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、新建mapper层
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、在启动类增加注解扫描mapper层
@MapperScan("com.zy.mini_program.mapper")
9、新建service层
接口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);
}
实现接口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、新建controller层
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);
}
}
三、前后台交互
1、在前端新建一个文件夹
内包含JavaScript文件：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调用：
import {request} from "../../request/index";
Page({
data: {
m:"噜啦噜啦",
user:{
account:"",
password:""
}/*,
level:["5万","10万","15万"]*/
},
changeValue(e){
console.log(e)
//取到输入框的值
let value=e.detail.value
//拿到标签上的data-label（account/password）
//account->user.account
let label="user."+e.target.dataset.label
this.setData({
[label]:value
})
},
login(){
wx.showLoading({
title:"正在拼命访问中",
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)
}
});