Tabla de contenido
1. Crea una página de inicio de sesión
1. Interfaz de inicio de sesión login.wxml
1. Cree un nuevo proyecto springBoot
2. Importar dependencia pom.xml
3. Importar datos virtuales a la base de datos.
4. Generar la clase de entidad de la tabla.
6. Importe el paquete de utilidades.
7. Crea una nueva capa de mapeador
8. Agregue anotaciones a la clase de inicio para escanear la capa del asignador.
9. Cree una nueva capa de servicio.
10. Crea una nueva capa de controlador.
3. Interacción front-end y back-end
1. Cree una nueva carpeta en el front-end.
1. Crea una página de inicio de sesión
1. Interfaz de inicio de sesión login.wxml
<!-- <text>Eres tan hermosa</text>
<text>{
{m}}</text>-->
</view>
<view>
<image src="/asset/1.png" modo ="aspectFit"></image>
<view>
<input bind:input="changeValue" data-label="account" type="text" placeholder="请输入用户名" maxlength="11"></input >
</vista>
<vista>
<enlace de entrada:input="changeValue" data-label="contraseña" contraseña="true" placeholder="请密码" maxlength="16"></input>
</view>
<view>
<button bindtap="login">登录< /botón>
</vista>
</vista>
2. Diseño de inicio de sesión wxss
imagen{
ancho: 400px;
alto: 400px;
radio de borde: 50%;
}
.mage{
display:flex; /*Establecer diseño flexible*/
justify-content: center; /*Centrado horizontal*/
}
.container{
display :flex; /*Establecer diseño flexible*/
justify-content: center; /*Centrado horizontalmente*/
}
3、iniciar sesión.js
importar {solicitud} desde "../../request/index";
Página({
datos: {
m:"鲁拉鲁拉",
usuario:{
cuenta:"",
contraseña:""
}/*,
nivel: ["50,000", "100,000", "150,000"]*/
},
changeValue(e){
console.log(e)
//Obtener el valor del cuadro de entrada
let value=e.detail.value
//Ir al etiqueta de datos en la etiqueta (cuenta/contraseña)
//cuenta->usuario.cuenta
let label="usuario."+e.target.dataset.label
this.setData({
[label]:valor
})
},
inicie sesión ( ){
consola. log(this. data.usuario)
}
});
1. Cree un nuevo proyecto springBoot
2. Importar dependencia 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. Importar datos virtuales a la base de datos.
4. Generar la clase de entidad de la tabla.
Usuario de clase de entidad:
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 el archivo yml
servidor:
puerto: 8080
primavera:
fuente de datos:
nombre de clase del controlador: com.mysql.cj.jdbc. Nombre de usuario del controlador :
contraseña
de root : 123456
URL: jdbc:mysql://localhost:3306/eshop?useSSL=false&serverTimezone=Asia/ Shangai&useEncoding=utf8mb4
6. Importe el paquete de utilidades.
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);
}
}
Resultado de respuesta Json:
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 {
}
Resultado de respuesta<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);
}
}
Código de resultado de respuesta:
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;
}
}
Consejos arrojables:
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. Crea una nueva capa de mapeador
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. Agregue anotaciones a la clase de inicio para escanear la capa del asignador.
@MapperScan("com.zy.mini_program.mapper")
9. Cree una nueva capa de servicio.
Interfaz 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);
}
Implementar la interfaz 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. Crea una nueva capa de controlador.
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. Interacción front-end y back-end
1. Cree una nueva carpeta en el front-end.
Contiene un archivo JavaScript: index.js
export let request=(url,data)=>{ let baseURL="http://localhost:8080" url=baseURL+url // 异步代码 return new Promise((resolver, rechazar) => { wx.request({ url, datos, tiempo de espera: 4000, //método:"POST", método:"GET", tipo de datos:"json", éxito:(res)=>resolve(res), falla:(res)=>rechazar(res ) }) }) }
llamada login.js:
importar {solicitud} desde "../../request/index"; Página({ datos: { m:"鲁拉鲁拉", usuario:{ cuenta:"", contraseña:"" }/*, nivel: ["50,000", "100,000", "150,000"]*/ }, changeValue(e){ console.log(e) //Obtener el valor del cuadro de entrada let value=e.detail.value //Ir al etiqueta de datos en la etiqueta (cuenta/contraseña) //cuenta->usuario.cuenta let label="usuario."+e.target.dataset.label this.setData({ [label]:valor }) }, inicie sesión ( ){ wx. })showLoading({ título: "Visitando desesperadamente", máscara:true /*console.log(this.data.user)*/ let ff= request("/user/login",this.data.user) .then((res)=>{ wx.hideLoading() let icon="éxito" if(res.data.code!==200){ icon="error" } wx.showToast({ icon, title:res.data.message }) }).catch(()=>{ console.log("no") }) console.log(ff) } });