微信小程式+SpringBoot+mybatis+MySQL實現簡單的登入

當下微信小程式和springboot都是比較火的。今天我們來用springboot和微信小程式來實現簡單的登入。
1.首先來完成微信小程式端，新建一個微信小程式。
如果不會的可以檢視我的上一篇文章開發微信小程式簡易教程
2.我們在pages目錄下新建一個login_test目錄

3.在login_test目錄下新建一個名為login的Page。這樣就會自動生成如下圖幾個檔案

4.我們開啟app.json檔案，將"pages/login_test/login"這句話放到前面，目的是我們一開啟就能看到這個，設定為首頁。

// 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
執行如下

大功告成!!!