WeChat Mini Program CRUD with Spring Boot, MyBatis-Plus, and MySQL

The article describes a project that implements basic create, read, update, and delete (CRUD) operations for a WeChat mini‑program by connecting the mini‑program to a Spring Boot backend using MyBatis‑Plus and MySQL.

1. Development preparation lists required knowledge (Java basics, Spring Boot fundamentals) and environment parameters such as IDE (IntelliJ IDEA), Maven + JDK8, and the main technologies: Spring Boot, Lombok, MyBatis‑Plus, MySQL, and the WeChat mini‑program.

2. Backend server provides the project structure and the initial Maven pom.xml configuration, which includes dependencies for spring‑boot‑starter‑web, mybatis‑spring‑boot‑starter, mybatis‑plus‑boot‑starter, Druid, MySQL connector, PageHelper, Lombok, and testing libraries.

The application.yml file configures the data source (using Druid), MyBatis‑Plus settings, and the PageHelper pagination plugin.

A MySQL table users is created with fields id , name , and age , and sample data is inserted.

Entity classes (POJOs), mapper XML files, service interfaces, and service implementations are illustrated with screenshots (not reproduced here).

2.6 Controller shows two Spring Boot REST controllers:

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;

@RestController
public class LoginController {
    @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;
    }
}

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.*;

@RestController
@RequestMapping("/test")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/list")
    public Object list() {
        System.out.println("查询成功");
        return userService.list();
    }

    @GetMapping("/delete")
    public boolean delete(Integer id) {
        System.out.println("删除成功");
        return userService.removeById(id);
    }

    @GetMapping("/byid")
    public Object byid(Integer id) {
        System.out.println("查询成功");
        return userService.getById(id);
    }

    @PostMapping("/update")
    public boolean update(@RequestBody User user) {
        System.out.println("修改成功");
        return userService.updateById(user);
    }

    @PostMapping("/add")
    public boolean add(@RequestBody User user) {
        System.out.println("添加成功");
        return userService.save(user);
    }
}

3. WeChat Mini Program outlines the front‑end files:

bind.wxml defines a form with input fields for phone and password and a submit button.

<view>
  <form bindsubmit='doLogin'>
    <view class="inputView">
      <label class="loginLabel">账号</label>
      <input name="phone" value="10086" class="inputText" placeholder="请输入账号" />
    </view>
    <view class="inputView">
      <label class="loginLabel">密码</label>
      <input name="password" value="123456" class="inputText" password="true" placeholder="请输入密码" />
    </view>
    <view class='backColor'>
      <button class="loginBtn" formType="submit" open-type='getUserInfo'>登录</button>
    </view>
  </form>
</view>

list.wxml displays a table of users with add, edit, and delete actions, using wx:for to iterate over the data list.

<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">
    <block wx:for='{{list}}'>
      ...
    </block>
  </scroll-view>
</view>

list.js fetches the user list from the backend on page show, handles adding and deleting entries, and updates the UI accordingly.

Page({
  data: { list: [] },
  onShow: function() {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/test/list',
      method: 'GET',
      success: function(res) {
        var list = res.data;
        if (list == null) {
          wx.showToast({ title: '获取数据失败', icon: '', duration: 2000 });
        } else {
          that.setData({ list: list });
        }
      }
    });
  },
  addArea: function() { wx.navigateTo({ url: '../operation/operation' }); },
  deleteArea: function(e) { /* show modal and call delete API */ }
});

app.json registers the pages and sets global window styles.

{
  "pages": ["pages/bind/bind", "pages/list/list", "pages/logs/logs", "pages/operation/operation", "pages/index/index"],
  "window": {
    "backgroundColor": "#F6F6F6",
    "navigationBarBackgroundColor": "#29d",
    "navigationBarTitleText": "login",
    "navigationBarTextStyle": "black"
  },
  "style": "v2"
}

4. Testing instructs to start the Spring Boot main method, open the WeChat developer tools, and verify login, list, add, edit, and delete functionalities. Screenshots of each step are provided.

Finally, the article shares Gitee repository links for the front‑end mini‑program ( https://gitee.com/ckfeng/applet_of_wechat.git ) and the backend Spring Boot project ( https://gitee.com/ckfeng/wx_login.git ).