网站建设 福步 2018,wordpress推广插件,wordpress调用数据库字段,厦门电商网站效果 实现流程
首先我们需要在后端获取数据#xff0c;我们可以根据name属性去模糊查询#xff0c;返回Map类型的列表 然后将它返回给前端。
controller
ApiOperation(根据关键字查询讲师名列表)GetMapping(list/name/{key})public ResultVo sele…效果 实现流程
首先我们需要在后端获取数据我们可以根据name属性去模糊查询返回Map类型的列表 然后将它返回给前端。
controller
ApiOperation(根据关键字查询讲师名列表)GetMapping(list/name/{key})public ResultVo selectNameListByKey(ApiParam(namekey,value 关键字) PathVariable(key) String key){ListMapString,Object nameList teacherService.selectNameList(key);return ResultVo.ok().data(nameList,nameList);}service Overridepublic ListMapString, Object selectNameList(String key) {QueryWrapperTeacher queryWrapper new QueryWrapper();queryWrapper.select(name).likeRight(name,key);ListMapString, Object maps baseMapper.selectMaps(queryWrapper);return maps;}前端
我们使用的是Vue 的 elementUI给我们提供的Input组件
el-autocompleteclassinline-inputv-modelteacherQuery.name:fetch-suggestionsquerySearchplaceholder讲师名:trigger-on-focusfalsevalue-keyname/el-autocomplete其中 :fetch-suggestionsquerySearch 是我们输入一个完整字符后进行的回调事件。 该函数有两个参数 queryString,callback queryString是我们v-model绑定的输入框值callback是它内置给我们的回调函数。我们只需要将后端获取的数据传递即可。value-keyname是要显示的值对应着我们传递给callback的列表中的key。
官方文档如下 具体的代码
// 讲师名输入建议querySearch(queryString,callback){// queryString 就是我们输入的值teacherApi.selectNameListByKey(queryString).then(response{console.log(response)callback(response.data.nameList);})}前端的请求接口如下
import request from /utils/requestexport default{。。。 。。。// 根据关键字查询讲师名列表selectNameListByKey(key){return request({url:/edu/teacher/list/name/${key},method:get})}
}
