Springboot整合微信小程序实现登录与增删改查

项目描述：在微信小程序中通过与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