目錄
一、小程序交互
前端：
1、先在登陸界面中編寫代碼
2、在前端中編寫js代碼
后端：
? ? ? ? ? 1、先導入依賴：
? ? ? ? ? 2、定義好配置文件
? ? ? ? ? 3、編寫好實體類
? ? ? ? ? 4、將幫助類進行配置
? ? ? ? ? 5、編寫mapper類
? ? ? ? ? 6、定義service層以及對應的實現(xiàn)接口層
? ? ? ? ? 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}實現(xiàn)自定義快速返回
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}實現(xiàn)自定義快速返回
* beforeBodyWrite在{@link org.springframework.web.bind.annotation.ResponseBody}完成return之后并在消息解析器之前執(zhí)行
*/
public class JsonResponseParse implements ResponseBodyAdvice {
@Override
/**
* 返回值決定他是否需要進入beforeBodyWrite
*/
public boolean supports(MethodParameter methodParameter, Class aClass) {
/*methodParameter是當前執(zhí)行返回響應的方法,判斷在該類上是否存在對應的注解*/
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 響應數(shù)據
*/
private ResponseResult(ResponseResultCode resultCode, T data) {
this.code = resultCode.getCode();
this.message = resultCode.getMessage();
this.data = data;
}
/**
* 私有構造, 只允許通過static調用構造
*
* @param resultCode 結果枚舉
* @param data 響應數(shù)據
* @param total 數(shù)據總大小(用于分頁請求)
*/
private ResponseResult(ResponseResultCode resultCode, Long total, T data) {
this.code = resultCode.getCode();
this.message = resultCode.getMessage();
this.data = data;
this.total = total;
}
/**
* 成功調用返回的結果(無數(shù)據攜帶)
*/
public static ResponseResult<?> success() {
return success(null);
}
/**
* 成功調用返回的結果(數(shù)據攜帶)
*
* @param data 攜帶的數(shù)據
*/
public static <T> ResponseResult success(T data) {
return new ResponseResult(ResponseResultCode.SUCCESS, data);
}
/**
* 成功調用返回的結果(分頁使用)
*
* @param data 攜帶的數(shù)據
* @param total 數(shù)據總條數(shù)
*/
public static <T> ResponseResult success(T data, Long total) {
return new ResponseResult(ResponseResultCode.SUCCESS, total, data);
}
/**
* 失敗調用返回的結果(數(shù)據攜帶)
*
* @param resultCode 狀態(tài)枚舉
* @param data 攜帶的數(shù)據
*/
public static <T> ResponseResult failure(ResponseResultCode resultCode, T data) {
return new ResponseResult(resultCode, data);
}
/**
* 失敗調用返回的結果(無數(shù)據攜帶)
*
* @param resultCode 狀態(tài)枚舉
*/
public static ResponseResult failure(ResponseResultCode resultCode) {
return failure(resultCode, null);
}
}
4、響應編碼類：
import java.io.Serializable;
@SuppressWarnings("all")
public enum ResponseResultCode implements Serializable {
/* 正常狀態(tài) */
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, "商品刪除失敗");
/*響應狀態(tài)碼*/
private final Integer code;
/*響應狀態(tài)信息*/
private final String message;
/*此構造無法調用,用來定義常量枚舉使用*/
ResponseResultCode(Integer code, String message) {
this.code = code;
this.message = message;
}
/**
* 此方法用于配合{@link JsonResponseParse}實現(xiàn)快速返回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層以及對應的實現(xiàn)接口層
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、進行測試
?輸入賬號和密碼進行登錄
?成功！
輸入錯誤密碼就會顯示和該用戶密碼不統(tǒng)一
文章來源：http://www.zghlxwxcb.cn/news/detail-486924.html
今天的知識就分享到這了，希望能夠幫助到你！文章來源地址http://www.zghlxwxcb.cn/news/detail-486924.html
到了這里，關于微信小程序開發(fā)之微信小程序交互的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
