微信小程序代码:

1.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
              });
            }
          })
        }
      }
    })

    
  }
})

2.list.wxml

<!--pages/list/list.wxml-->
<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>
  <button type='primary' bindtap='addArea'>添加个人信息</button>
</view>

3.operation.js

// pages/operation/operation.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id:null,
    name:'',
    age:'',
    addUrl:'http://localhost:8080/test/add',
    modifyUrl:'http://localhost:8080/test/update'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    if(options.id==undefined){
      return;
    }
    that.setData({
      id: options.id,
    });
    wx.request({
      url: 'http://localhost:8080/test/byid',
      data: { id: options.id},
      method:'GET',
      success:function(res){
        console.log(res);
        var area=res.data;
        if(area==undefined){
          var text='获取数据失败';
          wx.showToast({
            title: text,
            icon:'',
            duration:2000
          });
        }else{
          that.setData({
            name:area.name,
            age:area.age
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },

/**
 *  表单功能
 */
  formSubmit:function(e){
    var that=this;
    var formData=e.detail.value; //获取表数据
    var url=that.data.addUrl;  //默认url
    if(that.data.id!=undefined){
      formData.id=that.data.id;
      url = that.data.modifyUrl;
    }else{
      url = that.data.addUrl;
    }
    wx.request({
      url: url,
      data:JSON.stringify(formData),
      method:'POST',
      header:{
        'Content-Type':'application/json'
      },
      success:function(res){
        console.log(res);
        var result=res.statusCode;
        var toastText="操作成功";
        if(result!=200){
          toastText="操作失败!";
        }
        wx.showToast({
          title: toastText,
          icon:'',
          duration:3000
        });
        
        wx.redirectTo({
          url: '../list/list',
        })
        // if(that.data.areaId=undefined){
        //   wx.redirectTo({
        //     url: '../list/list',
        //   })
        // }
      }
    })
  }
})

4.operation.wxml

<!--pages/operation/operation.wxml-->
<view class='container'>
  <form bindsubmit='formSubmit' bindreset='formReset'>
    <view class='row'>
      <text>姓名:</text>
      <input type='text' name='name' placeholder='请输入姓名' value='{{name}}'></input>
    </view>
    <view class='row'>
      <text>年龄:</text>
      <input type='text' name='age' placeholder='请输入年龄' value='{{age}}'></input>
    </view>
    <view class='row'>
      <button type='primary' form-type='submit'>提交</button>
      <button type='primary' form-type='reset'>重置</button>
    </view>
  </form>
</view>

java后台:

1.controller

package com.tuanzi.test.controller;


import com.tuanzi.test.entity.User;
import com.tuanzi.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author 团子
 * @since 2019-05-17
 */
@RestController
@RequestMapping("/test")
public class UserController {

    @Autowired
    UserService userService;

    /**
     * 查询全部
     * @return
     */
    @GetMapping("/list")
    public Object list(){
        return userService.list();
    }

    /**
     * 根据id删除
     * @param id
     * @return
     */
    @GetMapping("/delete")
    public boolean delete(Integer id){
        return userService.removeById(id);
    }

    /**
     * 根据id查询
     * @param id
     * @return
     */
    @GetMapping("/byid")
    public Object byid(Integer id){
        return userService.getById(id);
    }

    /**
     * 修改
     * @param user
     * @return
     */
    @PostMapping("/update")
    public boolean update(@RequestBody User user){
        return userService.updateById(user);
    }

    /**
     * 添加
     * @param user
     * @return
     */
    @PostMapping("/add")
    public boolean add(@RequestBody User user){
        return userService.save(user);
    }

}

这样就完成了简单的增删改查后台
效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

源码地址

代码地址

Q.E.D.