un7.5:前后端分离快速实现增删改查。

小格子衬衫

已于 2022-09-22 10:03:10 修改

阅读量1.7k

点赞数 1

分类专栏：跨端开发文章标签：大数据

于 2022-07-05 10:49:24 首次发布

本文链接：https://blog.csdn.net/m0_64818669/article/details/125614463

版权

跨端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

因为前后端分离的便利性，大多数公司都会选择使用前后端分离的方式进行项目的操作，今天，我就来给大家科普一下如何在前后端分离的情况下实现增删改查。

一、首先，我们打开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、添加前。