Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >手把手教你Spring Boot 整合微信小程序实现登录与增删改查

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

作者头像
业余草
发布于 2020-05-18 08:06:58
发布于 2020-05-18 08:06:58
11K1
举报
文章被收录于专栏:业余草业余草

知道的越多,不知道的就越多,业余的像一棵小草!

编辑:业余草 来源:https://www.xttblog.com/?p=4998

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

代码语言:javascript
AI代码解释
复制
 <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

代码语言:javascript
AI代码解释
复制
# 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 小程序用户表

代码语言:javascript
AI代码解释
复制
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

代码语言:javascript
AI代码解释
复制
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

代码语言:javascript
AI代码解释
复制
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

代码语言:javascript
AI代码解释
复制
<!--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

代码语言:javascript
AI代码解释
复制
<!--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

代码语言:javascript
AI代码解释
复制
// 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

代码语言:javascript
AI代码解释
复制
{ "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方法。

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

登录页面

首页

添加页面

修改页面

删除

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/05/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
作者大大你好,能提供一下operation的代码吗?不太清楚增加和编辑是怎么实现的
作者大大你好,能提供一下operation的代码吗?不太清楚增加和编辑是怎么实现的
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
超简单!手把手教你微信小程序开发【前端+后端】Java版
在师长看来,小程序依靠微信的独霸全国的十亿流量,只会越来越火。相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。
java进阶架构师
2021/12/21
3.7K0
超简单!手把手教你微信小程序开发【前端+后端】Java版
微信小程序开发【前端+后端(Java)】
现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。
Java团长
2021/01/20
22.3K0
微信小程序开发【前端+后端(Java)】
Spring Boot入门系列(十八)mybatis 使用注解实现增删改查,无需xml文件!
之前介绍了Spring Boot 整合mybatis 使用xml配置的方式实现增删改查,还介绍了自定义mapper 实现复杂多表关联查询。虽然目前 mybatis 使用xml 配置的方式 已经极大减轻了配置的复杂度,支持 generator 插件 根据表结构自动生成实体类、配置文件和dao层代码,减轻很大一部分开发量;但是 java 注解的运用发展到今天。约定取代配置的规范已经深入人心。开发者还是倾向于使用注解解决一切问题,注解版最大的特点是具体的 SQL 文件需要写在 Mapper 类中,取消了 Mapper 的 XML 配置 。这样不用任何配置文件,就可以简单配置轻松上手。所以今天就介绍Spring Boot 整合mybatis 使用注解的方式实现数据库操作 。
章为忠学架构
2020/08/25
3.2K0
Spring Boot入门系列(十八)mybatis 使用注解实现增删改查,无需xml文件!
Spring boot Mybatis 整合(完整版)
7.项目不使用application.properties文件 而使用更加简洁的application.yml文件: 将原有的resource文件夹下的application.properties文件删除,创建一个新的application.yml配置文件, 文件的内容如下:
全栈程序员站长
2022/08/10
5500
Spring boot Mybatis 整合(完整版)
Spring Boot入门系列(六)Spring Boot整合Mybatis「附详细步骤」
前面介绍了Spring Boot 中的整合Thymeleaf前端html框架,同时也介绍了Thymeleaf 的用法。
章为忠学架构
2020/03/19
1.3K0
基于 SpringBoot 的 Restful 风格实现增删改查功能(附源码)
在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便、快捷。但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练。不过在看了很多关于SpringBoot的介绍之后,并没有想象中的那么难,于是开始准备学习SpringBoot。
好好学java
2019/08/29
1.7K0
基于 SpringBoot 的 Restful 风格实现增删改查功能(附源码)
微信小程序练手实战:前端+后端(Java)
现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。
二哥聊运营工具
2021/12/17
2.4K0
微信小程序练手实战:前端+后端(Java)
(带界面)SpringBoot整合PageHelper实现分页
在我们的业务开发中,查询出的数据可能成千上万条,如果将大量数据一次性全部展示给客户,不仅会照成性能问题,也会会造成很不好的用户体验,界面延迟展示、界面过长等问题。而且用户大概率也不会想一次性得到全部的数据,在这种情况下我们就应该使用分页来分批次展示数据了。主流数据库也为我们提供了相应的分页功能,比如mysql的limit。
东边的大西瓜
2022/05/05
9340
(带界面)SpringBoot整合PageHelper实现分页
Springboot+html5+mysql的CRUD增删改查(基础版本详细,附带源码)
后台写的总体分为两个部分 第一部分:纯后台的代码实现CRUD(增删改查) 第二部分:前后端交互实现CRUD(增删改查)
默 语
2024/11/20
5080
Springboot+html5+mysql的CRUD增删改查(基础版本详细,附带源码)
MyBatis初级实战之二:增删改查
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇要练习的内容如下: 单表的增删改查 批量新增 联表查询 全文由以下部分组成: 新建工程 增加启动类 增加swagger的配置类,工程包含了swagger,以便稍后在浏览器上验证 增加配置文件 增加实体类 增加mapper配置文件 增加mapper接口 增加service,调用mapper接口 增加controller,调用service服务 编写单元
程序员欣宸
2021/06/04
7300
MyBatis初级实战之二:增删改查
SpringBoot整合Mybatis增删改查
本文仅仅展示简单的整合和使用,存在不规范等诸多问题。 真正开发中也离不开动态SQL Mybatis 动态 SQL
乐心湖
2020/07/31
1.8K0
SpringBoot整合Mybatis增删改查
SpringBoot整合Mybatis实现增删改查的功能
本文主要介绍了如何通过SpringBoot和Mybatis实现CRUD操作,以及如何使用MyBatis与SpringBoot的整合。同时,还提供了代码示例和详细的注释说明。
林老师带你学编程
2018/01/04
9.4K1
SpringBoot整合Mybatis实现增删改查的功能
真实项目,用微信小程序开门编码实现(完结)
作为一个前后端都要自己写的软件,我习惯于先从后端开始,后端先从数据库开始。
阿提说说
2022/12/02
1K0
Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越简单越容易上手最好。
纯洁的微笑
2019/08/20
8330
Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
Spirng Boot整合Mybatis实现增删改查案例-注解版
这里不仅整合了Mybatis,还集成了Druid连接池。观察上面的依赖,我还加入了lombok插件依赖,这个已经被集成到了Spring Boot中,它可以动态地生成实体类的getter和setter等方法,使得实体类更加简洁,继续往下看,你会发现我的实体类没有getter和setter等方法,那是因为我加入了@Data注解,它会运行是创建getter和setter等方法。不明白的可以百度搜索一下lombok的用法,在使用它的时候,你的IDE必须得安装它的插件,如果你嫌麻烦,直接手动删除依赖,删除实体类的@Data注解,使用IDE生成getter和setter等方法。
itlemon
2020/04/03
8290
Spring Boot 2.X(三):使用 Spring MVC + MyBatis + Thymeleaf 开发 web 应用
Spring MVC 是构建在 Servlet API 上的原生框架,并从一开始就包含在 Spring 框架中。本文主要通过简述 Spring MVC 的架构及分析,并用 Spring Boot + Spring MVC + MyBatis (SSM)+ Thymeleaf(模板引擎) 框架来简单快速构建一个 Web 项目。
朝雾轻寒
2019/10/18
1.5K1
Spring Boot 2.X(三):使用 Spring MVC + MyBatis + Thymeleaf 开发 web 应用
【前端系列-2】layui+springboot实现表格增删改查
本文将演示如何使用Springboot(后端框架)和layui(前端框架)将数据库中的数据渲染到前端页面,以及对前端页面的数据实现增删改。
云深i不知处
2020/09/16
7.2K0
IDEA SpringBoot整合Mybatis实现增删改查操作
首先点击web选择spring web,再点击SQL选择MySQL driver 等,然后再一路next到新建完成。
全栈程序员站长
2022/09/07
8030
IDEA SpringBoot整合Mybatis实现增删改查操作
使用idea快速实现spring boot(1.5*版本) 与mybatis的整合
7.项目不使用application.properties文件 而使用更加简洁的application.yml文件: 将原有的resource文件夹下的application.properties文件删除,创建一个新的application.yml配置文件, 文件的内容如下:
凯哥Java
2019/06/30
3.3K0
完整的SpringBoot+Vue增删改查(学生管理)
md文档可在点击下方小卡片获取! 1.搭建环境 1.1 创建项目 创建项目:exam-student-vue 1.2 添加坐标 <parent> <groupId>org.springframework.bootgroupId> <artifactId>spring-boot-starter-parentartifactId> <version>2.1.6.RELEASEversion> <relativePath/>
Maynor
2021/12/06
7.7K1
完整的SpringBoot+Vue增删改查(学生管理)
推荐阅读
相关推荐
超简单!手把手教你微信小程序开发【前端+后端】Java版
更多 >
领券
社区新版编辑器体验调研
诚挚邀请您参与本次调研,分享您的真实使用感受与建议。您的反馈至关重要,感谢您的支持与参与!
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
首页
学习
活动
专区
圈层
工具
MCP广场
首页
学习
活动
专区
圈层
工具
MCP广场