devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序开发之微信小程序交互_微信小程序前后端交互

作者：繁依Fanyi0 | 2024-06-05 18:04:11

赞

踩

微信小程序前后端交互

目录

一、小程序交互

前端：

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

2、在前端中编写js代码

后端：

          1、先导入依赖：

          2、定义好配置文件

          3、编写好实体类

          4、将帮助类进行配置

          5、编写mapper类

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

          7、最后定义controller层

          8、进行测试

​

一、小程序交互

步骤：

前端：

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

login.wxml:

  1. <view>
  2.     <image src="/png/b.jpg" mode="scaleToFill"/>
  3.     <view>
  4.         <input placeholder="请输入用户名" maxlength="13" bind:input="changeValue" data-label="account"/>
  5.     </view>
  6.     <view>
  7.         <input placeholder="请输入密码" password="{{true}}" bind:input="changeValue" maxlength="16" data-label="password"/>
  8.     </view>
  9.     <view>
  10.         <button bindtap="userLogin" type="primary">登录</button>
  11.     </view>
  12. </view>

2、在前端中编写js代码

  1. import {request} from "../../request/index";
  2.  
  3. Page({
  4.     data: {
  5.         user: {
  6.             account: "",
  7.             password: ""
  8.         }
  9.     },
  10.     changeValue(e) {
  11.         let property = "user." + e.target.dataset.label
  12.         let value = e.detail.value
  13.         this.setData({
  14.             [property]: value
  15.         })
  16.     },
  17.     userLogin() {
  18.         wx.showLoading({
  19.             title: "正在努力加载中",
  20.             mask: false
  21.         })
  22.         request("/user/login", this.data.user).then(res => {
  23.             console.log(res)
  24.             wx.hideLoading()
  25.             let icon = "error"
  26.             if (res.data.code === 200) {
  27.                 icon = "success"
  28.             }
  29.             wx.showToast({
  30.                 title: res.data.message,
  31.                 icon
  32.             })
  33.         }).catch(res => {
  34.             console.error(res)
  35.             wx.hideLoading()
  36.         })
  37.     }
  38. })

后端：

          1、先导入依赖：

  1.  
  2.  
  3.     <dependencies>
  4.         <dependency>
  5.             <groupId>org.springframework.boot</groupId>
  6.             <artifactId>spring-boot-starter-web</artifactId>
  7.         </dependency>
  8.         <dependency>
  9.             <groupId>org.projectlombok</groupId>
  10.             <artifactId>lombok</artifactId>
  11.             <optional>true</optional>
  12.         </dependency>
  13.         <dependency>
  14.             <groupId>org.springframework.boot</groupId>
  15.             <artifactId>spring-boot-starter-test</artifactId>
  16.             <scope>test</scope>
  17.         </dependency>
  18.         <dependency>
  19.             <groupId>mysql</groupId>
  20.             <artifactId>mysql-connector-java</artifactId>
  21.         </dependency>
  22.         <dependency>
  23.             <groupId>tk.mybatis</groupId>
  24.             <artifactId>mapper-spring-boot-starter</artifactId>
  25.             <version>2.1.5</version>
  26.         </dependency>
  27.         <dependency>
  28.             <groupId>javax.persistence</groupId>
  29.             <artifactId>persistence-api</artifactId>
  30.             <version>1.0</version>
  31.         </dependency>
  32.     </dependencies>
  33.  
  34.     <dependencyManagement>
  35.         <dependencies>
  36.             <dependency>
  37.                 <groupId>org.springframework.boot</groupId>
  38.                 <artifactId>spring-boot-dependencies</artifactId>
  39.                 <version>${spring-boot.version}</version>
  40.                 <type>pom</type>
  41.                 <scope>import</scope>
  42.             </dependency>
  43.         </dependencies>
  44.     </dependencyManagement>
  45.  
  46.     <build>
  47.         <plugins>
  48.             <plugin>
  49.                 <groupId>org.apache.maven.plugins</groupId>
  50.                 <artifactId>maven-compiler-plugin</artifactId>
  51.                 <version>3.8.1</version>
  52.                 <configuration>
  53.                     <source>1.8</source>
  54.                     <target>1.8</target>
  55.                     <encoding>UTF-8</encoding>
  56.                 </configuration>
  57.             </plugin>
  58.             <plugin>
  59.                 <groupId>org.springframework.boot</groupId>
  60.                 <artifactId>spring-boot-maven-plugin</artifactId>
  61.                 <version>2.4.1</version>
  62.                 <configuration>
  63.                     <mainClass>com.zking.mini_program.MiniProgramApplication</mainClass>
  64.                 </configuration>
  65.                 <executions>
  66.                     <execution>
  67.                         <id>repackage</id>
  68.                         <goals>
  69.                             <goal>repackage</goal>
  70.                         </goals>
  71.                     </execution>
  72.                 </executions>
  73.             </plugin>
  74.         </plugins>
  75.     </build>
  76.  
  77.

          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、编写好实体类

  1. import com.fasterxml.jackson.annotation.JsonFormat;
  2. import lombok.AllArgsConstructor;
  3. import lombok.Data;
  4. import lombok.NoArgsConstructor;
  5. import lombok.experimental.Accessors;
  6. import org.springframework.format.annotation.DateTimeFormat;
  7.  
  8. import javax.persistence.*;
  9. import java.io.Serializable;
  10. import java.time.LocalDateTime;
  11.  
  12. @Data
  13. @Table(name = "t_user")
  14. @AllArgsConstructor
  15. @NoArgsConstructor
  16. @Accessors(chain = true)
  17. @SuppressWarnings("all")
  18. public class User implements Serializable {
  19.  
  20.     @Id
  21.     @GeneratedValue(strategy = GenerationType.IDENTITY)
  22.     private Long id;
  23.  
  24.     private String account;
  25.  
  26.     private String password;
  27.  
  28.     @Column(name = "modify_time")
  29.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  30.     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  31.     private LocalDateTime modifyTime;
  32.  
  33.     @Column(name = "create_time")
  34.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  35.     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  36.     private LocalDateTime createTime;
  37.  
  38. }

          4、将帮助类进行配置

