un7.6:前后端分离实现增删改查功能。

川长思鸟来 2023-10-11 17:46 18阅读 0赞

最近做项目，使用前后端分离的方式写了多套增删改查，我分享给大家一套完整的增删改查的代码，我是以栏目为例的，希望对大家有所帮助。

所需软件：

后端：IDEA

前端：HbuilderX

测试：火狐浏览器

话不多说，开始！

首先我们完善后台代码，我使用的是lombok代码生成器，接下来我给大家放代码。

开始之前必须要写的**until工具包**，名为HttpResult类，代码如下：

package com.xiaohui.cms.until;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    
    @Data
    @AllArgsConstructor
    public class HttpResult {
        private int code;//200=请求成功，500=请求失败
        private String msg;//请求失败的提示信息
        private Object data;//请求成功后响应的结果
        private int totle;//列表的总条数
    }

一、实体类，定义id和name，这个就不用多说了，代码如下：

package com.xiaohui.cms.entity.channel;
    
    import javax.persistence.*;
    import lombok.Getter;
    import lombok.Setter;
    import lombok.ToString;
    
    @Getter
    @Setter
    @ToString
    @Table(name = "channel")
    public class Channel {
        /**
         * 栏目id
         */
        @Id
        @GeneratedValue(generator = "JDBC")
        private Integer id;
    
        /**
         * 栏目名称
         */
        private String name;
    }

二、dao类，这个方法必须要有，因为这是分页查询的方法，如果没有此方法，运行时后台会报错pageIndex可能不是这个页面，所以需要写，代码如下：

package com.xiaohui.cms.dao.channel;
    
    import com.xiaohui.cms.entity.channel.Channel;
    import tk.mybatis.mapper.common.Mapper;
    
    import java.util.List;
    
    public interface ChannelMapper extends Mapper<Channel> {
        /**
         * 分页查询
         */
        public List<Channel> selectByLimit(int start,int size);
    }

三、resource里边，完成ChannelMapper.xml资源映射，如果没有的话无法运行，后台直接会报错sql语句有问题，所以必须要写，这个里边写的是刚才在dao下的那个方法，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.xiaohui.cms.dao.channel.ChannelMapper">
      <resultMap id="BaseResultMap" type="com.xiaohui.cms.entity.channel.Channel">
        
        <id column="id" jdbcType="INTEGER" property="id" />
        <result column="name" jdbcType="VARCHAR" property="name" />
      </resultMap>
      <select id="selectByLimit" resultMap="BaseResultMap" parameterType="int">
        select * from channel order by id desc limit #{start},#{size}
      </select>
    </mapper>

四、服务类。

1、接口，接口中只需要声明方法，也就是增删改查的具体方法，除此之外也要写分页查询的方法，以及total方法和getInfo方法，total方法是用来获取总条数的，getInfo方法是用来获取点击修改时的数据(也就是获取一个人的信息)，分页的话就不多说了，代码如下：

package com.xiaohui.cms.service;
    
    import com.xiaohui.cms.entity.channel.Channel;
    
    import java.util.List;
    
    public interface IChannelService {
        public List<Channel> show();
        public int add(Channel channel);
        public int update(Channel channel);
        public int delete(int id);
        public List<Channel> getByLimit(int pageIndex,int pageSize);
        public int gettotal();
        public Channel getInfo(int id);
    }

2、实现类。实现类是实现所有在接口中声明的方法的，有一个特别容易忽略的点，也是非常重要的，就是service注解，一定要写，不写的话获取不到整个页面，记得实现service接口，还有就是，需要声明mapper，此类中的方法大多是调用mapper中的增删改查，将接口中声明的方法中的数据写进去，再返回，注意最下面的三元运算符，代码如下：

package com.xiaohui.cms.service.impl;
    
    import com.xiaohui.cms.dao.channel.ChannelMapper;
    import com.xiaohui.cms.entity.channel.Channel;
    import com.xiaohui.cms.service.IChannelService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class ChannelServiceImpl implements IChannelService {
    
        @Autowired(required = false)
        private ChannelMapper channelMapper;
    
        @Override
        public List<Channel> show() {
            List<Channel> list = channelMapper.selectAll();
            return list;
        }
    
        @Override
        public int add(Channel channel) {
            return channelMapper.insert(channel);
        }
    
        @Override
        public int update(Channel channel) {
            return channelMapper.updateByPrimaryKey(channel);
        }
    
        @Override
        public int delete(int id) {
            return channelMapper.deleteByPrimaryKey(id);
        }
    
        @Override
        public List<Channel> getByLimit(int pageIndex, int pageSize) {
            return channelMapper.selectByLimit((pageIndex-1)*pageSize,pageSize);
        }
    
        @Override
        public int gettotal() {
            return channelMapper.selectCount(null);
        }
    
        @Override
        public Channel getInfo(int id) {
            Channel param=new Channel();
            param.setId(id);
            List<Channel> list = channelMapper.select(param);
            return list != null ? list.get(0) : null; //三元运算符
        }
    }

