項目描述：在微信小程式中通過與Springboot操作資料庫實現登錄驗證，其中我是用springboot整合mybatis-plus 和mysql操作資料庫 1. 開發前準備 1.1 前置知識 java基礎 SpringBoot簡單基礎知識 1.2 環境參數開發工具：IDEA 基礎環境：Maven ...

項目描述：在微信小程式中通過與Springboot操作資料庫實現簡單的增刪改查，其中我是用springboot整合mybatis-plus 和mysql使用的

1. 開發前準備

1.1 前置知識

java基礎
SpringBoot簡單基礎知識

1.2 環境參數

開發工具：IDEA
基礎環境：Maven+JDK8
所用技術：SpringBoot、lombok、mybatis-plus、mysql 、微信小程式
SpringBoot版本：2.2.6

2.開發者伺服器

項目結構：

2.1 初始配置

（1）pom.xml配置

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

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>

        <!--模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- 引入阿裡資料庫連接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.14</version>
        </dependency>

        <!-- mysql依賴-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.42</version>
            <scope>runtime</scope>
        </dependency>

        <!-- mybatisPlus 核心庫 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.0</version>
        </dependency>


        <!--生成實體成get set-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- pagehelper 分頁插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

        <!--junit 測試-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

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

</project>

（2）application.yml

# Spring Boot 的數據源配置
spring:
  datasource:
    name: wx
    url: jdbc:mysql://localhost:3306/wx_mini_program?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: root
    # 使用druid數據源
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    filters: stat
    maxActive: 20
    initialSize: 1
    maxWait: 60000
    minIdle: 1
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: select 'x'
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    maxPoolPreparedStatementPerConnectionSize: 20
    maxOpenPreparedStatements: 20

# mybatis-plus相關配置
mybatis-plus:
  # xml掃描，多個目錄用逗號或者分號分隔（告訴 Mapper 所對應的 XML 文件位置）
  mapper-locations: classpath:mapper/*.xml
  # 以下配置均有預設值,可以不設置
  global-config:
    db-config:
      #主鍵類型 AUTO:"資料庫ID自增" INPUT:"用戶輸入ID",ID_WORKER:"全局唯一ID (數字類型唯一ID)", UUID:"全局唯一ID UUID";
      id-type: auto
      #欄位策略 IGNORED:"忽略判斷"  NOT_NULL:"非 NULL 判斷")  NOT_EMPTY:"非空判斷"
      field-strategy: NOT_EMPTY
      #資料庫類型
      db-type: MYSQL

  # 指定實體類的包
  type-aliases-package: com.ckf.login_wx.entity
  configuration:
    # 是否開啟自動駝峰命名規則映射:從資料庫列名到Java屬性駝峰命名的類似映射
    map-underscore-to-camel-case: true
    # 如果查詢結果中包含空值的列，則 MyBatis 在映射的時候，不會映射這個欄位
    call-setters-on-nulls: true
    # 這個配置會將執行的sql列印出來，在開發或測試的時候可以用
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl


# PageHelper分頁插件
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql

2.2 小程式用戶表

CREATE table users(
 id int not null PRIMARY key auto_increment,
 name varchar(255) not null,
 age int not null

);

insert into users value(null,'陳克鋒',18);
insert into users value(null,'陳克帥',11);
insert into users value(null,'陳克兵',14);

select * from users;

2.3 pojo

2.4 mapper

2.5 service

2.5 serviceImpl

配置SpringBoot掃描mapper

2.6 controller

LoginController

package com.ckf.login_wx.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

/**
 * @author 安詳的苦丁茶
 * @date 2020/4/30 11:46
 */

@RestController
public class LoginController {

    /**
     * 登錄
     * @param phone
     * @param password
     * @return
     */
    @PostMapping("/doLogin")
    public Map doLogin(String phone, String password){
        Map map = new HashMap();
        if ((phone.equals("10086")&& password.equals("123456"))){
            map.put("code",200);
            map.put("result","登錄成功");
            System.out.println("登錄成功");
        }else {
            map.put("result","no");
        }
        return map;
    }

}

UserController

package com.ckf.login_wx.controller;

import com.ckf.login_wx.entity.User;
import com.ckf.login_wx.servic.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * @author 安詳的苦丁茶
 * @date 2020/4/30 13:39
 */
