vue+iview框架前端页面实现搜索

最新推荐文章于 2023-03-11 16:29:05 发布

氵冫、

最新推荐文章于 2023-03-11 16:29:05 发布

阅读量1.1k

点赞数

分类专栏：前端 # Vue+Iview 文章标签： vue iview 搜索

本文链接：https://blog.csdn.net/qq_39515385/article/details/96274828

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue+Iview

7 篇文章 0 订阅

订阅专栏

项目总结：搜索功能

描述

项目使用的是vue+iview框架，要对从后台查到的数据进行一个对名称模糊查询的功能（结合了分页），思路是获取到表单中输入的关键字，传到后台，后台通过mybatis的example类写模糊查询

完成后的展示

在这里插入图片描述

前端代码

      <Form ref="formSearch" inline>
         <FormItem style="margin:auto;" prop="keywords">
           <Input search v-model="formSearch.keywords" placeholder="请输入名称"></Input>
         </FormItem>
         <FormItem style="margin:auto;">
           <Button type="primary" @click="goPage()">搜索</Button>
         </FormItem>
      </Form>

goPage(n) {
      n = n || 1;
      this.req.pageNo = n;
      this.loading = true;
      this.req.keywords = this.formSearch.keywords;
      this.$global.get("pool/list", this.req).then(res => {
        if (res.success) {
          this.datalist = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.$Message.error(res.errorMsg);
        }
      });
    }

后端代码

//Controller
	@GetMapping("/list")
	public ResponseInfo list(Integer pageNo, Integer size, String keywords) {
		return ResponseInfo.success(service.selectByPage(pageNo, size, keywords));
	}

//Service
	public PageInfo<Pool> selectByPage(Integer pageNo, Integer size, String keywords) {
		if (null == pageNo)
			pageNo = 1;
		if (null == size)
			size = 10;
		PoolExample example = new PoolExample();
		List<Integer> depIds = service.getActiveUserDepIds();
		if (depIds.size() > 0) {
			example.createCriteria().andDepIdIn(depIds);
		}
		if (keywords != null && !"".equals(keywords)) {
			keywords = "%" + keywords + "%";
			example.createCriteria().andNameLike(keywords);
		}
		PageHelper.startPage(pageNo, size);
		List<Pool> list = mapper.selectByExample(example);
		return new PageInfo<>(list);
	}