从源头前端开始来讲解
page_list 是主页面
<template>
<div>
<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" @click="query">查询</el-button>
</el-form>
<el-table
:data="list"
style="width: 100%">
<el-table-column type="index" width="60"></el-table-column>
<el-table-column prop="pageName" label="页面名称" width="120"></el-table-column>
<el-table-column prop="pageAliase" label="别名" width="120"></el-table-column>
<el-table-column prop="pageType" label="页面类型" width="150"></el-table-column>
<el-table-column prop="pageWebPath" label="访问路径" width="250"></el-table-column>
<el-table-column prop="pagePhysicalPath" label="物理路径" width="250"></el-table-column>
<el-table-column prop="pageCreateTime" label="创建时间"></el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="total"
style="float: right"
:page-size="params.size"
:current-page="params.page"
@current-change="changePage"
>
</el-pagination>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
export default {
name: "page_list",
data() {
return {
siteList:[],
list: [],
total:0,
params:{
page:1,
size:10,
siteId:'',
pageAliase:''
}
}
},
methods:{
query:function () {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res) => {
console.log(res)
this.list = res.queryResult.list;
this.total = res.queryResult.total;
})
alert("查询")
},
changePage:function (page) {
alert(page);
this.params.page = page;
this.query()
}
},
mounted() {
this.query()
this.siteList = [{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},{
siteId:'102',
siteName:'测试站'
}]
}
}
</script>
<style scoped>
</style>
这个相当于查询表单
<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" @click="query">查询</el-button>
</el-form>
key是绑定的唯一表示
label是标签上显示的文字
value是标签上显示的文字对应的value值
整个绑定在siteList
siteList 应该是通过查询得到的,但是本项目用我在mounted初始化,静态初始化了。
然后是每次查询和翻页的方法逻辑
query:function () {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res) => {
console.log(res)
this.list = res.queryResult.list;
this.total = res.queryResult.total;
})
alert("查询")
},
changePage:function (page) {
alert(page);
this.params.page = page;
this.query()
}
query中
在cms下面api定义方法,更改一下想要跳转的路由,传到哪个接口路径下面
import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
//定义方法:请求服务端的页面查询接口
export const page_list = (page,size,params) =>{
//请求服务端的查询接口
//将params对象拼装成key/value串
let queryString = querystring.stringify(params);
return http.requestQuickGet(apiUrl + '/cms/page/list/'+ page + '/' + size + '?' + queryString);
}
后端的事情 首先是controller去绑定,有人访问了之后传给service
package com.xuecheng.manage_cms.controller;
import com.xuecheng.api.cms.CmsPageControllerApi;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
/**
* @Classname CmsPageController
* @Description TODO
* @Date 2020/2/13 0:43
* @Created by mmz
*/
@RestController
@RequestMapping("/cms/page")
public class CmsPageController implements CmsPageControllerApi {
@Autowired
PageService pageService;
@Override
@GetMapping("/list/{page}/{size}")
public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size")int size, QueryPageRequest queryPageRequest) {
// //静态数据
// //定义queryResult
// QueryResult<CmsPage> queryResult = new QueryResult<>();
// List<CmsPage> list = new ArrayList<>();
// CmsPage cmsPage = new CmsPage();
// cmsPage.setPageName("测试页面");
// list.add(cmsPage);
// queryResult.setList(list);
// queryResult.setTotal(1);
// QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
return pageService.findList(page,size,queryPageRequest);
}
}
service主要定义的是逻辑
package com.xuecheng.manage_cms.service;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.manage_cms.dao.CmsPageRepository;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.PathVariable;
import javax.validation.constraints.Null;
/**
* @Classname PageService
* @Description TODO
* @Date 2020/2/13 15:23
* @Created by mmz
*/
@Service
public class PageService {
@Autowired
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()
.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
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 queryResult = new QueryResult();
queryResult.setList(all.getContent());//数据列表
queryResult.setTotal(all.getTotalElements());//数据总记录数
QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
return queryResponseResult;
}
}
接受queryPageRequest的逻辑,然后把查询的逻辑,先set到CmsPage对象中,然后再把cmsPage对象和example中的一个匹配器继承在一个example中。
pageable是接受page和size
然后进行dao层的调用
Page<CmsPage> list = cmsPageRepository.findAll(example,pageable);
查询得到list
然后得到有一个Result对象,然后把结果都传递到result对象中
然后又有一个大对象Response对象,集成了状态和result对象,返回给前端
前端再拿界面进行渲染