1500字范文 > 微信小程序开发之小程序交互（实现登录功能）

微信小程序开发之小程序交互（实现登录功能）

时间：2019-02-01 10:23:28

一、创建登录页面搭建

1、登录界面login.wxml

2、登录布局wxss

image{width: 400px;height: 400px;border-radius: 50%;}.mage{display:flex; /*设置为flex布局*/justify-content: center; /*水平居中*/}.container{display:flex; /*设置为flex布局*/justify-content: center; /*水平居中*/}

3、login.js

Page({data: {user:{account:"",password:"",}},changeValue(e){console.log(e)// 取到输入框中的值let value=e.detail.value// 拿到标签上的data-label(account/password)// account->user.accountlet label="user."+e.target.dataset.labelthis.setData({[label]:value})},login(){console.log(this.data.user)}})

效果图

取到登录的值：

二、后台开发

1、新建一个springBoot项目

2、导入依赖pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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、导入虚拟数据到数据库

注意存放的位置：

实体类User：

package com.zking.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)@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;}

5、配置yml文件

server:port: 8080spring:application:name: mini_programdatasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: 123456url: jdbc:mysql://localhost:3306/crm?useSSL=false&serverTimezone=Asia/Shanghai&useEncoding=utf8mb4

6、导入util包

JsonResponseParse ：

package com.zking.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.zking.mini_program.util.response;import java.lang.annotation.*;@SuppressWarnings("all")@Retention(value = RetentionPolicy.RUNTIME)@Documented@Target({ElementType.METHOD})/*** 此注解用于配合{@link JsonResponseParse}使用*/public @interface JsonResponseResult {}

ResponseResult<T>：

package com.zking.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.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.zking.mini_program.util.response;import lombok.extern.slf4j.Slf4j;import org.springframework.web.bind.annotation.RestControllerAdvice;@SuppressWarnings("all")@Slf4j@RestControllerAdvicepublic 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、新建mapper层

UserMapper.java:

package com.zking.mini_program.mapper;import com.zking.mini_program.pojo.User;import org.springframework.stereotype.Repository;import tk.mon.Mapper;@SuppressWarnings("all")@Repositorypublic interface UserMapper extends Mapper<User> {}

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

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

9、新建service层

接口IuserService ：

package com.zking.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);}

实现接口userServiceImpl：

package com.zking.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")@Servicepublic class UserServiceImpl implements IUserService {@Autowiredprivate UserMapper userMapper;@Overridepublic 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、新建controller层

package com.zking.mini_program.controller;import com.zking.mini_program.pojo.User;import com.zking.mini_program.service.IUserService;import com.zking.mini_program.util.response.ResponseResult;import org.springframework.beans.factory.annotation.Autowired;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")@RestControllerpublic class UserController {@Autowiredprivate IUserService userService;@RequestMapping("/login")public ResponseResult<?> login(User user) {return userService.findUserByAccount(user);}}

11、测试登录

使用户名与密码正确输入（注意时间格式）：

登录成功：

三、前后台交互

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

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

内包含JavaScript文件：index.js

export let request=(url,data)=>{// 写上natapp提供的域名let baseURL="http://localhost:8080"// 异步代码return new Promise((resolve,reject)=>{wx.request({url: baseURL+url,data,timeout:4000,method:"GET",dataType:"json",success:(res)=>resolve(res),fail:(res)=>reject(res)})})}

login.js调用：

// 直接导入index.js模块import {request} from "../../request/index";Page({data: {user:{account:"",password:""}},changeValue(e){// 取到输入框中的值let value=e.detail.value// 拿到标签上的data-label(account/password)// account->user.accountlet label="user."+e.target.dataset.labelthis.setData({[label]:value})},login(){wx.showLoading({title:"正在拼命加载中",mask:false})request("/user/login",this.data.user).then(res=>{console.log(res)wx.hideLoading()let icon="success"if(res.data.code!==200){icon="error"}wx.showToast({icon,title:res.data.message})}).catch(res=>{console.error(res)wx.hideLoading()})}})

登录成功：

场景一：

场景二：

内容结束啦~~~~~~~~~

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。