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

分手后的思念是犯贱 2021-08-28 13:42 330阅读 0赞

点击上方 [Java后端][Java]，选择 设为星标

优质文章，及时送达

--------------------

项目描述：在微信小程序中通过与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.开发者服务器 #

项目结构：

![format_png][]

## 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>
    
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.42</version>
                <scope>runtime</scope>
            </dependency>
    
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.1.0</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
    
            
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.2.5</version>
            </dependency>
    
            
            <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 ##

![format_png 1][]

## 2.4 mapper ##

![format_png 2][]

## 2.5 service ##

![format_png 3][]

## 2.5 serviceImpl ##

![format_png 4][]

配置SpringBoot扫描mapper

![format_png 5][]

## 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. 微信小程序 #

项目结构：

![format_png 6][]

## 3.1 初始配置 ##

![format_png 7][]

## 3.2 bing.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>
    
                
            </form>
    
    </view>

## 3.3 bing.js ##

![format_png 8][]

## 3.3 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方法。

打开微信小程序开发者工具

登录页面

![format_png 9][]

首页

![format_png 10][]

添加页面

![format_png 11][]

修改页面

![format_png 12][]

删除

![format_png 13][]

到处基本的增删改查操作已经完成了

如有需要前往 Gitee（码云）下载

前台：https://gitee.com/ckfeng/applet\_of\_wechat.git

后台：https://gitee.com/ckfeng/wx\_login.git

作者：安详的苦丁茶

链接：cnblogs.com/ckfeng/p/12812214.html

--------------------

\-END-

如果看到这里，说明你喜欢这篇文章，请 转发、点赞。同时 标星（置顶）本公众号可以第一时间接受到博文推送。

**推****荐****阅****读**

***1. ***[笔记神器 Typora 终于支持图片上传了！][Typora]

***2. ***[这篇文章缕一缕 Java 集合框架][Java 1]

***3.*** [ConcurrentHashMap 原理分析][ConcurrentHashMap]

***4. ***[互联网大厂的薪资和职级一览][Link 1]

![format_png 14][]

[Java]: https://blog.csdn.net/qq_37217713/article/details/101445094
[format_png]: /images/20210730/21854eca79044c38b2f62907aa60ec13.png
[format_png 1]: /images/20210730/7680a8b789de4c049d75709376b0fb19.png
[format_png 2]: /images/20210730/76301e91733345568af512bb65f130ff.png
[format_png 3]: /images/20210730/f13fc6c0714e478daae42e24f7cdde6b.png
[format_png 4]: /images/20210730/25b4e642358d4529b9af250bda4ff152.png
[format_png 5]: /images/20210730/c0d9d42e6d1245dcaab1ccce75f0cd8b.png
[format_png 6]: /images/20210730/3673fa8d96e84ff9923621172f5ccda1.png
[format_png 7]: /images/20210730/e670d9e112034cd380d60cef7a27299e.png
[format_png 8]: /images/20210730/542963d41eda490c907ecfc1031525f3.png
[format_png 9]: /images/20210730/255de8bf34dc420d996d17e75678194f.png
[format_png 10]: /images/20210730/9742a2d51d394eebb33a8a21c7908ae3.png
[format_png 11]: /images/20210730/fec2c2614b944f0ba907ccd363252ef6.png
[format_png 12]: /images/20210730/026bdc5ec49c4764a294b6da01fbb80d.png
[format_png 13]: /images/20210730/9fe61c6eb0a240bc9829ac5d04c3cb54.png
[Typora]: https://blog.csdn.net/qq_37217713/article/details/105911632
[Java 1]: https://blog.csdn.net/qq_37217713/article/details/105911639
[ConcurrentHashMap]: https://blog.csdn.net/qq_37217713/article/details/105911633
[Link 1]: https://blog.csdn.net/qq_37217713/article/details/105885343
[format_png 14]: /images/20210730/2e488f8f3d474fc2896aec70d265401c.png