Vue+Spring boot+mysql前后端连接实现增删改查

您所在的位置：网站首页 › vue调用后端接口实现增删改查 › Vue+Spring boot+mysql前后端连接实现增删改查

Vue+Spring boot+mysql前后端连接实现增删改查

2023-11-02 20:47| 来源: 网络整理| 查看: 265

前后端及其连接一共四大步骤，1.建库 2.后端定义功能 3.前端实现界面 4.前后端连接 1.MYSQL建库

建一个department表在这里插入图片描述

2.后端定义功能——在Spring boot工程里把接口写好小前言1：理解层次的概念总的来说，一共一组实体+3层实体：实体的类名为表的名字，实体的参数为表的参数最底层：通过SQL语句实现对数据库的操纵，可以理解为基本动作（如武术里的跑，跳，出拳）中间层：使用最底层的基本操作，组合一下就是中间层的升级操作动作（如跑加跳，跑加出拳，跳加出拳等) 最上层：使用中间层的基本操作，组合成实现业务逻辑的操作（如跑加跳 +跑加出拳组合成跑跳出拳连招）

层次与目录结构如下在这里插入图片描述

0、application.properties的配置代码

注：在数据库配置里要把数据库名，账号密码换成自己的

# 应用服务端口 server.port=8080 # 数据库配置 spring.datasource.url=jdbc:mysql://localhost:3306/day7.8test?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true&sessionVariables=sql_mode='NO_ENGINE_SUBSTITUTION' spring.datasource.username=root spring.datasource.password=2333 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # mybatis的 Mapping.xml的位置 mybatis.mapper-locations=classpath:mapping/*Mapping.xml # 指定POJO扫描包来让mybatis自动扫描到自定义的POJO，如果配置了该配置则不需要再ResultMap中指定全类名了 mybatis.type-aliases-package=com.ustc.learn.mybatis.entity #全局性地开启或关闭所有映射器配置文件中已配置的任何缓存 mybatis.configuration.cache-enabled=false #延迟加载的全局开关。当开启时，所有关联对象都会延迟加载。特定关联关系中可通过设置 fetchType 属性来覆盖该项的开关状态 mybatis.configuration.lazy-loading-enabled=false # 开启时，任一方法的调用都会加载该对象的所有延迟加载属性。否则，每个延迟加载属性会按需加载（参考 lazyLoadTriggerMethods) mybatis.configuration.aggressive-lazy-loading=true #更多mybatis的配置请参考 https://mybatis.org/mybatis-3/zh/configuration.html#properties # 打印sql logging.level.com.ustc.learn.mybatis=DEBUG ######### 分页插件 ########## #配置使用哪种数据库语言，不配置的话pageHelper也会自动检测 pagehelper.helper-dialect=mysql #为了支持startPage(Object params)方法，增加了该参数来配置参数映射，用于从对象中根据属性名取值; # 可以配置 pageNum,pageSize,count,pageSizeZero,reasonable，不配置映射的用默认值， # 默认值为pageNum=pageNum;pageSize=pageSize;count=countSql;reasonable=reasonable;pageSizeZero=pageSizeZero。 pagehelper.params=count=countSql #配置分页参数合理化功能，默认是false。 #启用合理化时，如果pageNum总页数会查询最后一页； #禁用合理化时，如果pageNum总页数会返回空数据。 pagehelper.reasonable=false #支持通过Mapper接口参数来传递分页参数，默认值false，分页插件会从查询方法的参数值中，自动根据上面 params 配置的字段中取值，查找到合适的值时就会自动分页。 pagehelper.support-methods-arguments=true 1、实体与数据库对应

在这里插入图片描述

@Data //自动为private添加get/set方法 public class department { private String departmentName; private int rank; private String state; private String createTime; } 2、实现底层——用于与数据库交互

有两种方式：一种是mapper+xml的方式一种是直接mapper里实现注：这两种方式可以混用

在这里插入图片描述 mapper里的内容

