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

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

作者：IT小白 | 2024-06-13 07:51:56

赞

踩

eclipse开发微信小程序

一、创建登录页面搭建

1、登录界面login.wxml

  1. <view class="mage">
  2.      <image src="/assect/Stud.jpg" style="width:200px;height:200px" mode="center"></image>
  3. </view>
  4. <view>
  5. <!--    11位的电话号码-->
  6.         <label>用户名</label>
  7.         <input bind:input="changeValue" data-label="account" type="text" placeholder="请输入用户名" maxlength="11"></input>
  8.  
  9.         <label>密码</label>
  10.         <input bind:input="changeValue" data-label="password" type="text" placeholder="请输入密码" password="true" maxlength="16"></input>
  11.         <button type="primary" bindtap="login">登录</button>
  12.         <button form-type="reset" type="primary">清空</button>
  13. </view>

2、登录布局wxss

  1. image{
  2.     width: 400px;
  3.     height: 400px;
  4.     border-radius: 50%;
  5. }
  6. .mage{
  7.     display:flex;   /*设置为flex布局*/
  8.     justify-content: center;    /*水平居中*/
  9. }
  10. .container{
  11.     display:flex;   /*设置为flex布局*/
  12.     justify-content: center;    /*水平居中*/
  13. }

3、login.js

  1. Page({
  2.     data: {
  3.         user:{
  4.             account:"",
  5.             password:"",
  6.         }
  7.     },
  8.     changeValue(e){
  9.         console.log(e)
  10.         // 取到输入框中的值
  11.         let value=e.detail.value
  12.         // 拿到标签上的data-label(account/password)
  13.         // account->user.account
  14.         let label="user."+e.target.dataset.label
  15.         this.setData({
  16.             [label]:value
  17.         })
  18.     },
  19.     login(){
  20.         console.log(this.data.user)
  21.     }
  22.  
  23. })

取到登录的值：

 二、后台开发

1、新建一个springBoot项目

 2、导入依赖pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <groupId>com.lv</groupId>
  6.     <artifactId>code</artifactId>
  7.     <version>0.0.1-SNAPSHOT</version>
  8.     <name>wx</name>
  9.     <description>Demo project for Spring Boot</description>
  10.  
  11.     <properties>
  12.         <java.version>1.8</java.version>
  13.         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  14.         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  15.         <spring-boot.version>2.4.1</spring-boot.version>
  16.     </properties>
  17.  
  18.     <dependencies>
  19.         <dependency>
  20.             <groupId>org.springframework.boot</groupId>
  21.             <artifactId>spring-boot-starter</artifactId>
  22.         </dependency>
  23.  
  24.         <dependency>
  25.             <groupId>org.springframework.boot</groupId>
  26.             <artifactId>spring-boot-starter-web</artifactId>
  27.         </dependency>
  28.  
  29.         <dependency>
  30.             <groupId>org.projectlombok</groupId>
  31.             <artifactId>lombok</artifactId>
  32.             <optional>true</optional>
  33.         </dependency>
  34.         <dependency>
  35.             <groupId>org.springframework.boot</groupId>
  36.             <artifactId>spring-boot-starter-test</artifactId>
  37.             <scope>test</scope>
  38.         </dependency>
  39.         <dependency>
  40.             <groupId>mysql</groupId>
  41.             <artifactId>mysql-connector-java</artifactId>
  42.         </dependency>
  43.         <dependency>
  44.             <groupId>tk.mybatis</groupId>
  45.             <artifactId>mapper-spring-boot-starter</artifactId>
  46.             <version>2.0.2</version>
  47.         </dependency>
  48.         <dependency>
  49.             <groupId>javax.persistence</groupId>
  50.             <artifactId>persistence-api</artifactId>
  51.             <version>1.0</version>
  52.         </dependency>
  53.     </dependencies>
  54.  
  55.     <dependencyManagement>
  56.         <dependencies>
  57.             <dependency>
  58.                 <groupId>org.springframework.boot</groupId>
  59.                 <artifactId>spring-boot-dependencies</artifactId>
  60.                 <version>${spring-boot.version}</version>
  61.                 <type>pom</type>
  62.                 <scope>import</scope>
  63.             </dependency>
  64.         </dependencies>
  65.     </dependencyManagement>
  66.  
  67.     <build>
  68.         <plugins>
  69.             <plugin>
  70.                 <groupId>org.apache.maven.plugins</groupId>
  71.                 <artifactId>maven-compiler-plugin</artifactId>
  72.                 <version>3.8.1</version>
  73.                 <configuration>
  74.                     <source>1.8</source>
  75.                     <target>1.8</target>
  76.                     <encoding>UTF-8</encoding>
  77.                 </configuration>
  78.             </plugin>
  79.             <plugin>
  80.                 <groupId>org.springframework.boot</groupId>
  81.                 <artifactId>spring-boot-maven-plugin</artifactId>
  82.                 <version>2.4.1</version>
  83.                 <configuration>
  84.                     <mainClass>com.lv.code.WxApplication</mainClass>
  85.                 </configuration>
  86.                 <executions>
  87.                     <execution>
  88.                         <id>repackage</id>
  89.                         <goals>
  90.                             <goal>repackage</goal>
  91.                         </goals>
  92.                     </execution>
  93.                 </executions>
  94.             </plugin>
  95.         </plugins>
  96.     </build>
  97.  
  98. </project>