五、控制类（我更喜欢叫它数据传输类），首先是最上面的注解一定要有，实现还需要注意的一点是：每个方法上面都需要写三个注解，不写的话映射不到，还有就是return（返回）数据，一定要核对好，否则报错不准确，更头疼。代码如下：

package com.xiaohui.cms.controller;
    
    import com.xiaohui.cms.entity.channel.Channel;
    import com.xiaohui.cms.service.IChannelService;
    import com.xiaohui.cms.utile.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    @RestController
    @RequestMapping("/channel")
    public class ChannelController {
    
        @Autowired(required = false)
        private IChannelService channelService;
    
        /**
         * 查看栏目
         */
        @GetMapping("/show")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public HttpResult show(int pageIndex,int pageSize){
            List<Channel> list = channelService.getByLimit(pageIndex,pageSize);
            int rows = channelService.gettotal();
            return new HttpResult(200,null,list,0);
        }
        /**
         * 添加栏目
         */
        @GetMapping("/add")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public HttpResult add(Channel channel){
            int rows = channelService.add(channel);
            if (rows>0){
                return new HttpResult(200,null,"栏目添加成功",0);
            }else {
                return new HttpResult(500,"栏目未添加，请核对后重新操作",null,0);
            }
        }
        /**
         * 修改栏目
         */
        @GetMapping("/update")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public HttpResult update(Channel channel){
            int rows = channelService.update(channel);
            if (rows>0){
                return new HttpResult(200,null,"栏目修改成功",0);
            }else {
                return new HttpResult(500,"栏目未修改，请核对后重新操作",null,0);
            }
        }
        /**
         * 删除栏目
         */
        @GetMapping("/delete")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public HttpResult delete(int id){
            int rows = channelService.delete(id);
            if (rows>0){
                return new HttpResult(200,null,"栏目删除成功",0);
            }else {
                return new HttpResult(500,"栏目未删除，请核对后重新操作",null,0);
            }
        }
        /**
         * 获取修改时的数据
         */
        @GetMapping("/info")
        @ResponseBody
        @CrossOrigin(origins = "*")
        public HttpResult getInfo(int id){
            return new HttpResult(200,null,channelService.getInfo(id),0);
        }
    }

至此，后台的增删改查功能全部实现，启动项目后可打开火狐浏览器进行测试，我放到最后面和前端页面一起测试。

接下来我来分析前端页面增删改查的实现。

一、pages下创建channel新页面，自动创建channel.vue文件，完成查看功能。

1、<template>中的名称和数据库名称一致，否则的话无法获取到，分页器也要有，还有那几个按钮，也都需要有，代码如下。

2、把上面的按钮、分页器等都进行映射，创建函数。比如页码和channel集合，

3、请求用户列表，里边包括地址（url），数据（data）和控制台（success）等。

4、创建当页面显示成功之后的请求（onShow）函数。