1、JsonResponseParse：响应增强类,配合{@link JsonResponseResult}实现自定义快速返回

  1. import lombok.extern.slf4j.Slf4j;
  2. import org.springframework.core.MethodParameter;
  3. import org.springframework.http.MediaType;
  4. import org.springframework.http.server.ServerHttpRequest;
  5. import org.springframework.http.server.ServerHttpResponse;
  6. import org.springframework.web.bind.annotation.RestControllerAdvice;
  7. import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
  8.  
  9. @SuppressWarnings("all")
  10. @RestControllerAdvice
  11. @Slf4j
  12. /**
  13.  * 响应增强类,配合{@link JsonResponseResult}实现自定义快速返回
  14.  * beforeBodyWrite在{@link org.springframework.web.bind.annotation.ResponseBody}完成return之后并在消息解析器之前执行
  15.  */
  16. public class JsonResponseParse implements ResponseBodyAdvice {
  17.  
  18.     @Override
  19.     /**
  20.      * 返回值决定他是否需要进入beforeBodyWrite
  21.      */
  22.     public boolean supports(MethodParameter methodParameter, Class aClass) {
  23.         /*methodParameter是当前执行返回响应的方法,判断在该类上是否存在对应的注解*/
  24.         return methodParameter.getMethod().isAnnotationPresent(JsonResponseResult.class);
  25.     }
  26.  
  27.     @Override
  28.     /**
  29.      * 用于修改返回前的值
  30.      */
  31.     public Object beforeBodyWrite(Object o, MethodParameter methodParameter, MediaType mediaType, Class aClass, ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse) {
  32.         if (o == null) {
  33.             return ResponseResult.success();
  34.         }
  35.         if (o instanceof Integer) {
  36.             return ResponseResult.failure(ResponseResultCode.queryCode((Integer) o));
  37.         }
  38.         if (o instanceof ResponseResultCode) {
  39.             return ResponseResult.failure((ResponseResultCode) o);
  40.         }
  41.         if (o instanceof ResponseResult) {
  42.             return o;
  43.         }
  44.         return ResponseResult.success(o);
  45.     }
  46.  
  47. }