3、导入虚拟数据到数据库

 4、生成表的实体类

 注意存放的位置：

实体类User： 

  1. package com.lv.code.pojo;
  2.  
  3. import java.io.Serializable;
  4. import java.util.Date;
  5.  
  6. import com.fasterxml.jackson.annotation.JsonFormat;
  7. import lombok.AllArgsConstructor;
  8. import lombok.Data;
  9. import lombok.NoArgsConstructor;
  10. import lombok.experimental.Accessors;
  11. import org.springframework.format.annotation.DateTimeFormat;
  12.  
  13. import javax.persistence.*;
  14.  
  15. /**
  16.  * t_user
  17.  * @author 
  18.  */
  19. @Data
  20. @Table(name = "t_user")
  21. @AllArgsConstructor
  22. @NoArgsConstructor
  23. @Accessors(chain = true)
  24. public class User implements Serializable {
  25.  
  26. //    组件自增
  27.     @Id
  28.     @GeneratedValue(strategy = GenerationType.IDENTITY)
  29.     private Long id;
  30.  
  31.     private String account;
  32.  
  33.     private String password;
  34.  
  35. //    将前端发送的string数据转换为date类型，输出date类型
  36.     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  37. //    将date类型转换为string类型,接收date类型
  38.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  39.     private Date modifyTime;
  40.  
  41. //   将前端发送的string数据转换为date类型，输出date类型
  42.     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  43. //   将date类型转换为string类型,接收date类型
  44.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  45.     private Date createTime;
  46.  
  47.     private static final long serialVersionUID = 1L;
  48. }

5、配置yml文件

  1.  
  2. server:
  3.   port: 8080
  4. spring:
  5.   datasource:
  6.     username: root
  7.     password: 123456
  8.     driver-class-name: com.mysql.cj.jdbc.Driver
  9.     url: jdbc:mysql://localhost:3306/aaa?userSSL=false&serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&allowPublicKeyRetrieval=true

6、导入util包

JsonResponseParse ：

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

JsonResponseResult ：

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

ResponseResult<T>：

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

ResponseResultCode ：

  1. package com.lv.code.util.response;
  2.  
  3. import java.io.Serializable;
  4.  
  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. }

ThrowableAdvice ：

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

7、新建mapper层

UserMapper.java:

  1. package com.lv.code.mapper;
  2.  
  3. import com.lv.code.pojo.User;
  4. import org.springframework.stereotype.Repository;
  5. import tk.mybatis.mapper.common.Mapper;
  6.  
  7. @Repository
  8. public interface UserMapper extends Mapper<User> {
  9.     
  10. }

8、在启动类增加注解扫描mapper层

@MapperScan("com.lv.code.mapper")

9、新建service层

接口IuserService ：

  1. package com.lv.code.service;
  2.  
  3.  
  4. import com.lv.code.pojo.User;
  5. import com.lv.code.util.response.ResponseResult;
  6.  
  7. public interface IuserService {
  8.  
  9.     ResponseResult<?> findUserByAccount(User user);
  10.  
  11. }

