前后端分离项目知识汇总(整合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



相关文章
|
2月前
|
存储 关系型数据库 MySQL
一个项目用5款数据库?MySQL、PostgreSQL、ClickHouse、MongoDB区别,适用场景
一个项目用5款数据库?MySQL、PostgreSQL、ClickHouse、MongoDB——特点、性能、扩展性、安全性、适用场景比较
|
2月前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
2月前
|
SQL 关系型数据库 MySQL
Go语言项目高效对接SQL数据库:实践技巧与方法
在Go语言项目中,与SQL数据库进行对接是一项基础且重要的任务
90 11
|
3月前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
3月前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
2月前
|
数据可视化 API PHP
学生信息管理系统-可视化-科目管理CRUD代码生成器
学生信息管理系统-可视化-科目管理CRUD代码生成器
46 5
|
2月前
|
Java 关系型数据库 数据库连接
SpringBoot项目使用yml文件链接数据库异常
【10月更文挑战第3天】Spring Boot项目中数据库连接问题可能源于配置错误或依赖缺失。YAML配置文件的格式不正确,如缩进错误,会导致解析失败;而数据库驱动不匹配、连接字符串或认证信息错误同样引发连接异常。解决方法包括检查并修正YAML格式,确认配置属性无误,以及添加正确的数据库驱动依赖。利用日志记录和异常信息分析可辅助问题排查。
319 10
|
2月前
|
Java 关系型数据库 MySQL
SpringBoot项目使用yml文件链接数据库异常
【10月更文挑战第4天】本文分析了Spring Boot应用在连接数据库时可能遇到的问题及其解决方案。主要从四个方面探讨:配置文件格式错误、依赖缺失或版本不兼容、数据库服务问题、配置属性未正确注入。针对这些问题,提供了详细的检查方法和调试技巧,如检查YAML格式、验证依赖版本、确认数据库服务状态及用户权限,并通过日志和断点调试定位问题。
168 6
|
2月前
|
前端开发 Java 数据库连接
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
本文是一份全面的表白墙/留言墙项目教程,使用SpringBoot + MyBatis技术栈和MySQL数据库开发,涵盖了项目前后端开发、数据库配置、代码实现和运行的详细步骤。
76 0
表白墙/留言墙 —— 中级SpringBoot项目,MyBatis技术栈MySQL数据库开发,练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
|
3月前
|
前端开发 IDE 数据库连接
ThinkPHP6 模型层的模型属性,表映射关系,以及如何在控制层中使用模型层和模型层中的简单CRUD
本文详细介绍了ThinkPHP6中模型层的使用,包括模型属性设置、表映射关系、以及如何在控制层中使用模型层进行CRUD操作。
ThinkPHP6 模型层的模型属性,表映射关系,以及如何在控制层中使用模型层和模型层中的简单CRUD