2、json响应结果类

  1. import java.lang.annotation.*;
  2.  
  3. @SuppressWarnings("all")
  4. @Retention(value = RetentionPolicy.RUNTIME)
  5. @Documented
  6. @Target({ElementType.METHOD})
  7. /**
  8.  * 此注解用于配合{@link JsonResponseParse}使用
  9.  */
  10. public @interface JsonResponseResult {
  11.  
  12. }

3、响应结果类

  1.  
  2.  
  3. import lombok.Data;
  4.  
  5. import java.io.Serializable;
  6.  
  7. @Data
  8. @SuppressWarnings("all")
  9. public class ResponseResult<T> implements Serializable {
  10.  
  11.     private Integer code;
  12.     private String message;
  13.     private T data;
  14.     private Long total;
  15.  
  16.     /**
  17.      * 私有构造, 只允许通过static调用构造
  18.      *
  19.      * @param resultCode 结果枚举
  20.      * @param data       响应数据
  21.      */
  22.     private ResponseResult(ResponseResultCode resultCode, T data) {
  23.         this.code = resultCode.getCode();
  24.         this.message = resultCode.getMessage();
  25.         this.data = data;
  26.     }
  27.  
  28.     /**
  29.      * 私有构造, 只允许通过static调用构造
  30.      *
  31.      * @param resultCode 结果枚举
  32.      * @param data       响应数据
  33.      * @param total      数据总大小(用于分页请求)
  34.      */
  35.     private ResponseResult(ResponseResultCode resultCode, Long total, T data) {
  36.         this.code = resultCode.getCode();
  37.         this.message = resultCode.getMessage();
  38.         this.data = data;
  39.         this.total = total;
  40.     }
  41.  
  42.     /**
  43.      * 成功调用返回的结果(无数据携带)
  44.      */
  45.     public static ResponseResult<?> success() {
  46.         return success(null);
  47.     }
  48.  
  49.     /**
  50.      * 成功调用返回的结果(数据携带)
  51.      *
  52.      * @param data 携带的数据
  53.      */
  54.     public static <T> ResponseResult success(T data) {
  55.         return new ResponseResult(ResponseResultCode.SUCCESS, data);
  56.     }
  57.  
  58.     /**
  59.      * 成功调用返回的结果(分页使用)
  60.      *
  61.      * @param data  携带的数据
  62.      * @param total 数据总条数
  63.      */
  64.     public static <T> ResponseResult success(T data, Long total) {
  65.         return new ResponseResult(ResponseResultCode.SUCCESS, total, data);
  66.     }
  67.  
  68.     /**
  69.      * 失败调用返回的结果(数据携带)
  70.      *
  71.      * @param resultCode 状态枚举
  72.      * @param data       携带的数据
  73.      */
  74.     public static <T> ResponseResult failure(ResponseResultCode resultCode, T data) {
  75.         return new ResponseResult(resultCode, data);
  76.     }
  77.  
  78.     /**
  79.      * 失败调用返回的结果(无数据携带)
  80.      *
  81.      * @param resultCode 状态枚举
  82.      */
  83.     public static ResponseResult failure(ResponseResultCode resultCode) {
  84.         return failure(resultCode, null);
  85.     }
  86.  
  87. }

