微信小程序+SpringBoot+mybatis+MySQL实现简单的登录
当下微信小程序和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 id="selectUser" parameterType="com.springboot.dao.entity.UserEntity" resultMap="BaseResultMap">
select * from user where username=#{username} and password=#{password}
</select>
14.这样就都写完啦。运行一下程序
在微信端输入账号密码,我们先输入一个错的。账号123456密码123456
运行结果:
我们输入正确的账号密码,账号admin,密码admin
运行如下
大功告成!!!