[微信小程序] 学习笔记2--前后端交互，实现简单的登录功能

最新推荐文章于 2024-04-24 15:21:56 发布

animalcoder

最新推荐文章于 2024-04-24 15:21:56 发布

阅读量6.2k

点赞数 15

分类专栏：微信小程序文章标签：小程序 springboot

本文链接：https://blog.csdn.net/animalcoder/article/details/101264007

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

环境：win7+IDEA2019.2.1 +微信开发者工具

前端：微信小程序

后端：springboot+mybatis+MySQL+navicat

功能：输入账号密码登录，成功返回上一页，失败显示登陆失败

思路：

1.小程序传数据X到后台。

2.后台将X与数据库判断账号密码是否一致。

3.后台将结果(true/false)传回小程序，根据这不同的结果编写不同的逻辑。

效果如下图：

首页->点击头像跳转到登录界面->if登录成功->返回到首页; if登录失败->留在原地

实现步骤：

1.后台搭建：

1.1spring initializr创建新项目：

next两下，然后添加如下图依赖，加少了也可以在pom.xml补上

1.2.进去之后，我们先来感受下最后的项目结构图，先将红色字的文件&文件夹补上

1.3. 新建wxtest数据库建表tb_users：然后自己随便添加数据，这里就不搞加密盐了

1.4.补充各红色部分的代码

