前后端接口对接--根据关键字查询搜索

要实现的内容：在右上角选择列名后，查询对应列名后的数据，点击查询图标，即可查询到相关信息。

如：创建人列里，输入创建2字，即可显示与创建相关内容

实现方法：

1.后端swagger中：

2.public-src-api下的相关js文件中：

// 表单数据根据关键字查询-分页
export function queryByKeyWord(param) {return request({url: "/smartcity-datamanagement/cimFormData/queryByKeyWord",method: "get",params: {keyWordName: param.keyWordName,keyWordValue: param.keyWordValue,page: param.page,size: param.size,tableName: param.tableName}});
}

3.相对应的vue 文件中：

在点击右上角的查询按钮处为调用接口的入口：

<el-buttonclass="search-btn"icon="el-icon-search"type="primary"size="mini"v-on:click="searchFile">
</el-button>

引入对应js文件中的方法：

import {queryByKeyWord
} from "@/api/cimApi/formApi";

在对应方法中methods中调用接口：

// 搜索searchFile() {//判断输入内容是否为空，为空则不执行if (this.searchText == "" && this.columnSelect == "") {return;}// 重置为第一页this.currentPage = 1; //将接口中需要的内容写入let param = {keyWordName: this.columnSelect,keyWordValue: this.searchText,page: this.currentPage,size: this.pageSize,tableName: this.$route.query.md5num};//调用接口queryByKeyWord(param).then(res => {//返回查询到的总条数和更新含有查询内容的表单this.total = res.data.data.total;this.formData = res.data.data.rows;});},

前后端接口对接--根据关键字查询搜索相关推荐

（凯思奥2020-03月）问题记录3，GUI问题记录3 4，国际化异常，微信平台接入 = 数据库修改 + 自动化填充 + 前后端接口修正 + 联调测试问题 + 微信与数字账号绑定 + 思考+部署
问题记录3: 1. UserPage: 未登录状态(报解构异常),或直接登出再登录,没有获取用户数据. 2.WorkContentPage gui相关(大片红字报错)(国际化message类型问题) ...
前后端不分离到分离演变,优势,前后端接口联调,排错
前后端分离,不分离简介前言前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构 ...
公司项目里如何进行前后端接口联调
最近我的朋友Jack进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是Jack非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯 ...
前后端项目对接流程梳理
课程目标掌握一个电商网站从设计到上线的整个过程所涉及的流程具备独立开发一个前端项目的能力网址 http://www.happymmall.com 架构设计前后端完全分离分层架构模块化技术 ...
VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
寻仙新马源码一键端_强大，腾讯开源前后端接口开发工具！
APIJSON是啥? APIJSON是一种为API而生的JSON网络传输协议. 为简单的增删改查.复杂的查询.简单的事务操作提供了完全自动化的API. 能大幅降低开发和沟通成本,简化开发流程,缩短 ...
05_02_拉钩教育课程管理系统项目前后端接口联调
任务三前后端项目接口联调 1.联调准备 1.1 运行后台项目 clean 清空项目的编译文件 compile 重新编译项目将项目部署到 tomcat 项目名为: lagou_edu_home 端口 ...
计算机前后端接口,看看别人后端API接口写得，那叫一个优雅！
在分布式.微服务盛行的今天,绝大部分项目都采用的微服务框架,前后端分离方式.题外话:前后端的工作职责越来越明确,现在的前端都称之为大前端,技术栈以及生态圈都已经非常成熟:以前后端人员瞧不起前端人员,那 ...
如何使用微信开发者工具调试前后端接口
在微信小程序中,如果前后端分离开发的话,是需要通过接口来进行交互的, 因此在联系不到后台的情况下,写前端的我们应当如何测试自己的页面呢?方法如下: 微信小程序前端与后台交互的时候使用的是request ...
个人记录——前后端api对接的一种方式
两人或多人协作开发前后端分离项目,需要有一个api文档.例如后端人员编写api文档,前端人员如何才能查看到实时的文档,以此方便地在前端页面写入正确的交互接口(例如 ajax里type为get,url为 ...

前后端接口对接--根据关键字查询搜索

前后端接口对接--根据关键字查询搜索相关推荐

最新文章

热门文章