<template>
    	<view>
    		<menuDraw></menuDraw>  
    		<uni-table :border="true" :stripe="true">
    			<uni-tr>
    				<uni-th align="center">ID</uni-th>
    				<uni-th align="center">文章名称</uni-th>
    			</uni-tr>
    			<uni-tr v-for="channel in channelList">
    				<uni-td>{
       {channel.id}}</uni-td>
    				<uni-td>{
       {channel.name}}</uni-td>
    				<uni-td align="center">
    					<button @click="doResource(channel.id)" type="default" size="mini" style="margin-right: 10rpx;">分配权限</button>
    					<button @click="doUpdate(channel.id)" type="primary" size="mini" style="margin-right: 10rpx;">修改</button>
    					<button @click="doDelete(channel.id)" type="warn" size="mini">删除</button>
    				</uni-td>
    			</uni-tr>
    		</uni-table>
    		
    		<uni-pagination
    		:current="pageIndex"
    		:pageSize="pageSize"
    		:total="pageTotal"
    		@change="pageChanged"
    		/>
    	</view>
    </template>
    
    <script>
    	import menuDraw from "../template/menu_draw.vue";//第一步：导入外部文件
    	export default {
    		//组件的声明
    		components:{
    			menuDraw//声明组件
    		},
    		data() {
    			return {
    				nice:"遇到你很高兴！",
    				channelList: null,
    				pageIndex:1,//页码
    				pageSize:6,//每页展示数据的条数
    				pageTotal:10 //数据总条数
    			}
    		},
    		/*当页面显示成功之后执行*/
    		onShow() {
    			this.requestUsers();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
    		},
    		methods: {
    			/*请求用户列表*/
    			requestUsers(){
    				/*uni_app的API发生http请求*/
    			uni.request({
    			    url: 'http://localhost:8082/channel/show', //仅为示例，并非真实接口地址。
    			    data:{
    				pageIndex: this.pageIndex,
    				pageSize: this.pageSize
    				},
    				success: (res) => {
    			        console.log(res.data);/*打印数据到控制台*/
    					this.channelList = res.data.data;
    					this.pageTotal = res.data.totle;
    			    }
    			});	
    			},
    			//*当分页器被点击时触发*/
    			pageChanged(e){//*当分页器被点击时触发
    				console.log(e.current);//打印出当前点击的页码
    				this.pageIndex = e.current;//给页码赋值
    			    this.requestUsers();
    			},
    			/*点击列表修改按钮时触发*/
    			doUpdate(id){
    				//console.log("用户修改:id="+id);
    				uni.redirectTo({
    					url:"./channel_update?id="+id,
    				})
    			},
    			/*点击分配权限按钮时触发*/
    			doResource(id){
    				uni.navigateTo({
    					url: "../channelres/channelres?id="+id
    				})
    			},
    			/*点击列表删除按钮时触发*/
    			doDelete(id){
    				//console.log("用户删除:id="+id);
    				uni.request({
    					url: "http://localhost:8082/channel/delete?id="+id,
    					success: (res) => {
    						if(res.data.code == 200){//删除成功
    							this.channelList = res.data.data;
    						}
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style>
    
    </style>

二、在channel.文件夹中创建channel\_add.vue文件，完成添加功能。

1、需要添加什么，就在<template>中写什么，我需要添加栏目的名称，只写了栏目名称。

2、添加了警告对话框，如果添加失败就会直接弹出。

<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="name">
    					<uni-easyinput type="text" v-model="FormData.name" 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>
    
    <script>
    	import menuDraw from "../template/menu_draw.vue";
    	export default {
    		components:{
    			menuDraw//声明组件
    		},
    		data() {
    			return {
    				FormData:{
    					name:null,//名称
    				},
    				msg:null //警告对话框提示的信息
    			}
    		},
    		methods: {
    			/*添加用户*/
    			doSave(){
    				//console.log(this.FormData.phone)
    				//console.log(this.FormData.channelname)
    				uni.request({
    					url: "http://localhost:8082/channel/add",
    					data:{
    						name:this.FormData.name
    					},
    					method:"GET",
    					success: (res) => {
    						if(res.data.code==200){//保存成功
    							uni.redirectTo({
    								url:"channel"
    							})
    						}else{//保存失败
    						this.msg=res.data.msg;
    							this.open();
    						}
    					}
    				})
    			},
    			//点击对话框确认按钮执行的操作
    			confirm(){
    				this.$refs.popup.close();
    			},
    			/*点击对话框关闭按钮执行的操作*/
    			close() {
    				this.$refs.popup.close();
    			},
    			//弹出警告对话框
    			open() {
    				this.$refs.popup.open();
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

三、在channel文件夹中创建channel\_update.vue文件，完成修改功能。

1、需要修改什么，就在<template>中写什么，我需要修改内容的名称，只写了栏目名称。

2、添加了警告对话框，如果修改失败就会直接弹出。

<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="name">
    					<uni-easyinput type="text" v-model="FormData.name" 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>
    
    <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:{
    					name:null,//角色名
    				},
    				msg:null //警告对话框提示的信息
    			}
    		},
    		methods: {
    			/*修改角色*/
    			doSave(){
    				uni.request({
    					url: "http://localhost:8082/channel/update",
    					data:{
    						name:this.FormData.name,
    						id:this.id
    					},
    					method:"GET",
    					success: (res) => {
    						if(res.data.code==200){//保存成功
    							uni.redirectTo({
    								url:"channel",
    							})
    						}else{//保存失败
    						this.msg=res.data.msg;
    							this.open();
    						}
    					}
    				});
    			},
    			//点击对话框确认按钮执行的操作
    			confirm(){
    				this.$refs.popup.close();
    			},
    			/*点击对话框关闭按钮执行的操作*/
    			close() {
    				this.$refs.popup.close();
    			},
    			//弹出警告对话框
    			open() {
    				this.$refs.popup.open();
    			},
    			/*获取用户信息*/
    			requestUserInfo(){
    				uni.request({
    					url:"http://localhost:8082/channel/info?id="+this.id,
    					success:(res) =>{
    						console.log(res.data)
    						this.FormData=res.data.data;
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

四、在channel.vue文件中做改动，完成删除功能（完整代码在完成查看功能的代码中）。

1、在<template>中直接定义一个删除按钮。

2、在<script>中定义一个函数。

/*点击列表删除按钮时触发*/
    			doDelete(id){
    				//console.log("用户删除:id="+id);
    				uni.request({
    					url: "http://localhost:8082/channel/delete?id="+id,
    					success: (res) => {
    						if(res.data.code == 200){//删除成功
    							this.channelList = res.data.data;
    						}
    					}
    				})
    			},

以上所有，既可以在IDEA中实现增删改查，也可以在前端HbuilderX中实现增删改查。

最后，打开火狐浏览器进行测试。

一、后台代码测试。

1、查看功能测试。

![94d9db426ad94da5a64c8f0d2d0dac45.png][]

2、添加功能测试。

添加成功页面

![8b99c0d7ac564c4e8f6059ef5caa3898.png][]

添加成功数据库

![3dda77ad12af40a8bd895a61f0133b5d.png][]

3、修改功能测试。

修改前

![f572589b0900419c84de3dc79ee1393f.png][]

修改成功页面

![239070035ee04ab48029012f28ed23f1.png][]

修改后数据库

![755b166d79e545f08594b4df555c4271.png][]

4、删除功能测试。

删除前成功页面

![e85af178d40e4e97994e151da070c781.png][]

删除成功数据库

![a54b7a6f9af04acda94aa53366ce1ffa.png][]

二、前端代码测试。

2、添加功能测试。

添加前

![23ec54d231db44cea829237b8ac87808.png][]

添加后

![f06bb40fe9104fde83b63eb57c1e0f79.png][]

3、修改功能测试。

修改前

![5a03b9532efc4d35973081175cfb9653.png][]

修改后

![ff252d50e11e449fbad154171d9834ba.png][]

4、删除功能测试。

删除前

![12a9398de2c74a8888c8561563f24ed3.png][]

删除后

![94e03a956c8c450ab5ad8980f2d45900.png][]

测试完成，以上功能全部实现。

这里边有特别多的细节，都需要一一对应，有时候一个单词、一个字母，甚至是一个标点符号都会导致报错，所以一定要仔细仔细再仔细，好啦，今天的分享就到这里，希望能够帮助到大家。

[94d9db426ad94da5a64c8f0d2d0dac45.png]: https://img-blog.csdnimg.cn/94d9db426ad94da5a64c8f0d2d0dac45.png
[8b99c0d7ac564c4e8f6059ef5caa3898.png]: https://img-blog.csdnimg.cn/8b99c0d7ac564c4e8f6059ef5caa3898.png
[3dda77ad12af40a8bd895a61f0133b5d.png]: https://img-blog.csdnimg.cn/3dda77ad12af40a8bd895a61f0133b5d.png
[f572589b0900419c84de3dc79ee1393f.png]: https://img-blog.csdnimg.cn/f572589b0900419c84de3dc79ee1393f.png
[239070035ee04ab48029012f28ed23f1.png]: https://img-blog.csdnimg.cn/239070035ee04ab48029012f28ed23f1.png
[755b166d79e545f08594b4df555c4271.png]: https://img-blog.csdnimg.cn/755b166d79e545f08594b4df555c4271.png
[e85af178d40e4e97994e151da070c781.png]: https://img-blog.csdnimg.cn/e85af178d40e4e97994e151da070c781.png
[a54b7a6f9af04acda94aa53366ce1ffa.png]: https://img-blog.csdnimg.cn/a54b7a6f9af04acda94aa53366ce1ffa.png
[23ec54d231db44cea829237b8ac87808.png]: https://img-blog.csdnimg.cn/23ec54d231db44cea829237b8ac87808.png
[f06bb40fe9104fde83b63eb57c1e0f79.png]: https://img-blog.csdnimg.cn/f06bb40fe9104fde83b63eb57c1e0f79.png
[5a03b9532efc4d35973081175cfb9653.png]: https://img-blog.csdnimg.cn/5a03b9532efc4d35973081175cfb9653.png
[ff252d50e11e449fbad154171d9834ba.png]: https://img-blog.csdnimg.cn/ff252d50e11e449fbad154171d9834ba.png
[12a9398de2c74a8888c8561563f24ed3.png]: https://img-blog.csdnimg.cn/12a9398de2c74a8888c8561563f24ed3.png
[94e03a956c8c450ab5ad8980f2d45900.png]: https://img-blog.csdnimg.cn/94e03a956c8c450ab5ad8980f2d45900.png