application.properties 配置端口，数据库地址等

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=自己填
spring.datasource.password=自己填
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
mybatis.typeAliasesPackage=com.example.demo.demain
mybatis.mapperLocations=classpath:mapper/*.xml
logging.level.com.example.fuckspringboot:DEBUG
server.port=8084

实体类User

package com.example.demo.domain;

import lombok.ToString;

import java.util.Date;
@ToString
public class Users {
    private Integer user_id;

    private String user_name;

    private String user_pwds;

    private Date user_times;

    private String user_images;

    public Users(Integer user_id, String user_name, String user_pwds, Date user_times, String user_images) {
        this.user_id = user_id;
        this.user_name = user_name;
        this.user_pwds = user_pwds;
        this.user_times = user_times;
        this.user_images = user_images;
    }

    public Users() {
        super();
    }

    public Integer getUser_id() {
        return user_id;
    }

    public void setUser_id(Integer user_id) {
        this.user_id = user_id;
    }

    public String getUser_name() {
        return user_name;
    }

    public void setUser_name(String user_name) {
        this.user_name = user_name;
    }

    public String getUser_pwds() {
        return user_pwds;
    }

    public void setUser_pwds(String user_pwds) {
        this.user_pwds = user_pwds;
    }

    public Date getUser_times() {
        return user_times;
    }

    public void setUser_times(Date user_times) {
        this.user_times = user_times;
    }

    public String getUser_images() {
        return user_images;
    }

    public void setUser_images(String user_images) {
        this.user_images = user_images;
    }
}

DAO UsersMapper接口，补上查找用户的函数findAllUsers()

package com.example.demo.mapper;

import com.example.demo.domain.Users;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface UsersMapper {
    Users findAllUsers(Users users);
}

UsersMapper.xml 与数据库打交道,findAllUsers()的真正实现处(select)

注意1. 第4行的namespace 里要绑定自己的 UsersMapper接口路径

2. 第6行的type绑定自己的Users实体类路径

3. 一般来说什么Field找不到bean,无法create bean的报错啊，就是xml没写对

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.mapper.UsersMapper">

    <resultMap id="BaseResultMap" type="com.example.demo.domain.Users" >
        <constructor >
            <idArg column="user_id" jdbcType="INTEGER" javaType="java.lang.Integer" />
            <arg column="user_name" jdbcType="VARCHAR" javaType="java.lang.String" />
            <arg column="user_pwds" jdbcType="VARCHAR" javaType="java.lang.String" />
            <arg column="user_times" jdbcType="TIMESTAMP" javaType="java.util.Date" />
            <arg column="user_images" jdbcType="VARCHAR" javaType="java.lang.String" />
        </constructor>
    </resultMap>
    <sql id="Base_Column_List" >
    user_id, user_name, user_pwds, user_times, user_images
  </sql>
    <select id="findAllUsers" resultMap="BaseResultMap" parameterType="com.example.demo.domain.Users">
    select * from tb_users where 1=1 and user_name = #{user_name} and user_pwds = #{user_pwds}
  </select>

</mapper>

服务类接口： IUserService 定义登录login函数

package com.example.demo.Service;

public interface IUserService {
    boolean login(String user_name,String user_pwds);
}

服务类实现：UserServiceImpl 实现login函数后台业务功能一般都写在这类。

select找得到，说明账号密码匹配上了，返回true。记得标上注解@Service

package com.example.demo.Service.Impl;

import com.example.demo.Service.IUserService;
import com.example.demo.domain.Users;
import com.example.demo.mapper.UsersMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    private UsersMapper usersMapper;

    @Override
    public boolean login(String user_name, String user_pwds) {
        Users users = new Users();
        users.setUser_name(user_name);
        users.setUser_pwds(user_pwds);
        Users allUsers = this.usersMapper.findAllUsers(users);
        if (allUsers != null){
            return true;
        }
        return false;
    }
}

控制类：IndexController 小程序前端会传数据X到控制类

控制类利用此数据X，调用服务类的login()，并将结果返回到小程序

package com.example.demo.Controller;

import com.example.demo.Service.IUserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class IndexController {
    //logintest小程序的后台


    @Autowired
    private IUserService userService;

    @RequestMapping("/login")
    public boolean login(String user_name,String user_pwds){
        System.out.println("用户名："+user_name+"  ....用户密码："+user_pwds);
        boolean login = this.userService.login(user_name, user_pwds);
        System.out.println(login);
        if (login){
            return true;
        }
        return false;
    }

    @RequestMapping("/count")
    public Integer count(Integer t1,Integer t2){
        Integer t3=t1+t2;
        System.out.println("a："+t1+"  ....b："+t2);
        return t3;
    }

}

1.5运行后台

看到如下图就说明后台搭好了

如果报错，看xml有没有写对，看配置文件有没有写对，看注解有没有漏了，会不会有的依赖加载不上，比如公司网络不好就会加载不到某些插件。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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </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>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.前台搭建

2.1申请小程序账号，拿到自己小程序的appID，这步在小程序官网上完成，

下载微信开发者工具然后新建一个小程序,发现自带一个index页面

右键新建Page,名为logins,使得项目结构如下图

2.2 app.json 中绑定我们的登录界面路径

2.3 logins.wxml

<view class="weui-cells weui-cells_after-title">
    <view class="weui-cell ">
        <view class="weui-cell__hd">
            <view class="weui-label">账号</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="name" bindinput="input_name" type="text"/>
        </view>
    </view>
    <view class="weui-cell ">
        <view class="weui-cell__hd">
            <view class="weui-label">密码</view>
        </view>
        <view class="weui-cell__bd">
            <input placeholder="password" bindinput="input_pwds" type="password"/>
        </view>
    </view>
</view>
<button type="primary" bindtap="btns">login</button>

2.4 logins.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //定义初始化变量值
    user_name: '',
    user_pwds: '',
    t1:'',
    t2:'',
    ans:'',
    dayStyle: [
      { month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' },
      { month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5' }
    ]
  },
  //获取用户名的值并将值赋给最先定义的初始化变量
  input_name: function (e) {
    this.setData({ user_name: e.detail.value })
  },
  //跟上面一样
  input_pwds: function (e) {
    this.setData({ user_pwds: e.detail.value })
  },
  input_t1: function (e) {
    this.setData({ t1: e.detail.value })
  },
  //跟上面一样
  input_t2: function (e) {
    this.setData({ t2: e.detail.value })
  },

  

  /**
   * 点击登录按钮时间
   */
  btns: function () {
    console.log("登录获取的参数：" + this.data.user_name + "," + this.data.user_pwds)
    var that = this;
    wx.request({  //记得这个URL如果你没有域名的话  不改东西的话是会报错的
      url: 'http://localhost:8084/login',  //请求的URL
      method: 'POST',                                        //提交方式
      header: { 'content-type': 'application/x-www-form-urlencoded' }, //设置请求的
      data: {
        'user_name': that.data.user_name,
        'user_pwds': that.data.user_pwds
      },  //请求参数
      success: function (res) {   //接受后台的回调函数
        var resData = res.data;
        console.log("???:"+resData);
        if (resData == true) {
          wx.showToast({    //这是微信小程序里面自带的成功弹窗
            title: '登录成功',  //弹窗里面的内容
            icon: 'success',  //图标
            duration: 15000,   //弹窗延迟的时间
            success: function () {
              wx.navigateTo({  //保留当前页面，跳转到应用内的某个页面
                url: '../index/index',   //跳转的页面
              })
            }
          })
        } else {
          wx.showToast({
            title: '登录失败',
            icon: 'none',
            duration: 2000,
          })
        }
      }
    })
  },
  
 






  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2.5 在index.js中改这一行代码，使得点击头像跳到登录界面

wxss那块用了weui,不用不影响功能，最后得把详情->本地配置->不检验非法域名勾上。

完成！

animalcoder

关注

15
点赞
踩
89

收藏

觉得还不错? 一键收藏
2
评论
[微信小程序] 学习笔记2--前后端交互，实现简单的登录功能

环境：win7+IDEA2019.2.1 +微信开发者工具前端：微信小程序后端：springboot+mybatis+MySQL+navicat功能：输入账号密码登录，成功返回上一页，失败显示登陆失败思路： 1.小程序传数据X到后台。 2.后台将X与数据库判断账号密码是否一致。 3.后台将结果(true/fal...
复制链接

扫一扫