草庐IT

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

落日飞行 2025-05-19 原文

目录

一、小程序交互

前端:

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

2、在前端中编写js代码

后端:

          1、先导入依赖:

          2、定义好配置文件

          3、编写好实体类

          4、将帮助类进行配置

          5、编写mapper类

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

          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}实现自定义快速返回
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);
    }

}

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       响应数据
     */
    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);
    }

}

4、响应编码类:


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

}

 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层以及对应的实现接口层

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、进行测试

 输入账号和密码进行登录

 成功!

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

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

有关微信小程序开发之微信小程序交互的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  2. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行? - 2

    这可能是个愚蠢的问题。但是,我是一个新手......你怎么能在交互式ruby​​shell中有多行代码?好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗?再次抱歉,如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  5. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反? - 2

    这似乎非常适得其反,因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误,一个名为UnixSocket的类显然在Windows机器上不能正常工作,等等)。我只是在浪费时间吗?我应该转向不同的脚本语言吗? 最佳答案 我在Windows上使用Ruby的经验很少,但是当我开始使用Ruby时,我是在Windows上,我的总体印象是它不是Windows原生系统。因此,在主要使用Windows多年之后,开始使用Ruby促使我切换回原来的系统Unix,这次是Linux。Rub

  6. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  8. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  9. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

随机推荐