@Mapper public interface departmentMapper { /*方式1： mapper+xml的方式在mapper里定义方法接口，在xml里实现语句 */ //@Param用于解释右边的数据，传入时无论右边写了什么，都传@Param里的名字 public List findByDname(@Param("departmentName") String departmentName); public List findByRank(@Param("rank") int rank); public void add(@Param("departmentName") String departmentName,@Param("rank") int rank); public void updatedepartment(@Param("state") String state,@Param("departmentName") String departmentName); public void delStudentByRank(@Param("departmentName") String departmentName); /*方式2：直接mapper方式在mapper里定义方法并实现 */ @Select("select * from department") public List findAll(); }

xml里的内容在这里插入图片描述

-- concat是Mysql里的字符串拼接 select * from department where departmentName like concat('%', #{departmentName},'%') select * from department where rank = #{rank} insert into department values(#{departmentName},#{rank},"正常","2021-07-11 20:27:05") update department set state = #{state} where departmentName = #{departmentName} delete from department where departmentName = #{departmentName} 3、实现中间层

在这里插入图片描述

@Service public class departmentService { @Resource private departmentMapper dpmMapper; public List findByDname(String departmentName){ return dpmMapper.findByDname(departmentName); } public List findByRank(int rank){ return dpmMapper.findByRank(rank); }; public void add(String departmentName,int rank){ dpmMapper.add(departmentName,rank); }; public void updatedepartment(String state, String departmentName){ dpmMapper.updatedepartment(state,departmentName); }; public void delStudentByRank(@Param("departmentName") String departmentName){ dpmMapper.delStudentByRank(departmentName); }; public List findAll(){ return dpmMapper.findAll(); } } 4、实现最上层

在这里插入图片描述

@RestController @Slf4j @RequestMapping(value = "/department") @Api(value = "部门接口", tags = "部门相关的接口" ) public class departmentController { @Autowired private departmentService dpmS; @RequestMapping(value = "/findAllD") public List findAll(){ return dpmS.findAll(); } @RequestMapping(value = "/findByDname" ,method = RequestMethod.POST) public List findByDname(@RequestBody Map maps){ return dpmS.findByDname(maps.get("departmentName")); }; @RequestMapping(value = "/findByRank",method = RequestMethod.POST) public List findByRank( int rank){ return dpmS.findByRank(rank); }; @PutMapping(value = "/addDandR") //String departmentName,int rank public void add(@RequestBody Map maps ){ int myrank= Integer.parseInt(maps.get("rank")); dpmS.add(maps.get("departmentName"),myrank); }; @PutMapping(value = "/updatedepartment") public void updatedepartment(String state,String departmentName){ dpmS.updatedepartment(state,departmentName); }; @DeleteMapping(value = "/delStudentByRank") public void delStudentByRank(@RequestBody Map maps){ System.out.println("controller begin"); dpmS.delStudentByRank(maps.get("departmentName")); System.out.println("controller over"); }; 3.前端实现界面与连接——在Vue里把页面写好目录结构

在这里插入图片描述

3.1实现前后端连接的语句——axios

在main.js里加以下两句话

import axios from 'axios' Vue.prototype.$http = axios

在这里插入图片描述

3.2解决端口共用问题

由于前后端默认打开时都是占用8080端口，而一个端口只能被一个占用解决方案：需要先run 后端工程，再run前端工程才能分别占用两个端口

3.3解决跨域问题跨域问题的定义：产生原因，SPring boot + vue里的跨域问题以及前端解决方案假如是在同一台机器上开发，前后端分离的工程中出现跨域问题的原因是，前端工程和后端工程运行在不同的端口上。只要协议、域名、端口有一个不同就会产生跨域问题，所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题。 2.前端方法在这里插入图片描述

proxyTable: { // 跨域问题的解决 '/api':{ target:"http://localhost:8080", changeOrigin:true, pathRewrite:{ '^/api':'/' } } }, 3.4实现页面与动作

APP.VUE

export default { name: 'App' } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; width: 100%; height: 100%; position: relative; }

Helloworld.vue

部门名称状态搜索重置部门名称排序状态创建时间 {{j.departmentName}} {{j.rank}} {{j.state}} {{j.createTime}} 部门名称：部门排序：部门状态：创建时间：确定添加确定删除确定修改 export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', Dname:"", Rank:"", a:[ {departmentName:'', rank:'', state:'', createTime:''}, {departmentName:'', rank:'', state:'', createTime:''}, {departmentName:'', rank:'', state:'', createTime:''}, {departmentName:'', rank:'', state:'', createTime:''}, {departmentName:'', rank:'', state:'', createTime:''}, {departmentName:'', rank:'', state:'', createTime:''}, ] } }, methods:{ //getText的请求是post类型的，因此是$http.post getText(){ var that =this; this.$http.post("/api/department/findByDname",{departmentName: that.Dname}) .then((res)=>{ console.log(res); for( var i=0;i{ } ) }, //addtext对应链接的请求是delete类型的，因此这里是$http.delete delText(){ var that =this; this.$http.delete("/api/department/delStudentByRank",{data:{departmentName:that.Dname}}) .then((res)=>{ } ) } } } td{ width: 100px; height: 50px; padding-left: 20px; } 结束：数据流备注 ——VUE工程里前端表单里的数据输入传入后端再到数据库的呢？ 1.在表单里添加v-model属性（类似v-bind) v-model = "data里的某一个变量名" 这样前端的数据就传入了data的变量里 2.再在方法里利用axios的方式使用变量，即可将变量的数据传入后端的最顶层，即controller层 3.最后controller层调用中间层再调用底层，即可完成对数据库的操作 swagger测试

端口默认8080

http://localhost:8080/swagger-ui.html#/

【本文地址】

Vue+Spring boot+mysql前后端连接实现增删改查

Vue+Spring boot+mysql前后端连接实现增删改查

今日新闻

推荐新闻