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

目录

一、小程序交互

前端：

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

2、在前端中编写js代码

后端：

          1、先导入依赖：

          2、定义好配置文件

          3、编写好实体类

          4、将帮助类进行配置

          5、编写mapper类

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

          7、最后定义controller层

          8、进行测试

​

一、小程序交互

步骤：

前端：

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

login.wxml:

<view>
    <image src="/png/b.jpg" mode="scaleToFill"/>
    <view>
        <input placeholder="请输入用户名" maxlength="13" bind:input="changeValue" data-label="account"/>
    </view>
    <view>
        <input placeholder="请输入密码" password="{{true}}" bind:input="changeValue" maxlength="16" data-label="password"/>
    </view>
    <view>
        <button bindtap="userLogin" type="primary">登录</button>
    </view>
</view>

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、先导入依赖：

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

          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
/**
 * 响应增强类,配合{@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);
    }

}

2、json响应结果类

import java.lang.annotation.*;

@SuppressWarnings("all")
@Retention(value = RetentionPolicy.RUNTIME)
@Documented
@Target({ElementType.METHOD})
/**
 * 此注解用于配合{@link JsonResponseParse}使用
 */
public @interface JsonResponseResult {

}

3、响应结果类

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

}

4、响应编码类：

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

}

 5、异常辅助类：

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

}

          5、编写mapper类

@SuppressWarnings("all")
@Repository
public interface UserMapper extends Mapper<User> {

}

          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、进行测试

 输入账号和密码进行登录

 成功！

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

今天的知识就分享到这了，希望能够帮助到你！文章来源地址https://www.toymoban.com/news/detail-486924.html

到了这里，关于微信小程序开发之微信小程序交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！