4、响应编码类：

  1.  
  2. import java.io.Serializable;
  3.  
  4. @SuppressWarnings("all")
  5. public enum ResponseResultCode implements Serializable {
  6.  
  7.     /* 正常状态 */
  8.     SUCCESS(200, "成功"),
  9.     FAILURE(300, "失败"),
  10.     UNKNOWN(400, "未知错误"),
  11.     /**
  12.      * 用户code范围: 1000;
  13.      */
  14.     USER_ACCOUNT_NOT_FIND(1001, "用户名不存在"),
  15.     USER_ACCOUNT_DISABLED(1002, "该用户已被禁用"),
  16.     USER_PASSWORD_NOT_MATCH(1003, "该用户密码不一致"),
  17.     USER_PERMISSION_ERROR(1004, "该用户不具备访问权限"),
  18.     USER_STATE_OFF_LINE(1005, "该用户未登录"),
  19.     USER_CREDENTIAL_NOT_BE_EMPTY(1006, "用户的登录信息不能为空值"),
  20.     USER_ACCOUNT_NOT_MOBLIE(1007, "该用户登录信息格式不符合"),
  21.     USER_LOGIN_ERROR(1008, "登录失败"),
  22.     /**
  23.      * 其它异常: 4000;
  24.      */
  25.     TRIKET_ERROR(4001, "triket失效,请重新登录"),
  26.     /**
  27.      * 商品异常: 6000;
  28.      */
  29.     GOODS_ADD_ERROR(6001, "商品添加失败"),
  30.     GOODS_EDIT_ERROR(6002, "商品修改失败"),
  31.     GOODS_REMOVE_ERROR(6003, "商品删除失败");
  32.  
  33.     /*响应状态码*/
  34.     private final Integer code;
  35.     /*响应状态信息*/
  36.     private final String message;
  37.  
  38.     /*此构造无法调用,用来定义常量枚举使用*/
  39.     ResponseResultCode(Integer code, String message) {
  40.         this.code = code;
  41.         this.message = message;
  42.     }
  43.  
  44.     /**
  45.      * 此方法用于配合{@link JsonResponseParse}实现快速返回json类型响应码
  46.      * 需要结合{@link JsonResponseResult}注解使用
  47.      *
  48.      * @param code 响应码(对应枚举中的code,如无法找到则返回`UNKNOWN`)
  49.      */
  50.     public static ResponseResultCode queryCode(Integer code) {
  51.         for (ResponseResultCode value : values()) {
  52.             if (code.equals(value.code)) {
  53.                 return value;
  54.             }
  55.         }
  56.         return UNKNOWN;
  57.     }
  58.  
  59.     public Integer getCode() {
  60.         return code;
  61.     }
  62.  
  63.     public String getMessage() {
  64.         return message;
  65.     }
  66.  
  67. }

 5、异常辅助类：

  1.  
  2. import lombok.extern.slf4j.Slf4j;
  3. import org.springframework.web.bind.annotation.RestControllerAdvice;
  4.  
  5. @SuppressWarnings("all")
  6. @Slf4j
  7. @RestControllerAdvice
  8. public class ThrowableAdvice {
  9.  
  10.     /**
  11.      @JsonResponseResult
  12.      @ExceptionHandler(value = {BusinessException.class})
  13.      public ResponseResultCode globalBusinessException(Model m, Exception e) {
  14.      log.error(e.toString());
  15.      return ((BusinessException) e).getResponseResultCode();
  16.      }
  18.      @JsonResponseResult
  19.      @ExceptionHandler(value = {BindException.class})
  20.      public ResponseResultCode globalBindException(Model m, Exception e) {
  21.      log.error(e.toString());
  22.      BindException error = (BindException) e;
  23.      return (ResponseResultCode) error.getFieldError().getArguments()[1];
  24.      }
  26.      @JsonResponseResult
  27.      @ExceptionHandler(value = {Throwable.class})
  28.      public ResponseResultCode globalException(Model m, Exception e) {
  29.      log.error(e.toString());
  30.      return ResponseResultCode.UNKNOWN;
  31.      }
  32.      **/
  33.  
  34. }
  35.

          5、编写mapper类

  1. @SuppressWarnings("all")
  2. @Repository
  3. public interface UserMapper extends Mapper<User> {
  4.  
  5. }

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

service：

  1. @SuppressWarnings("all")
  2. public interface IUserService {
  3.  
  4.     ResponseResult<?> findUserByAccount(User user);
  5.  
  6. }

其中ResponseResult<?>响应结果类，中的？是可以随便放什么类的

E：一个集合的元素

K：键

V：值

T：类

          7、最后定义controller层

  1. @SuppressWarnings("all")
  2. @RequestMapping("/user")
  3. @RestController
  4. public class UserController {
  5.  
  6.     @Autowired
  7.     private IUserService userService;
  8.  
  9.     @RequestMapping("/login")
  10.     public ResponseResult<?> login(@RequestBody User user) {
  11.         return userService.findUserByAccount(user);
  12.     }
  13.  
  14. }

          8、进行测试

 输入账号和密码进行登录

 成功！

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/677589
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号