微信小程序代码:
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.
