1 服务端代码
1.1dao层
public interface CmsPageRepository extends MongoRepository<CmsPage,String> {
//根据pageName、siteId、pageWebPath判断页面是否存在,用于增加页面时先判断用
CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName,String siteId,String pageWebPath);
}
1.2 service层
接口:
public interface PageService {
public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size") int size, QueryPageRequest queryPageRequest);
public CmsPageResult save(CmsPage cmsPage);
public CmsPage findById(String id);
public CmsPageResult edit(String id,CmsPage cmsPage);
public ResponseResult delete(String id);
}
接口实现:
package com.xuecheng.manage_cms.service.impl;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsCode;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.exception.CustomException;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.manage_cms.dao.CmsPageRepository;
import com.xuecheng.manage_cms.service.PageService;
import org.apache.commons.lang3.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 java.util.Optional;
@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;
}
//页面添加
@Override
public CmsPageResult save(CmsPage cmsPage) {
//判断数据库中是否已经存在
CmsPage cmsPageTest = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath());
if (cmsPageTest!=null){
//页面已经存在
//抛出异常,异常内容就是页面已经存在
ExceptionCast.cast(CmsCode.CMS_ADDPAGE_EXISTSNAME);
}
//如果不存在
cmsPage.setPageId(null); //页面主键由spring data 自动生成
CmsPage page = cmsPageRepository.save(cmsPage);
CmsPageResult cmsPageResult = new CmsPageResult(CommonCode.SUCCESS,page);
return cmsPageResult;
}
//根据id查询页面
@Override
public CmsPage findById(String id) {
Optional<CmsPage> optional = cmsPageRepository.findById(id);
if (optional.isPresent()){
CmsPage cmsPage = optional.get();
return cmsPage;
}
return null;
}
@Override
public CmsPageResult edit(String id, CmsPage cmsPage) {
//根据id查询页面信息
CmsPage one = this.findById(id);
if (one!=null){
//更新模版id
one.setTemplateId(cmsPage.getTemplateId());
//更新所属站点
one.setSiteId(cmsPage.getSiteId());
//更新页面别名
one.setPageAliase(cmsPage.getPageAliase());
//更新页面名称
one.setPageName(cmsPage.getPageName());
//更新访问路径
one.setPageWebPath(cmsPage.getPageWebPath());
//更新物理路径
one.setPagePhysicalPath(cmsPage.getPagePhysicalPath());
//执行更新
CmsPage save = cmsPageRepository.save(one);
return new CmsPageResult(CommonCode.SUCCESS,save);
}
return new CmsPageResult(CommonCode.FAIL,null);
}
@Override
public ResponseResult delete(String id) {
Optional<CmsPage> byId = cmsPageRepository.findById(id);
if (byId.isPresent()){
cmsPageRepository.deleteById(id);
return new ResponseResult(CommonCode.SUCCESS);
}
return new ResponseResult(CommonCode.FAIL);
}
}
1.3 controller层
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.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.manage_cms.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
@RestController
@RequestMapping("/cms/page")
public class CmsPageController implements CmsPageControllerApi {
@Autowired
private PageService pageService;
@Override
@GetMapping("/list/{page}/{size}")
public QueryResponseResult findList(@PathVariable("page") int page, @PathVariable("size") int size, QueryPageRequest queryPageRequest) {
/* QueryResult<CmsPage> queryResult = new QueryResult<>();
queryResult.setTotal(1);
//静态数据列表
List<CmsPage> list = new ArrayList<>();
CmsPage cmsPage = new CmsPage();
cmsPage.setPageName("测试页面");
list.add(cmsPage);
queryResult.setList(list);
QueryResponseResult queryResponseResult = new QueryResponseResult(CommonCode.SUCCESS,queryResult);
return queryResponseResult;
*/
QueryResponseResult list = pageService.findList(page, size, queryPageRequest);
return list;
}
@Override
@PostMapping("/add")
public CmsPageResult add(@RequestBody CmsPage cmsPage) {
CmsPageResult cmsPageResult = pageService.save(cmsPage);
return cmsPageResult;
}
@Override
@GetMapping("/get/{id}")
public CmsPage findById(@PathVariable("id") String id) {
return pageService.findById(id);
}
@Override
@PutMapping("/edit/{id}")
public CmsPageResult edit(@PathVariable("id")String id, @RequestBody CmsPage cmsPage) {
return pageService.edit(id,cmsPage);
}
@Override
@DeleteMapping("/del/{id}")
public ResponseResult delete(@PathVariable("id")String id) {
return pageService.delete(id);
}
}
1.4 Api接口
package com.xuecheng.api.cms;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.ResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
@Api(value = "cms页面管理接口",tags = "cms页面管理接口,提供页面的增删改查")
public interface CmsPageControllerApi {
//页面查询
@ApiOperation("分页查询页面列表")
@ApiImplicitParams({
@ApiImplicitParam(name = "page",value = "页码",required = true,paramType = "path",dataType = "int"),
@ApiImplicitParam(name = "size",value = "每页记录数",required = true,paramType = "path",dataType = "int")
})
public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);
//添加页面
@ApiOperation("添加页面")
public CmsPageResult add(CmsPage cmsPage);
//根据id查询页面
@ApiOperation("根据id查询页面")
public CmsPage findById(String id);
//修改页面
@ApiOperation("修改页面")
public CmsPageResult edit(String id,CmsPage cmsPage);
//删除页面
@ApiOperation("删除页面")
public ResponseResult delete(String id);
}
2 前端代码
2.1 路由
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue'
import page_edit from '@/module/cms/page/page_edit.vue'
export default [{
path: '/cms',
component: Home,
name: 'CMS内容管理',
hidden: false,
children:[
{path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false},
{path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true},
{path:'/cms/page/edit/:pageId',name:'修改页面',component: page_edit,hidden:true}
]
}
]
2.2 vue界面
2.2.1 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" size="small " @click="query">查询</el-button>
<router-link :to="{path:'/cms/page/add',query:{page: this.params.page,siteId: this.params.siteId}}">
<el-button type="primary" size="small " >新增页面</el-button>
</router-link>
</el-form>
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column
prop="pageName"
label="页面名称"
width="180">
</el-table-column>
<el-table-column
prop="pageAliase"
label="别名"
width="180">
</el-table-column>
<el-table-column
prop="pageType"
label="页面类型">
</el-table-column>
<el-table-column
prop="pageWebPath"
label="访问路径">
</el-table-column>
<el-table-column
prop="pagePhysicalPath"
label="物理路径">
</el-table-column>
<el-table-column
prop="pageCreateTime"
label="创建时间">
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="page">
<el-button
size="small" type="text"
@click="edit(page.row.pageId)">编辑
</el-button>
<el-button
size="small" type="text"
@click="del(page.row.pageId)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="total"
:current-page="params.page"
:page-size="params.size"
style="float: right"
@current-change="changePage"
>
</el-pagination>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
/*编写页面静态部分,即model及vm部分。*/
export default {
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)=>{
//将res结果数据赋值给数据模型对象
this.list=res.queryResult.list;
this.total=res.queryResult.total;
})
},
edit:function(pageId){
//打开修改页面
this.$router.push({
path:'/cms/page/edit/'+pageId
})
},
del:function(pageId){
this.$confirm('您确认删除吗?', '提示', {}).then(() => {
cmsApi.page_del(pageId).then((res)=>{
if (res.success){
this.$message.success("删除成功")
//刷新页面
this.query()
}else {
this.$message.error("删除失败")
}
})
})
},
querySiteList:function(){
cmsApi.page_site_list().then((res)=>{
this.siteList=res;
})
},
changePage:function (page) {//形参,表示当前页码
this.params.page=page;
this.query()
}
},
created(){
//取出路由中的参数,赋值给数据对象
this.params.page = Number.parseInt(this.$route.query.page||1);
this.params.siteId = this.$route.query.siteId||'';
},
mounted() {
//当DOM元素全部渲染完成后默认查询页面
this.query();
this.querySiteList();
/* this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'102',
siteName:'测试站'
}
]*/
}
}
</script>
<style>
/*编写页面样式,不是必须*/
</style>
2.2.2 page_add
<template>
<div>
<el-form :model="pageForm" :rules="pageFormRules" label-width="80px" ref="pageForm">
<el-form-item label="所属站点" prop="siteId">
<el-select v-model="pageForm.siteId" placeholder="请选择站点">
<el-option
v-for="item in siteList"
:key="item.siteId"
:label="item.siteName"
:value="item.siteId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选择模版" prop="templateId">
<el-select v-model="pageForm.templateId" placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.templateId"
:label="item.templateName"
:value="item.templateId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="页面名称" prop="pageName">
<el-input v-model="pageForm.pageName" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="别名" prop="pageAliase">
<el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="访问路径" prop="pageWebPath">
<el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="物理路径" prop="pagePhysicalPath">
<el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="pageForm.pageType">
<el-radio class="radio" label="0">静态</el-radio>
<el-radio class="radio" label="1">动态</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog‐footer">
<el-button type="primary" @click="addSubmit" >提交</el-button>
<el-button type="primary" @click="go_back" >返回</el-button>
</div>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
/*编写页面静态部分,即model及vm部分。*/
export default {
data() {
return {
//站点列表
siteList:[],
//模版列表
templateList:[],
//新增界面数据
pageForm: {
siteId:'',
templateId:'',
pageName: '',
pageAliase: '',
pageWebPath: '',
pageParameter:'',
pagePhysicalPath:'',
pageType:'',
pageCreateTime: new Date()
},
pageFormRules: {
siteId:[
{required: true, message: '请选择站点', trigger: 'blur'}
],
templateId:[
{required: true, message: '请选择模版', trigger: 'blur'}
],
pageName: [
{required: true, message: '请输入页面名称', trigger: 'blur'}
],
pageWebPath: [
{required: true, message: '请输入访问路径', trigger: 'blur'}
],
pagePhysicalPath: [
{required: true, message: '请输入物理路径', trigger: 'blur'}
]
}
}
},
methods: {
addSubmit:function(){
//执行校验
this.$refs.pageForm.validate((valid) => {
if (valid) {
//加一个确认提示
this.$confirm('确认提交吗?', '提示', {}).then(() => {
//调用page_add方法请求服务端的新增页面
cmsApi.page_add(this.pageForm).then((res)=>{
//解析服务端响应内容
if (res.success){
this.$message.success("提交成功")
//将表单清空
this.$refs.pageForm.resetFields();
}else if (res.message){
this.$message.error(res.message)
} else {
this.$message.error("提交失败")
}
});
});
}
});
},
//返回
go_back:function(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
}
})
}
},
created:function() {
//初始化站点列表
this.siteList = [
{
siteId: '5a751fab6abb5044e0d19ea1',
siteName: '门户主站'
},
{
siteId: '102',
siteName: '测试站'
}
]
//模板列表
this.templateList = [
{
templateId: '5a962b52b00ffc514038faf7',
templateName: '首页'
},
{
templateId: '5a962bf8b00ffc514038fafa',
templateName: '轮播图'
}
]
}
}
</script>
<style>
</style>
2.2.3 page_edit
<template>
<div>
<el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm" >
<el-form-item label="所属站点" prop="siteId">
<el-select v-model="pageForm.siteId" placeholder="请选择站点">
<el-option
v-for="item in siteList"
:key="item.siteId"
:label="item.siteName"
:value="item.siteId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="选择模版" prop="templateId">
<el-select v-model="pageForm.templateId" placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.templateId"
:label="item.templateName"
:value="item.templateId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="页面名称" prop="pageName">
<el-input v-model="pageForm.pageName" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="别名" prop="pageAliase">
<el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="访问路径" prop="pageWebPath">
<el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="物理路径" prop="pagePhysicalPath">
<el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="数据Url" prop="dataUrl">
<el-input v-model="pageForm.dataUrl" auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="pageForm.pageType">
<el-radio class="radio" label="0">静态</el-radio>
<el-radio class="radio" label="1">动态</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime"></el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="go_back">返回</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
</div>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
export default{
data(){
return {
//页面id
pageId:'',
//模版列表
templateList:[],
addLoading: false,//加载效果标记
//新增界面数据
pageForm: {
siteId:'',
templateId:'',
pageName: '',
pageAliase: '',
pageWebPath: '',
dataUrl:'',
pageParameter:'',
pagePhysicalPath:'',
pageType:'',
pageCreateTime: new Date()
},
pageFormRules: {
siteId:[
{required: true, message: '请选择站点', trigger: 'blur'}
],
templateId:[
{required: true, message: '请选择模版', trigger: 'blur'}
],
pageName: [
{required: true, message: '请输入页面名称', trigger: 'blur'}
],
pageWebPath: [
{required: true, message: '请输入访问路径', trigger: 'blur'}
],
pagePhysicalPath: [
{required: true, message: '请输入物理路径', trigger: 'blur'}
]
},
siteList:[]
}
},
methods:{
go_back(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
}
})
},
editSubmit(){
this.$refs.pageForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true;
cmsApi.page_edit(this.pageId,this.pageForm).then((res) => {
console.log(res);
if(res.success){
this.addLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
//返回
this.go_back();
}else{
this.addLoading = false;
this.$message.error('提交失败');
}
});
});
}
});
}
},
created: function () {
this.pageId=this.$route.params.pageId;
//根据主键查询页面信息
cmsApi.page_get(this.pageId).then((res) => {
console.log(res);
if(res){
this.pageForm = res;
}
});
},
mounted:function(){
//初始化站点列表
this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'102',
siteName:'测试站'
}
]
//模板列表
this.templateList = [
{
templateId:'5a962b52b00ffc514038faf7',
templateName:'首页'
},
{
templateId:'5a962bf8b00ffc514038fafa',
templateName:'轮播图'
}
]
}
}
</script>
<style>
</style>
2.3 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);
}
//site内容查询
export const page_site_list =()=>{
//定义方法,请求服务端的页面查询接口
return http.requestQuickGet(apiUrl+'/cms/site/list/');
}
//新增页面
export const page_add =params=>{
//定义方法,请求服务端的页面查询接口
return http.requestPost(apiUrl+'/cms/page/add/',params);
}
//根据id查询页面
export const page_get =pageId=>{
return http.requestQuickGet(apiUrl+'/cms/page/get/'+pageId);
}
//修改页面
export const page_edit =(pageId,params)=>{
//定义方法,请求服务端的页面查询接口
return http.requestPut(apiUrl+'/cms/page/edit/'+pageId,params);
}
//删除页面
export const page_del =(pageId)=>{
//定义方法,请求服务端的页面查询接口
return http.requestDelete(apiUrl+'/cms/page/del/'+pageId);
}
页面列表:
添加页面:
修改页面:
删除页面: