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

移动开发 2022-03-23 11:11:02 阅读次数: 0

一、创建登录页面搭建

1、登录界面login.wxml

<view class="mage">
     <image src="/assect/Stud.jpg" style="width:200px;height:200px" mode="center"></image>
</view>
<view>
<!--    11位的电话号码-->
        <label>用户名</label>
        <input bind:input="changeValue" data-label="account" type="text" placeholder="请输入用户名" maxlength="11"></input>

        <label>密码</label>
        <input bind:input="changeValue" data-label="password" type="text" placeholder="请输入密码" password="true" maxlength="16"></input>
        <button type="primary" bindtap="login">登录</button>
        <button form-type="reset" type="primary">清空</button>
</view>

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.account
        let label="user."+e.target.dataset.label
        this.setData({
            [label]:value
        })
    },
    login(){
        console.log(this.data.user)
    }

})

取到登录的值：

 二、后台开发

1、新建一个springBoot项目

 2、导入依赖pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.lv</groupId>
    <artifactId>code</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>wx</name>
    <description>Demo project for Spring Boot</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</artifactId>
        </dependency>

        <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.0.2</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.lv.code.WxApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

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

 4、生成表的实体类

 注意存放的位置：

实体类User： 

package com.lv.code.pojo;

import java.io.Serializable;
import java.util.Date;

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.*;

/**
 * t_user
 * @author 
 */
@Data
@Table(name = "t_user")
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class User implements Serializable {

//    组件自增
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String account;

    private String password;

//    将前端发送的string数据转换为date类型，输出date类型
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
//    将date类型转换为string类型,接收date类型
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date modifyTime;

//   将前端发送的string数据转换为date类型，输出date类型
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
//   将date类型转换为string类型,接收date类型
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date createTime;

    private static final long serialVersionUID = 1L;
}

5、配置yml文件


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

6、导入util包

JsonResponseParse ：

package com.lv.code.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.lv.code.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.lv.code.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.lv.code.util.response;

import java.io.Serializable;

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.lv.code.util.response;

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

}

7、新建mapper层

UserMapper.java:

package com.lv.code.mapper;

import com.lv.code.pojo.User;
import org.springframework.stereotype.Repository;
import tk.mybatis.mapper.common.Mapper;

@Repository
public interface UserMapper extends Mapper<User> {
    
}

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

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

9、新建service层

接口IuserService ：

package com.lv.code.service;


import com.lv.code.pojo.User;
import com.lv.code.util.response.ResponseResult;

public interface IuserService {

    ResponseResult<?> findUserByAccount(User user);

}

实现接口userServiceImpl ：

package com.lv.code.service.impl;

import com.lv.code.mapper.UserMapper;
import com.lv.code.pojo.User;
import com.lv.code.service.IuserService;
import com.lv.code.util.response.ResponseResult;
import com.lv.code.util.response.ResponseResultCode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
import tk.mybatis.mapper.entity.Example;


@Service
public class userServiceImpl implements IuserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public ResponseResult<?> findUserByAccount(User user) {
        if(StringUtils.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.lv.code.controller;

import com.lv.code.pojo.User;
import com.lv.code.service.IuserService;
import com.lv.code.util.response.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Async;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IuserService userService;

    @RequestMapping("/login")
    public ResponseResult<?> login(@RequestBody 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:"POST",
          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.account
        let label="user."+e.target.dataset.label
        this.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()
        })
    }

})

登录成功：

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

猜你喜欢

转载自blog.csdn.net/weixin_60389087/article/details/123385668
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022