@RestController
@RequestMapping("/test")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 查詢全部
     * @return
     */
    @GetMapping("/list")
    public Object list(){
        System.out.println("查詢成功");
        return userService.list();
    }

    /**
     * 根據id刪除
     * @param id
     * @return
     */
    @GetMapping("/delete")
    public boolean delete(Integer id){
        System.out.println("刪除成功");
        return userService.removeById(id);
    }

    /**
     *  根據id查詢
      * @param id
     * @return
     */
    @GetMapping("/byid")
    public Object byid(Integer id){
        System.out.println("查詢成功");
        return userService.getById(id);
    }

    /**
     *  修改
     * @param user
     * @return
     */
    @PostMapping("/update")
    public boolean update(@RequestBody User user){
        System.out.println("修改成功");
        return userService.updateById(user);
    }

    /**
     * 添加
     * @param user
     * @return
     */
    @PostMapping("/add")
    public boolean add(@RequestBody User user){
        System.out.println("添加成功");
        return userService.save(user);
    }

}

3. 微信小程式

項目結構：

3.1 初始配置

3.2 bing.wxml

<!--pages/bind/bind.wxml-->
<view>

  <form bindsubmit='doLogin'>
            <!--賬號-->
            <view class="inputView">
              
                <label class="loginLabel">賬號</label>
                <input name="phone" value='10086' class="inputText" placeholder="請輸入賬號" />
            </view>
            <view class="line"></view>

            <!--密碼-->
            <view class="inputView">
                
                <label class="loginLabel">密碼</label>
                <input name="password" value='123456' class="inputText" password="true" placeholder="請輸入密碼" />
            </view>
            <view class="line"></view>
            <!--按鈕-->
            <view class='backColor'>
                <button class="loginBtn" formType="submit"  open-type='getUserInfo' >登錄</button>
            </view>

            <!-- <view>
                <button class="goRegistBtn" type="warn" open-type='getUserInfo' bindgetuserinfo='doLogin'>微信登錄</button>
            </view> -->
        </form>

</view>

3.3 bing.js

3.3 list.wxml

<!--pages/list/list.wxml-->
  <button class="add" type='primary' bindtap='addArea'>添加</button>
<view class="container">
  <view class='widget'>
    <text class='column'>編號</text>
    <text class='column'>姓名</text>
    <text class='column'>年齡</text>
    <text class='link-column'>操作</text>
  </view>
  <scroll-view scroll-y="true">
    <view>
      <block wx:for='{{list}}'>
      <view class='widget'> 
        <text class='column'>{{item.id}}</text>
        <text class='column'>{{item.name}}</text>
         <text class='column'>{{item.age}}</text>
        <view class='link-column'>
          <navigator class='link' url='../operation/operation?id={{item.id}}'>編輯</navigator> |
          <text class='link' bindtap='deleteArea' data-areaid='{{item.id}}' data-areaname='{{item.name}}' data-index='{{index}}'>刪除</text>  
        </view>
        </view>      
      </block>
    </view>
  </scroll-view>

</view>

3.4 list.js

// pages/list/list.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    list:[]
  },

  /**
   * 生命周期函數--監聽頁面載入
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    var that=this;
    wx.request({
      url: 'http://localhost:8080/test/list',
      method:'GET',
      data:{},
      success:function(res){
        var list=res.data;
        if(list==null){
          var toastText='獲取數據失敗';
          wx.showToast({
            title: toastText,
            icon:'',
            duration:2000 //彈出時間
          })
        }else{
          that.setData({
            list:list
          })
        }
      }
    })
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  },
  addArea:function(){
    wx.navigateTo({
      url:'../operation/operation'
    })
  },
  deleteArea: function (e) {
    var that=this;
    wx.showModal({
      title: '提示',
      content: '確定要刪除[' + e.target.dataset.areaname +']嗎？',
      success:function(sm){
        if(sm.confirm){
          wx.request({
            url: 'http://localhost:8080/test/delete',
            data: { id: e.target.dataset.areaid},
            method:'GET',
            success:function(res){

              var result=res.statusCode;
              var toastText="刪除成功";
              if(result!=200){
                toastText = "刪除失敗";
              }else{
                that.data.list.splice(e.target.dataset.index,1);
                that.setData({
                  list:that.data.list
                });
              }
              wx.showToast({
                title: toastText,
                icon:'',
                duration:2000
              });
            }
          })
        }
      }
    })

    
  }
})

3.5 app.json

{
  "pages": [
    "pages/bind/bind",
    "pages/list/list",
    "pages/logs/logs",
    "pages/operation/operation",
    "pages/index/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#29d",
    "navigationBarTitleText": "login",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

4. 測試

啟動開發者伺服器，啟動SpringBoot的main方法。

打開微信小程式開發者工具

登錄頁面

首頁

添加頁面

修改頁面

刪除

到處基本的增刪改查操作已經完成了

如有需要前往 Gitee（碼雲）下載

前臺：https://gitee.com/ckfeng/applet_of_wechat.git

後臺：https://gitee.com/ckfeng/wx_login.git

springboot整合微信小程式實現登錄與增刪改查