当前位置：移动技术网 > IT编程>开发语言>Java > Springboot整合微信小程序实现登录与增删改查

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

2020年05月01日 | 移动技术网IT编程 | 我要评论

电子新闻,稼穑的读音,挑逗奥特曼怪兽版

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

JAVA中4种解析XML文件的方法

xml是一种通用的数据交换格式,它的平台无关性、语言无关性、系统无关性、给数据集成与交互带来了极大的方便。xml在不同的语言环境中解析方式都是一样的,只不过实现... [阅读全文]
快速了解JAVA中的Random()函数

java中存在着两种random函数：一、java.lang.math.random;　　调用这个math.random()函数能够返回带正号的double值，... [阅读全文]
JAVA.io读写文件方式汇总

一、java把这些不同来源和目标的数据都统一抽象为数据流。　　java语言的输入输出功能是十分强大而灵活的。　　在java类库中，io部分的内容是很庞大的，因为... [阅读全文]
SpringBoot加载应用事件监听器代码实例

利用 spring 工厂加载机制，实例化 applicationlistener 实现类，并排序对象集合创建应用事件监听器创建类实现接口applicationl... [阅读全文]
详解JAVA中接口的定义和接口的实现

1.接口的定义使用interface来定义一个接口。接口定义同类的定义类似，也是分为接口的声明和接口体，其中接口体由常量定义和方法定义两部分组成。定义接口的基本... [阅读全文]
SpringBoot上下文初始器加载过程详解

利用 spring 工厂加载机制，实例化 applicationcontextinitializer 实现类，并排序对象集合。关键方法private <t... [阅读全文]
深入了解JAVA Jersey框架

java jersey的详情概述jersey是一个restful请求服务java框架，与常规的java编程使用的struts框架类似，它主要用于处理业务逻辑层。... [阅读全文]
apollo与springboot集成实现动态刷新配置的教程详解

分布式apollo简介apollo（阿波罗）是携程框架部门研发的开源配置管理中心，能够集中化管理应用不同环境、不同集群的配置，配置修改后能够实时推送到应用端，并... [阅读全文]
SpringBoot基于Shiro处理ajax请求代码实例

写一个shiro的过滤器import cn.erika.demo.common.model.vo.message;import com.alibaba.fast... [阅读全文]
如何在JAVA中使用Synchronized

《编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程》一文详细讲述了线程、进程的关系及在操作系统中的表现，这是多线程学习必须了解的基础。本文将接着... [阅读全文]

网友评论


验证码：