Développement du programme WeChat.Interaction du mini-programme

Table des matières

1. Créez une page de connexion

1. Interface de connexion login.wxml

1. Créez un nouveau projet springBoot

 2. Importer la dépendance pom.xml

3. Importez des données virtuelles dans la base de données

4. Générez la classe d'entité de la table

5. Configurez le fichier yml

6. Importez le package util

7. Créez une nouvelle couche de mappage

8. Ajoutez des annotations à la classe de démarrage pour analyser la couche de mappage.

9. Créez une nouvelle couche de service

10. Créez une nouvelle couche de contrôleur

3. Interaction front-end et back-end

1. Créez un nouveau dossier sur le front-end

---

 

1. Créez une page de connexion

1. Interface de connexion login.wxml

<!-- <text>Tu es si belle</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> 
            <liaison d'entrée :input="changeValue" data-label="password" password="true" placeholder="请密码" maxlength="16"></input> 
    </view> 
    <view> 
        <button bindtap="login">登录< /bouton> 
    </view> 
</view>

2. Disposition de connexion wxss 

image{ 
    largeur : 400 px ; 
    hauteur : 400 px ; 
    rayon de bordure : 50 % ; 
} 
.mage{ 
    display:flex; /*Définir pour une 
    mise en page flexible*/ justifier-content: center; /*Centrage horizontal*/ 
} 
.container{ 
    display :flex; /*défini sur une mise en page flexible*/ 
    justifier-content: center; /*centré horizontalement*/ 
}

3、login.js 

importer {request} depuis "../../request/index" ; 


Page({ 
    data : { 
m:"Lulalula", 
        user :{ 
    account:"", 
            password:"" 
        }/*, 
        niveau : ["50 000 ", "100,000", "150,000"]*/ 
    }, 
    changeValue(e){ 
        console.log(e) 
        //Obtenir la valeur de la zone de saisie 
       let value=e.detail.value 
        //Obtenir l'étiquette de données sur l'étiquette (compte/mot de passe) 
//account->user.account 
        let label="user."+e.target.dataset.label 
        this.setData({ 
          [label]:value 
        }) 
    }, 
    login (){ 
        console .log(this.data.utilisateur) 
    } 
});

 

1. Créez un nouveau projet springBoot

 2. Importer la dépendance 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. Importez des données virtuelles dans la base de données

 

4. Générez la classe d'entité de la table

 

 

Classe d'entité Utilisateur : 

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. Configurez le fichier yml

serveur : 
    port : 8080 
spring : 
    source de données : 
        nom de classe du pilote : com.mysql.cj.jdbc.Driver 
        nom d'utilisateur : mot de passe root
        : 123456 
        url : jdbc:mysql://localhost:3306/eshop?useSSL=false&serverTimezone=Asia/ Shanghai&useEncoding=utf8mb4

 

6. Importez le package 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 {

}

 RéponseRésultat<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. Créez une nouvelle couche de mappage

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. Ajoutez des annotations à la classe de démarrage pour analyser la couche de mappage.

@MapperScan("com.zy.mini_program.mapper")

9. Créez une nouvelle couche de service

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);

}

Implémenter l'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. Créez une nouvelle couche de contrôleur

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. Interaction front-end et back-end

1. Créez un nouveau dossier sur le front-end

Contient le fichier JavaScript : index.js

 

 

export let request=(url,data)=>{ 
    let baseURL="http://localhost:8080" 
    url=baseURL+url 


    // 异步代码
    return new Promise((resolve, rejet) => { 
        wx.request({ 
            url, 
            données, 
            délai d'attente : 4000, 
            //méthode : "POST", 
            méthode : "GET", 
            dataType : "json", 
            succès :(res)=>resolve(res), 
            échec :(res)=>reject(res ) 
        }) 
    }) 
}

login.js appelle :

 

importer {request} depuis "../../request/index" ; 


Page({ 
    data : { 
m:"Lulalula", 
        user :{ 
    account:"", 
            password:"" 
        }/*, 
        niveau : ["50 000 ", "100,000", "150,000"]*/ 
    }, 
    changeValue(e){ 
        console.log(e) 
        //Obtenir la valeur de la zone de saisie 
       let value=e.detail.value 
        //Obtenir l'étiquette de données sur l'étiquette (compte/mot de passe) 
//account->user.account 
        let label="user."+e.target.dataset.label 
        this.setData({ 
          [label]:value 
        }) 
    }, 
    login (){ 
        wx . 
        })showLoading({ 
            titre : "Accès désespéré",
            masque:true
        /*console.log(this.data.user)*/ 
    let ff= request("/user/login",this.data.user) 
        .then((res)=>{ 
            wx.hideLoading() 
            let icon=" succès" 
            if(res.data.code!==200){ 
                icon="error" 
            } 
            wx.showToast({ 
                icon, 
                title:res.data.message 
            }) 
        }).catch(()=>{ 
console.log ("non") 
        }) 
        console.log(ff) 
    } 
});