微信小程序+SpringBoot+mybatis+MySQL实现简单的登录

您所在的位置：网站首页 › 微信小程序登录密码 › 微信小程序+SpringBoot+mybatis+MySQL实现简单的登录

微信小程序+SpringBoot+mybatis+MySQL实现简单的登录

2024-07-10 02:31| 来源: 网络整理| 查看: 265

当下微信小程序和springboot都是比较火的。今天我们来用springboot和微信小程序来实现简单的登录。 1.首先来完成微信小程序端，新建一个微信小程序。如果不会的可以查看我的上一篇文章开发微信小程序简易教程 2.我们在pages目录下新建一个login_test目录在这里插入图片描述 3.在login_test目录下新建一个名为login的Page。这样就会自动生成如下图几个文件 4.我们打开app.json文件，将"pages/login_test/login"这句话放到前面，目的是我们一打开就能看到这个，设置为首页。我们每在pages里新建一个都会在app.json里自动生成一个配置。 5.打开login.wxml文件编写页面在这里插入图片描述 6.接下来我们在login.js里面写逻辑了

// pages/login_test/login.js Page({ /** * 页面的初始数据 */ data: { username:'', password:'' }, input_name:function(e){ this.setData({ username:e.detail.value }) }, input_pwd: function (e) { this.setData({ password: e.detail.value }) }, submitButton:function(){ console.log("点击按钮!" + "获取到的用户名:" + this.data.username + "获取到的密码:" + this.data.password) var that = this; wx.request({ url: 'http://localhost:8080/login', method:'POST', header:{'content-type':'application/x-www-form-urlencoded'}, data:{ 'username': that.data.username, 'password': that.data.password }, success:function(res){ console.log("回调函数:"+res.data) var resData = res.data; if(resData == true){ wx.showToast({ title: '登录成功', duration:2000 }) }else{ wx.showToast({ title: '登录失败', duration:2000 }) } } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

7.编写好，这样微信端就算完成了。

接下来我们编写后台首先我们建一个数据库表在这里插入图片描述账号和密码分别为admin，admin 8.创建一个springboot项目。利用mybatis逆向工程生成对应的文件。不会mybatis逆向工程的看我之前的文章Mybatis逆向工程创建方法

9.Controller类

package com.springboot.controller; import com.springboot.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created by Administrator on 2018\9\8 0008. */ @RestController public class UserController { @Autowired private UserService userService; @RequestMapping("/login") public boolean login (String username, String password){ System.out.println ( "微信小程序调用接口！！！用户名:" + username + "密码:" + password ); boolean login = userService.login ( username, password ); if (login) { return true; } return false; } }

10.Service类

package com.springboot.service; public interface UserService { boolean login(String username,String password); }

11.实现Service类

package com.springboot.service; import com.springboot.dao.UserEntityMapper; import com.springboot.dao.entity.UserEntity; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class UserServiceImpl implements UserService{ @Autowired private UserEntityMapper userEntityMapper; @Override public boolean login(String username,String password){ UserEntity userEntity = new UserEntity (); userEntity.setUsername ( username ); userEntity.setPassword ( password ); UserEntity user = userEntityMapper.selectUser ( userEntity ); if (user != null){ return true; } return false; } }

12.Mapper类

UserEntity selectUser(UserEntity userEntity);

13.Mapper.xml

select * from user where username=#{username} and password=#{password}

14.这样就都写完啦。运行一下程序在微信端输入账号密码，我们先输入一个错的。账号123456密码123456

在这里插入图片描述运行结果：