实现接口userServiceImpl ：

  1. package com.lv.code.service.impl;
  2.  
  3. import com.lv.code.mapper.UserMapper;
  4. import com.lv.code.pojo.User;
  5. import com.lv.code.service.IuserService;
  6. import com.lv.code.util.response.ResponseResult;
  7. import com.lv.code.util.response.ResponseResultCode;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Service;
  10. import org.springframework.util.StringUtils;
  11. import tk.mybatis.mapper.entity.Example;
  12.  
  13.  
  14. @Service
  15. public class userServiceImpl implements IuserService {
  16.  
  17.     @Autowired
  18.     private UserMapper userMapper;
  19.  
  20.     @Override
  21.     public ResponseResult<?> findUserByAccount(User user) {
  22.         if(StringUtils.isEmpty(user.getAccount())){
  23.             return ResponseResult.failure(ResponseResultCode.USER_CREDENTIAL_NOT_BE_EMPTY);
  24.         }
  25. //        声明一个条件载体
  26.         Example example=new Example(User.class);
  27. //        放入一个条件
  28.         example.createCriteria().andEqualTo("account",user.getAccount());
  29.         //        使用条件载体进行查询
  30.         User u=userMapper.selectOneByExample(example);
  31.         if(u==null){
  32.             return ResponseResult.failure(ResponseResultCode.USER_ACCOUNT_NOT_FIND);
  33.         }
  34.         if(user.getPassword().equals(u.getPassword())){
  35.             return ResponseResult.failure(ResponseResultCode.USER_PASSWORD_NOT_MATCH);
  36.         }
  37.  
  38.         return ResponseResult.success(u);
  39.     }
  40. }

10、新建controller层

  1. package com.lv.code.controller;
  2.  
  3. import com.lv.code.pojo.User;
  4. import com.lv.code.service.IuserService;
  5. import com.lv.code.util.response.ResponseResult;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.scheduling.annotation.Async;
  8. import org.springframework.web.bind.annotation.RequestBody;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RestController;
  11.  
  12. @RestController
  13. @RequestMapping("/user")
  14. public class UserController {
  15.  
  16.     @Autowired
  17.     private IuserService userService;
  18.  
  19.     @RequestMapping("/login")
  20.     public ResponseResult<?> login(@RequestBody User user){
  21.         return userService.findUserByAccount(user);
  22.     }
  23.  
  24. }
  25.

11、测试登录

使用户名与密码正确输入：

登录成功：

 三、前后台交互

微信request的特征：它去网络通信的时候是异步的，若想要同步，则使用Promise风格，微信小程序不支持，需要自己编写。

1、在前端新建一个文件夹

内包含JavaScript文件：index.js

  1. export let request=(url,data)=>{
  2.     // 写上natapp提供的域名
  3.     let baseURL="http://localhost:8080"
  4.  
  5.  
  6.     // 异步代码
  7.   return new Promise((resolve,reject)=>{
  8.       wx.request({
  9.           url: baseURL+url,
  10.           data,
  11.           timeout:4000,
  12.           method:"POST",
  13.           dataType:"json",
  14.           success:(res)=>resolve(res),
  15.           fail:(res)=>reject(res)
  16.       })
  17.   })
  18.  
  19. }

login.js调用：

  1. // 直接导入index.js模块
  2. import {request} from "../../request/index";
  3. Page({
  4.     data: {
  5.         user:{
  6.             account:"",
  7.             password:""
  8.         }
  9.     },
  10.     changeValue(e){
  11.         // 取到输入框中的值
  12.         let value=e.detail.value
  13.         // 拿到标签上的data-label(account/password)
  14.         // account->user.account
  15.         let label="user."+e.target.dataset.label
  16.         this.setData({
  17.             [label]:value
  18.         })
  19.     },
  20.     login(){
  21.         wx.showLoading({
  22.             title:"正在拼命加载中",
  23.             mask:false
  24.         })
  25.         request("/user/login",this.data.user).then(res=>{
  26.         console.log(res)
  27.             wx.hideLoading()
  28.             let icon="success"
  29.             if(res.data.code!==200){
  30.                 icon="error"
  31.             }
  32.             wx.showToast({
  33.                 icon,
  34.                 title:res.data.message
  35.             })
  36.         }).catch(res=>{
  37.             console.error(res)
  38.             wx.hideLoading()
  39.         })
  40.     }
  41.  
  42. })

登录成功：

 

本期内容结束~~~~~~~~~~~~~~~~~~~~~~~~~

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

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