> 本文一把大部分源码罗列出来了,收录至我的GitHub精选文章,欢迎Star: https://github.com/Java-Ling/Java-Interview-guide

项目描述:在微信小程序中通过与Springboot操作数据库实现简单的增删改查,其中我是用springboot整合mybatis-plus 和mysql使用的

1. 开发前准备

1.1 前置知识

1.2 环境参数

2.开发者服务器

项目结构:

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(1)

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> <!--生成实体成getset--> <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

#SpringBoot的数据源配置 spring: datasource: name:wx url:jdbc:mysql://localhost:3306/wx_mini_program?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT+8 username:root password:root #使用druid数据源 type:com.alibaba.druid.pool.DruidDataSource driver-class-name:com.mysql.jdbc.Driver filters:stat maxActive:20initialSize:1maxWait:60000minIdle:1timeBetweenEvictionRunsMillis:60000minEvictableIdleTimeMillis:300000validationQuery:select'x'testWhileIdle:truetestOnBorrow:falsetestOnReturn:falsepoolPreparedStatements:truemaxPoolPreparedStatementPerConnectionSize:20maxOpenPreparedStatements: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:"全局唯一IDUUID"; 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 小程序用户表

CREATEtableusers( idintnotnullPRIMARYkeyauto_increment, namevarchar(255)notnull, ageintnotnull); insertintousersvalue(null,'陈克锋',18); insertintousersvalue(null,'陈克帅',11); insertintousersvalue(null,'陈克兵',14);select*fromusers;

2.3 pojo

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(2)

2.4 mapper

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(3)

2.5 service

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(4)

2.5 serviceImpl

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(5)

配置SpringBoot扫描mapper

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(6)

2.6 controller

LoginController

packagecom.ckf.login_wx.controller; importorg.springframework.web.bind.annotation.PostMapping; importorg.springframework.web.bind.annotation.RestController; importjava.util.HashMap; importjava.util.Map;/** *@author安详的苦丁茶 *@date2020/4/3011:46*/@RestControllerpublicclassLoginController{/** *登录 *@paramphone *@parampassword *@return*/@PostMapping("/doLogin")publicMapdoLogin(Stringphone,Stringpassword){ Mapmap=newHashMap();if((phone.equals("10086")&&password.equals("123456"))){ map.put("code",200); map.put("result","登录成功"); System.out.println("登录成功"); }else{ map.put("result","no"); }returnmap; } }

UserController

packagecom.ckf.login_wx.controller; importcom.ckf.login_wx.entity.User; importcom.ckf.login_wx.servic.UserService; importorg.springframework.beans.factory.annotation.Autowired; importorg.springframework.web.bind.annotation.*;/** *@author安详的苦丁茶 *@date2020/4/3013:39*/@RestController @RequestMapping("/test")publicclassUserController{ @AutowiredprivateUserServiceuserService;/** *查询全部 *@return*/@GetMapping("/list")publicObjectlist(){ System.out.println("查询成功");returnuserService.list(); }/** *根据id删除 *@paramid *@return*/@GetMapping("/delete")publicbooleandelete(Integerid){ System.out.println("删除成功");returnuserService.removeById(id); }/** *根据id查询 *@paramid *@return*/@GetMapping("/byid")publicObjectbyid(Integerid){ System.out.println("查询成功");returnuserService.getById(id); }/** *修改 *@paramuser *@return*/@PostMapping("/update")publicbooleanupdate(@RequestBodyUseruser){ System.out.println("修改成功");returnuserService.updateById(user); }/** *添加 *@paramuser *@return*/@PostMapping("/add")publicbooleanadd(@RequestBodyUseruser){ System.out.println("添加成功");returnuserService.save(user); } }

3. 微信小程序

项目结构:

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(7)

3.1 初始配置

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(8)

3.2 bing.wxml

<!--pages/bind/bind.wxml--> <view> <formbindsubmit='doLogin'> <!--账号--> <viewclass="inputView"> <labelclass="loginLabel">账号</label> <inputname="phone"value='10086'class="inputText"placeholder="请输入账号"/> </view> <viewclass="line"></view> <!--密码--> <viewclass="inputView"> <labelclass="loginLabel">密码</label> <inputname="password"value='123456'class="inputText"password="true"placeholder="请输入密码"/> </view> <viewclass="line"></view> <!--按钮--> <viewclass='backColor'> <buttonclass="loginBtn"formType="submit"open-type='getUserInfo'>登录</button> </view> <!--<view> <buttonclass="goRegistBtn"type="warn"open-type='getUserInfo'bindgetuserinfo='doLogin'>微信登录</button> </view>--> </form> </view>

3.3 bing.js

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(9)

3.3 list.wxml

<!--pages/list/list.wxml--> <buttonclass="add"type='primary'bindtap='addArea'>添加</button> <viewclass="container"> <viewclass='widget'> <textclass='column'>编号</text> <textclass='column'>姓名</text> <textclass='column'>年龄</text> <textclass='link-column'>操作</text> </view> <scroll-viewscroll-y="true"> <view> <blockwx:for='{{list}}'> <viewclass='widget'> <textclass='column'>{{item.id}}</text> <textclass='column'>{{item.name}}</text> <textclass='column'>{{item.age}}</text> <viewclass='link-column'> <navigatorclass='link'url='../operation/operation?id={{item.id}}'>编辑</navigator>| <textclass='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(){varthat=this; wx.request({ url:'http://localhost:8080/test/list', method:'GET', data:{}, success:function(res){varlist=res.data;if(list==null){vartoastText='获取数据失败'; 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){varthat=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){varresult=res.statusCode;vartoastText="删除成功";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方法。

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

登录页面

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(10)

首页

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(11)

添加页面

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(12)

修改页面

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(13)

删除

微信小程序与springboot数据交互(手把手教你SpringBoot整合微信小程序实现登录与增删改查)(14)

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

,