因为前后端分离的便利性，大多数公司都会选择使用前后端分离的方式进行项目的操作，今天，我就来给大家科普一下如何在前后端分离的情况下实现增删改查。
一、首先，我们打开IDEA，检查一下后台代码，我昨天做了检查，发现没有写修改时候的接口和实现，那么我先补齐，步骤如下：
1、在IAuthUserService接口中声明方法，代码如下：
public AuthUser getInfo(int id);2、在AuthUserServiceImpl实现类中实现此方法，代码如下：
@Override
public AuthUser getInfo(int id) {
AuthUser param = new AuthUser();
param.setId(id);
List<AuthUser> list = authUserMapper.select(param);
return list !=null ? list.get(0) : null; //三元运算符
}3、在AuthUserController中接收传递数据，注解一定要写上，代码如下：
@GetMapping("/info")
@ResponseBody
@CrossOrigin(origins = "*")
public HttpResult getInfo(int id){
return new HttpResult(200,null,authUserService.getInfo(id),0);
}如此，我的后台代码便已经编辑好，接下来我们打开HbuilderX前端，接着上面的继续写。
二、用户的添加。
1、打开前端页面后在pages/user下新建一个vue文件，名为user_add，图片如下：
2、在此文件中的template中写一些uni-app中属性和组件，代码如下：
<template>
<view>
<menuDraw></menuDraw>
<view style="width: 350rpx; margin-top:80rpx; margin-left:auto;margin-right: auto;">
<uni-forms :modelValue="FormData" name="phone">
<uni-forms-item label="手机号">
<uni-easyinput type="text" v-model="FormData.phone" placeholder="请输入手机号"></uni-easyinput>
<uni-easyinput type="text" v-model="FormData.username" placeholder="请输入用户名"></uni-easyinput>
</uni-forms-item>
<button type="primary" size="mini" @click="doSave">添加用户</button>
</uni-forms>
</view>
<!--弹出警告对话框-->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>3、将上面的名称与下面的一一对应，不要忘了把封装好的menu_draw导入进来，代码如下：
<script>
import menuDraw from "../template/menu_draw.vue";
export default {
components:{
menuDraw//声明组件
},
data() {
return {
FormData:{
username:null,//用户名
phone:null//手机号
},
msg:null //警告对话框提示的信息
}
},
methods: {
/*添加用户*/
doSave(){
//console.log(this.FormData.phone)
//console.log(this.FormData.username)
uni.request({
url: "http://localhost:8082/authuser/add",
data:{
username:this.FormData.username,
phone:this.FormData.phone,
passwd:"123456"
},
method:"GET",
success: (res) => {
if(res.data.code==200){//保存成功
uni.redirectTo({
url:"user"
})
}else{//保存失败
this.msg=res.data.msg;
this.open();
}
}
})
},
/*点击对话框关闭按钮执行的操作*/
close() {
this.$refs.popup.close();
},
//弹出警告对话框
open() {
this.$refs.popup.open();
}
}
}
</script>添加功能已经实现！
三、用户修改。
1、在pages/user下新建一个user_update文件，依然是三部曲，首先是template中的内容，如下：
<template>
<view>
<menuDraw></menuDraw>
<view style="width: 350rpx; margin-top:80rpx; margin-left:auto;margin-right: auto;">
<uni-forms :modelValue="FormData">
<uni-forms-item label="手机号" name="phone">
<uni-easyinput type="text" v-model="FormData.phone" placeholder="请输入手机号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="用户名" name="username">
<uni-easyinput type="text" v-model="FormData.username" placeholder="请输入用户名"></uni-easyinput>
</uni-forms-item>
<button type="primary" size="mini" @click="doSave">修改用户</button>
</uni-forms>
</view>
<!--弹出警告对话框-->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>2、其次，是函数与以上数据的对应，代码如下：
<script>
import menuDraw from "../template/menu_draw.vue";
export default {
components:{
menuDraw//声明组件
},
/*当页面加载成功之后触发，用于接收页面跳转及传参*/
onLoad(options) {
this.id=options.id;
console.log("接收页面传参："+this.id);
},
/*当页面渲染成功之后执行*/
onShow() {
this.requestUserInfo();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
},
data() {
return {
id:null, //页面传参的用户id
FormData:{
username:null,//用户名
phone:null//手机号
},
msg:null //警告对话框提示的信息
}
},
methods: {
/*添加用户*/
doSave(){
//console.log(this.FormData.phone)
//console.log(this.FormData.username)
uni.request({
url: "http://localhost:8082/authuser/update",
data:{
username:this.FormData.username,
phone:this.FormData.phone,
passwd:"123456",
id:this.id
},
method:"GET",
success: (res) => {
if(res.data.code==200){//保存成功
uni.redirectTo({
url:"user",
})
}else{//保存失败
this.msg=res.data.msg;
this.open();
}
}
});
},
/*点击对话框关闭按钮执行的操作*/
close() {
this.$refs.popup.close();
},
//弹出警告对话框
open() {
this.$refs.popup.open();
},
/*获取用户信息*/
requestUserInfo(){
uni.request({
url:"http://localhost:8082/authuser/info?id="+this.id,
success:(res) =>{
console.log(res.data)
this.FormData=res.data.data;
}
})
}
}
}
</script>3、打开user.vue页面，将修改的函数创建，代码如下：
<template></template>中的内容
<button @click="doUpdate(user.id)" type="primary" size="mini" style="margin-right: 10rpx;">修改</button>methods函数中的内容
/*点击列表修改按钮时触发*/
doUpdate(id){
//console.log("用户修改:id="+id);
uni.redirectTo({
url:"./user_update?id="+id,
})
},修改功能已经实现。
四、删除功能特别的简单，我们只需要在pages/user中创建一个删除的按钮，然后再把函数创建出来即可，步骤如下。
1、创建删除按钮，代码如下：
<button @click="doDelete(user.id)" type="warn" size="mini">删除</button>2、在method中创建名为doDelete函数，代码如下：
doDelete(id){
//console.log("用户删除:id="+id);
uni.request({
url: "http://localhost:8082/authuser/delete?id="+id,
success: (res) => {
if(res.data.code == 200){//删除成功
this.userList = res.data.data;
}
}
})
},五、在user.vue中运行到火狐浏览器测试增加。
1、添加前。
2、添加后。
六、测试修改。
1、修改前。
2、修改后。
七、测试删除。
1、删除前。
2、删除后。
至此，增删改查功能全部实现！如果没有实现的话，需要检查一下代码、路径，也可以在下方评论或私信，希望能够帮助大家。