springboot vue测试平台前端项目查询新增功能
目录
- 基于 springboot+vue 的测试平台开发
- 一、查询功能
- 1. input 输入框
- 2. 查询按钮
- 二、新增功能
- 1. 新增按钮
- 2. 对话框
- 3. 新增数据
基于 springboot+vue 的测试平台开发
继续更新。
一、查询功能
在之前的项目列表接口里，支持使用项目名称模糊查询，现在来实现前端。
1. input 输入框
到组件库里找个输入框：
复制代码，修改代码：
v-model: 绑定了下面 data 中的projectQuery.projectName。
style="width:20%": 调整输入框宽度。
size="small": 调整输入框整体大小，参考elementUI组件库对应的文档说明。
placeholder: 占位符显示，输入框里的提示信息。
clearable: 输入框清空功能。
2. 查询按钮
到组件库里找个输入框：
修改代码：
这里用了一个 标签把输入框和查询按钮包了起来，方便后续如果有需要整体调整下样式啥的。
style="margin-left: 10px"调整了下按钮的左边距，让按钮和输入框之间留出点间隔。
@click="fetchData"绑定一个点击事件，点击按钮的时候调用fetchData方法。
测试一下根据项目名称模糊查询，输入：0915，点击查询。
查询功能完成。
二、新增功能
1. 新增按钮
新增接口之前已经实现好了，现在实现前端。
使用这个嵌套了表单的对话框。
这个触发按钮，就改成【新增】按钮，放到【查询】按钮的后面。
效果是这样的：
2. 对话框
新增页面这里只需要输入项目名称和描述即可，所以就是 2 个简单的输入框。
另外，复制代码的时候也需要把组件里需要用到的 data 也拷贝过来，替换成我们自己需要用的。
- dialogFormVisible，visible属性绑定的值，它接收Boolean，当为true时显示 Dialog 对话框。
- form 就是保存新增页面里填写的字段值。
- formLabelWidth 这个控制了这个表单的整体的宽度。
现在修改对话框表单的页面内容：
可以更加自己的要求来调整样式，我的大概如此：
3. 新增数据
点击【保存】按钮，要保存数据到表里，然后关闭弹窗，刷新列表页，展示新增的数据。
(1)添加接口
后端接口已实现，现在添加到 js 文件src/api/projectManagement.js里。
export function addProject(data) {
return request({
url: '/bloomtest/project/add',
method: 'post',
data: data
})
}
(2)绑定点击事件
在对话框【保存】按钮上绑定一个点击事件。
<el-button type="primary" @click="add">保 存</el-button>
这里要去掉复制出来的@click="dialogFormVisible = false"，只能绑定一个事件，如果要绑定多个，需要使用addEventListener()，后续再说。
(3)add 方法调用接口
在 methods 里增加上面按钮点击事件的方法 add，方法的作用是调用 js 文件里的添加接口。在使用方法之前要先导入进来：
import { getList, addProject } from '@/api/projectManagement'
编写 add 方法：
addProject(this.form)，需要传入表单的参数。then()，就是当 .then() 前的方法执行完后再执行 then()内部 的程序，这里就是用来处理请求之后的事情。
保存成功提示信息，依然到组件库里寻找，这里就用它：
另外，在这里可以加个判断，当接口返回状态码是20000时，提供保存成功，其他提示保存失败。
关闭对话框，就是修改下 dialogFormVisible 的属性为 fasle：
this.dialogFormVisible = false
刷新列表，我可以再调一次查询方法即可：
this.fetchData()
最后，完整的 add 方法：
测试一下效果，可以正常保存，对话框关闭，提示成功。
但是发现 2 个问题：
再次点击新增的时候，对话框里还显示上一次的内容。
列表没排序，新增的数据在后面的页，展示不直观。
解决 问题1
在新增方法里，把表单里的字段值设为空字符串即可：
// 清空表单
this.form.projectName = ''
this.form.description = ''
解决 问题2
调整列表接口，增加排序 order by，按照 id 倒序。
最后，重新测试一下新增。
输入内容，保存。
功能完成。
以上就是springboot+vue测试平台前端项目实现查询新增功能的详细内容，更多关于springboot+vue前端查询新增的资料请关注我们其它相关文章！
相关推荐
-
springboot vue测试前端项目管理列表分页功能实现
目录 基于 springboot+vue 的测试平台开发 一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题 二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码 三.实现分页 1.使用 组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符 基于 springboot+vue 的测试平台开发 继续更新 今天来完成项目列表的前端部分. 一.前后端调通 开发前端页面,框架里有 2 个地方需要改动: src/views: 这
-
springboot vue测试平台开发调通前后端环境实现登录
目录 基于 springboot+vue的测试平台开发 一.前端环境搭建 快速安装 二.后端环境搭建 创建应用 配置 application.properties 三.实现登录 1. mysql 建表 2. 后端-实现 /login 接口 3. 前端-修改代码实现登录 4. 解决跨域 5. 后端-实现 /useInfo 接口 6. 后端-实现 /logout 接口 四.小结 基于 springboot+vue的测试平台开发 一.前端环境搭建 在前端框架vue-element-admin这个项目中
-
springboot vue项目管理后端实现接口新增
目录 基于 springboot+vue 的测试平台开发继续更新. 一.编写实体类 Project 二.创建数据表 修改 application.properties 中的配置 三.编写 ProjectDAO 接口 四.编写 ProjectService 类 自定义异常类 五.编写 ProjectController 类 六.测试新增接口 /project/add 基于 springboot+vue 的测试平台开发继续更新. 接下来开发项目管理,是一个很常规的功能:有列表页.查询.新增.编辑,删
-
springboot vue项目管理前后端实现编辑功能
目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件
-
springboot vue项目后端列表接口分页模糊查询
目录 基于 springboot+vue 的测试平台开发 一.分页插件 二.实现接口 1. 编写 Service 层 2. 编写 Controller 层 三.测试接口 1. 测试分页 2. 测试条件查询 基于 springboot+vue 的测试平台开发 继续更新 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据 可以通过项目名称查询指定的项目 新增项目 编辑项目 其他功能..
-
springboot vue测试平台前端项目查询新增功能
目录 基于 springboot+vue 的测试平台开发 一.查询功能 1. input 输入框 2. 查询按钮 二.新增功能 1. 新增按钮 2. 对话框 3. 新增数据 基于 springboot+vue 的测试平台开发 继续更新. 一.查询功能 在之前的项目列表接口里,支持使用项目名称模糊查询,现在来实现前端. 1. input 输入框 到组件库里找个输入框: 复制代码,修改代码: v-model: 绑定了下面 data 中的projectQuery.projectName. style=
-
springboot vue测试平台接口定义及发送请求功能实现
目录 基于 springboot+vue 的测试平台开发 一.http客户端选型 二.后端接口实现 1. controller 层 2. service 层 三.前端实现 四.修改遗留 bug 基于 springboot+vue 的测试平台开发 继续更新 添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示 一.http客户端选型 为了更方
-
springboot vue测试平台接口定义前后端新增功能实现
目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R
-
springboot vue测试列表递归查询子节点下的接口功能实现
目录 基于 springboot+vue 的测试平台开发 一.后端 1. 建表 2. 列表接口 二.前端 1. 准备工作 2. 请求接口 3. 测试效果 4. 发现问题 基于 springboot+vue 的测试平台开发 继续更新 模块树节点的开发暂告一段落,现在开发右边接口相关的部分,今天先完成列表的功能. 功能是这样,当点击树的某个节点时候,右侧列表展示这个节点下的所有接口,带分页(最终效果图). 需要注意的是,因为节点下还有子节点,所以列表的功能需要使用递归来查询. 一.后端 1. 建表
-
springboot+vue制作后台管理系统项目
目录 一.所使用的环境配置: 二.项目简介 三.知识点总结(代码和配置) SpringBoot: 1.Mybatis-Plus配置文件,实现分页查询:MybatisPlusConfig 2.跨域配置文件:CorsConfig 3.请求返回类!:Result 4.pom.xml配置文件 Vue: 其余知识点总结: 总结: 学习资源来自于B站UP,up他讲的非常详细,对于熟悉两大框架很有用. 我的作业源代码在文章末尾,欢迎有需要的同学,学习参考使用,内置SQL文件,导入后,开启springboot和
-
springboot vue前后端接口测试树结点添加功能
目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口
-
Rainbond对前端项目Vue及React的持续部署
目录 前言: 部署前检查 1.1 添加 nodestatic.json 文件 1.2 添加 web.conf 文件 1.3 源码部署Vue项目 常见问题 前言: 以往我们在部署 Vue.React 前端项目有几种方法: 项目打包好之后生成dist目录,将其放入nginx中,并进行相应的访问配置. 将项目打包好放入tomcat中. 将项目打包好的dist目录中的static和index.html文件放入springboot项目的resources目录下 直接运行一个前端server,类似本地开发那
-
springboot+vue完成编辑页面发送接口请求功能
目录 前言 功能实现 前言 基于 springboot+vue 的测试平台(练手项目)开发继续更新. 今天终于把已做的功能都重构完成了. 其中前端又做了个小调整,就是入参动态增删的控件,本来我是3个tab复用一个组件,后来不断发现一些问题,最后我决定还是分开写吧. 今天另一个重点是重做了编辑页发送接口请求的后端功能.这个功能重构之前是有的,但是现在我觉得之前那些做兼容不够. 因为我最近在工作中接入飞书的一些开放API,发现存在一些接口的入参是组合来的,比如 post 请求中,既有查询参数,也有请