前后端分离项目知识汇总(整合CRUD)

简介: 前后端分离项目知识汇总(整合CRUD)

整合CRUD


前后端对接流程


我们这里拿查询所有user做实例

全栈开发流程

image.png

image.png

image.png


添加路由


模板中给的其实也有目录,我们看着复制粘贴根据自己的需求改改即可

image.png


点击路由显示页面


redirect:'/teacher/table'作用是当访问/teacher时会自动跳到/teacher/table

component是做布局的,就是页面做固定不动的部分

image.png


在api文件夹创建js文件,定义接口地址和参数


image.png


创建vue页面引入js文件,调用方法实现功能


我们先来了解一下response对象

以下是response对象的属性和方法

所以说,response就是代表接口返回的数据

image.png

image.png

在看我们后端定义的接口

image.png

这里的scope.row是获取行数据是固定写法

image.png

这样功能就实现了

image.png

==补充下分页条实现方式==

分页条

直接拿element-ui里面的来用就可以

因为我分页条和表单在同一页面,所以写在同一组件下

image.png


多条件查询


直接拿element-ui里面的来用就可以

因为我分页条和表单在同一页面,所以写在同一组件下

主要是js对象和java对象的问题,注意区分即可

其余的也是直接用element-ui组件直接拿过来改改数据

image.png

有了查询对象之后把查询对象传入我们写的获取讲师列表即可

我们在查询按钮绑定方法

image.png

测试

image.png


删除功能


image.png


增加功能


image.png

3、定义增加API

image.png

4、引入js,写vue页面

image.png

5、测试

image.png

6、补充

image.png


修改功能


我们想让增加和修改在同一页面下进行

增加和修改不同点在于,修改要做数据回显

那么如何区分这两个请求呢?

答案是修改的时候地址栏会有id,而保存没有

定义Api、定义路由、定义跳转路径

image.png

==修改功能逻辑==

image.png

测试

image.png

修改成功

image.png



相关文章
|
6天前
|
SQL Oracle 关系型数据库
项目中经常看到数据库Connection连接与Session这个你好不知道吗?
项目中经常看到数据库Connection连接与Session这个你好不知道吗?
17 1
|
6天前
|
NoSQL Java 数据库
【问题篇】springboot项目通过数据库限制实例端口号
【问题篇】springboot项目通过数据库限制实例端口号
24 0
|
6天前
|
编解码 人工智能 数据库
Google Earth Engine(GEE)——全球道路盘查项目全球道路数据库
Google Earth Engine(GEE)——全球道路盘查项目全球道路数据库
49 0
|
6天前
|
项目管理 数据库
基于jeecg-boot的项目管理系统(一、部分数据库)
基于jeecg-boot的项目管理系统(一、部分数据库)
20 0
|
6天前
|
数据库
基于Jeecgboot前后端分离的ERP系统开发数据库设计(二)
基于Jeecgboot前后端分离的ERP系统开发数据库设计(二)
12 0
|
6天前
|
数据库
基于Jeecgboot前后端分离的ERP系统开发数据库设计(一)
基于Jeecgboot前后端分离的ERP系统开发数据库设计(一)
11 0
|
6天前
|
分布式计算 DataWorks 安全
DataWorks产品使用合集之在DataWorks中,“项目空间”、“数据库”和“引擎实例”之间存在怎样的关系
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
29 0
|
6天前
|
前端开发 IDE Java
基于Springboot+MYSQL+Maven实现的宠物医院管理系统(源码+数据库+运行指导文档+项目运行指导视频)
基于Springboot+MYSQL+Maven实现的宠物医院管理系统(源码+数据库+运行指导文档+项目运行指导视频)
179 0
|
6天前
|
SQL 监控 druid
Druid数据库连接池简介及应用推广(老项目翻出来做下记录)
Druid数据库连接池简介及应用推广(老项目翻出来做下记录)
|
6天前
|
Java 数据库 数据安全/隐私保护
SpringBoot项目使用jasypt加解密的方法加密数据库密码
SpringBoot项目使用jasypt加解密的方法加密数据库密码
22 0