栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

微信小程序开发之微信小程序交互

微信小程序开发之微信小程序交互

目录

一、小程序交互

前端:

1、先在登陆界面中编写代码

2、在前端中编写js代码

后端:

          1、先导入依赖:

          2、定义好配置文件

          3、编写好实体类

          4、将帮助类进行配置

          5、编写mapper类

          6、定义service层以及对应的实现接口层

          7、最后定义controller层

          8、进行测试


一、小程序交互

步骤:

前端:

1、先在登陆界面中编写代码

login.wxml:


    
    
        
    
    
        
    
    
        
    

2、在前端中编写js代码
import {request} from "../../request/index";

Page({
    data: {
        user: {
            account: "",
            password: ""
        }
    },
    changevalue(e) {
        let property = "user." + e.target.dataset.label
        let value = e.detail.value
        this.setData({
            [property]: value
        })
    },
    userLogin() {
        wx.showLoading({
            title: "正在努力加载中",
            mask: false
        })
        request("/user/login", this.data.user).then(res => {
            console.log(res)
            wx.hideLoading()
            let icon = "error"
            if (res.data.code === 200) {
                icon = "success"
            }
            wx.showToast({
                title: res.data.message,
                icon
            })
        }).catch(res => {
            console.error(res)
            wx.hideLoading()
        })
    }
})

 

后端:

          1、先导入依赖:

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            mysql
            mysql-connector-java
        
        
            tk.mybatis
            mapper-spring-boot-starter
            2.1.5
        
        
            javax.persistence
            persistence-api
            1.0
        
    

    
        
            
                org.springframework.boot
                spring-boot-dependencies
                ${spring-boot.version}
                pom
                import
            
        
    

    
        
            
                org.apache.maven.plugins
                maven-compiler-plugin
                3.8.1
                
                    1.8
                    1.8
                    UTF-8
                
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.4.1
                
                    com.zking.mini_program.MiniProgramApplication
                
                
                    
                        repackage
                        
                            repackage
                        
                    
                
            
        
    


          2、定义好配置文件
server:
    port: 8080
spring:
    application:
        name: mini_program
    datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        username: root
        password: password
        url: jdbc:mysql://127.0.0.1/wechat?useSSL=false&serverTimezone=Asia/Shanghai&useEncoding=utf8mb4

          3、编写好实体类
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)
@SuppressWarnings("all")
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;

}

          4、将帮助类进行配置
1、JsonResponseParse:响应增强类,配合{@link JsonResponseResult}实现自定义快速返回
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

public class JsonResponseParse implements ResponseBodyAdvice {

    @Override
    
    public boolean supports(MethodParameter methodParameter, Class aClass) {
        
        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);
    }

}

2、json响应结果类

import java.lang.annotation.*;

@SuppressWarnings("all")
@Retention(value = RetentionPolicy.RUNTIME)
@documented
@Target({ElementType.METHOD})

public @interface JsonResponseResult {

}

3、响应结果类


import lombok.Data;

import java.io.Serializable;

@Data
@SuppressWarnings("all")
public class ResponseResult implements Serializable {

    private Integer code;
    private String message;
    private T data;
    private Long total;

    
    private ResponseResult(ResponseResultCode resultCode, T data) {
        this.code = resultCode.getCode();
        this.message = resultCode.getMessage();
        this.data = data;
    }

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

    
    public static  ResponseResult success(T data) {
        return new ResponseResult(ResponseResultCode.SUCCESS, data);
    }

    
    public static  ResponseResult success(T data, Long total) {
        return new ResponseResult(ResponseResultCode.SUCCESS, total, data);
    }

    
    public static  ResponseResult failure(ResponseResultCode resultCode, T data) {
        return new ResponseResult(resultCode, data);
    }

    
    public static ResponseResult failure(ResponseResultCode resultCode) {
        return failure(resultCode, null);
    }

}

4、响应编码类:

import java.io.Serializable;

@SuppressWarnings("all")
public enum ResponseResultCode implements Serializable {

    
    SUCCESS(200, "成功"),
    FAILURE(300, "失败"),
    UNKNOWN(400, "未知错误"),
    
    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, "登录失败"),
    
    TRIKET_ERROR(4001, "triket失效,请重新登录"),
    
    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;
    }

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

}

 5、异常辅助类:

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@SuppressWarnings("all")
@Slf4j
@RestControllerAdvice
public class ThrowableAdvice {

    

}

          5、编写mapper类
@SuppressWarnings("all")
@Repository
public interface UserMapper extends Mapper {

}

          6、定义service层以及对应的实现接口层

service:

@SuppressWarnings("all")
public interface IUserService {

    ResponseResult findUserByAccount(User user);

}

其中ResponseResult响应结果类,中的?是可以随便放什么类的

E:一个集合的元素

K:键

V:值

T:类

 

          7、最后定义controller层
@SuppressWarnings("all")
@RequestMapping("/user")
@RestController
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/login")
    public ResponseResult login(@RequestBody User user) {
        return userService.findUserByAccount(user);
    }

}

          8、进行测试

 输入账号和密码进行登录

 成功!

输入错误密码就会显示和该用户密码不统一

今天的知识就分享到这了,希望能够帮助到你!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/762301.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号