微服务实战学成在线day03——（一）CMS自定义条件查询前后端开发

1 自定义条件查询

1.1需求分析

在页面输入查询条件，查询符合条件的页面信息。
查询条件如下：
站点Id：精确匹配
模板Id：精确匹配
页面别名：模糊匹配

1.2 服务端

1.2.1 Dao

1.2.2 Service

在PageService的findlist方法中增加自定义条件查询代码

@Service
public class PageServiceImpl implements PageService {

    @Autowired
    private CmsPageRepository cmsPageRepository;

    public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size") int size, QueryPageRequest queryPageRequest) {
        if (queryPageRequest==null)
        {
            queryPageRequest=new QueryPageRequest();
        }
        //自定义条件匹配器
        ExampleMatcher exampleMatcher = ExampleMatcher.matching();
        exampleMatcher=exampleMatcher.withMatcher("pageAliase",ExampleMatcher.GenericPropertyMatchers.contains());
        //条件值对象
        CmsPage cmsPage = new CmsPage();
        //设置条件值(站点id)
        if (StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
            cmsPage.setSiteId(queryPageRequest.getSiteId());
        }
        //设置模版id
        if (StringUtils.isNotEmpty(queryPageRequest.getTemplateId())){
            cmsPage.setTemplateId(queryPageRequest.getTemplateId());
        }
        //设置页面别名作为查询条件
        if (StringUtils.isNotEmpty(queryPageRequest.getPageAliase())){
            cmsPage.setPageAliase(queryPageRequest.getPageAliase());
        }

        Example<CmsPage> example = Example.of(cmsPage,exampleMatcher);
        if (page<=0){
            page=1;
        }
        page=page-1;
        if (size<=0) {
            size = 10;
        }
        Pageable pageable = PageRequest.of(page, size);
        Page<CmsPage> all = cmsPageRepository.findAll(example,pageable);
        QueryResult<CmsPage> queryResult = new QueryResult<>();
        queryResult.setList(all.getContent());//数据列表
        queryResult.setTotal(all.getTotalElements());//数据总记录数
        QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
        return queryResponseResult;
    }
}

重点是这几行：

1.2.3 Controller

不需要修改

1.2.4 服务端总结

在使用条件查询时，调用的是CmsPageRepository的findAll(example, pageable)方法，其中example为条件实例，pageable是分页查询用的。
那如何得到example呢？
第一步我们是通过 ExampleMatcher exampleMatcher = ExampleMatcher.matching()来创建条件匹配器，默认是精确匹配，如果想使用模糊查询的话，则使用 exampleMatcher=exampleMatcher.withMatcher(“pageAliase”,ExampleMatcher.GenericPropertyMatchers.contains()); 其中pageAliase表示实例中哪个部分设置查询条件的，后面的contains()则表示查询包含给定值的即可。
下面是其他几种模糊查询匹配方式：

1.3前端

1.3.1 页面

1、增加查询表单

<el-form :model="params">
    <el-select v-model="params.siteId" placeholder="请选择站点">
      <el-option
        v-for="item in siteList"
        :key="item.siteId"
        :label="item.siteName"
        :value="item.siteId">
      </el-option>
    </el-select>
    页面别名：<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
    <el-button type="primary" size="small " @click="query">查询</el-button>
    </el-form>

2、数据模型对象
增加siteList、pageAliase、siteId，如下：

data() {
return {
		siteList:[],//站点列表
		list:[],
		total:50,
		params:{
		siteId:'',
		pageAliase:'',
		page:1,//页码
		size:2//每页显示个数
	}
  }
}

3、在钩子方法中 构建siteList站点列表

mounted() {
		//默认查询页面
		this.query()
		//初始化站点列表
		this.siteList = [
		{
		siteId:'5a751fab6abb5044e0d19ea1',
		siteName:'门户主站'
		},
		{
		siteId:'102',
		siteName:'测试站'
		}
	]
}

1.3.2 Api调用

1、向服务端传递查询条件，修改 cms.js，如下：

export const page_list = (page,size,params) => {
//将json对象转成key/value对
let query = querystring.stringify(params)
return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/?'+query)
}

2、页面调用api方法

//查询
query:function () {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
console.log(res)
	this.total = res.queryResult.total
	this.list = res.queryResult.list
	})
}

注：这里的站点信息是静态设置的，并非从数据库中读取。教程中也没有将实现的步骤，下面第二小节是笔者根据需求来自己完成的。

2 站点信息查询

2.1服务端代码

2.1.1 Api接口

@Api(value = "查询所有站点信息",tags = "Cms站点管理，查询所有站点")
public interface CmsSiteControllerApi {
    //查询所有站点
    @ApiOperation("查询所有站点")
    public List<CmsSite> findList();

}

2.1.2 Controller

@RestController
@RequestMapping("/cms/site")
public class CmsSiteController implements CmsSiteControllerApi {
    @Autowired
    private SiteService siteService;


    @Override
    @GetMapping("/list")
    public List<CmsSite> findList() {
        return siteService.findList();
    }
}

2.1.3 Service

接口：

接口实现：

@Service
public class SiteServiceImpl implements SiteService {
    @Autowired
    private CmsSiteRepository cmsSiteRepository;
    @Override
    public List<CmsSite> findList() {
        List<CmsSite> all = cmsSiteRepository.findAll();
        return  all;
    }
}

2.1.3 dao

public interface CmsSiteRepository extends MongoRepository<CmsSite,String> {
}

2.1.3 测试

2.2前端代码

2.2.1 page_list代码修改

在methods添加一个querySiteList方法：

querySiteList:function(){
        cmsApi.page_site_list().then((res)=>{
          this.siteList=res;
        })
      },

在钩子函数里添加querySiteList方法的调用

2.2.2 cms.js的修改

添加查询site相关内容

//site内容查询
export const page_site_list =()=>{
//定义方法，请求服务端的页面查询接口
  return http.requestQuickGet(apiUrl+'/cms/site/list/');
}

2.2.3 测试

注：因为数据库中只有一个站点数据，所以这里也只能查询到一个站点~