源码地址
页面创建参考链接：页面创建
最近在听学成在线项目，本人听讲的57期中没有对模板进行管理，主讲老师对模板模块只是进行了简单的讲解操作，并没有使用代码和UI界面对模板进行管理，本人在老师的基础增加了模板管理模块。
本人技术有限实现有不足的地方或者在文档编写过程中出现的问题，敬请原谅！
代码经过测试是可以正确实现功能的，如果各位在实现过程中有文件直接在评论去或者私信我即可，本人看到会立即回复
- 创建vue文件（路径：xc-ui-pc-sysmanage\src\module\cms\template）
- 需要配置模板管理页面，
前端工程下配置列表页面的访问
路径：xc-ui-pc-sysmanage\src\module\cms\router\index.js 配置
（1）导入刚刚新建的三个页面
//cms模板列表页
import template_list from '@/module/cms/template/template_list.vue';
import template_add from '@/module/cms/template/template_add.vue';
import template_edit from '@/module/cms/template/template_edit.vue'
（2）添加页面的访问
//模板列表模块
{
path: "/cms/template/list", //访问路径
name: "模板列表",//子组件的名称
component: template_list, //映射的组件名称
hidden: false //不隐藏
},
{
path: "/cms/template/add", //访问路径
name: "新增模板",//子组件的名称
component: template_add, //映射的组件名称
hidden: true //隐藏
},
{
path: "/cms/template/edit/:templateId",
name: "修改模板",
component: template_edit,
hidden: true
}
- 列表页面编写（与page_list类似）
<template>
<div>
<!--编写页面静态部分，即view部分-->
<el-form :model="params">
站点：
<el-select v-model="params.siteId" placeholder="请选择站点" style="width: 200px">
<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.templateName" style="width: 100px"></el-input>
<el-button type="primary" size="small" v-on:click="query">查询</el-button>
<router-link class="mui-tab-item" :to="{path:'/cms/template/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 type="index" width="60"></el-table-column>
<el-table-column prop="templateId" label="模板ID" width="220"></el-table-column>
<el-table-column prop="templateName" label="模板名称" width="180"></el-table-column>
<el-table-column prop="templateParameter" label="模板参数" width="110"></el-table-column>
<el-table-column prop="templateFileId" label="模板文件ID" width="220"></el-table-column>
<el-table-column label="操作" width="200">
<!--插槽可以列出多个操作按钮-->
<template slot-scope="page">
<el-button size="small" type="text" @click="edit(page.row.templateId)">编辑</el-button>
<el-button size="small" type="text" @click="del(page.row.templateId)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="this.params.size"
:current-page="this.params.page"
style="float:right;"
v-on:current-change="changePage">
</el-pagination>
</div>
</template>
- 把列表页面中涉及的变量与方法进行定义（JS），
<script>
import * as cmsApi from '../api/cms'
export default {
name: "template_list",
data() {
return {
siteList: [],//站点列表
list: [],
total: 0,
params: {
page: 1, //当前页码 默认为1
size: 5, //每页显示的数据条数 默认为5
siteId: '', //站点ID
templateName: '',//模板名称
}
}
},
methods: {
query: function () {//获取模板列表
cmsApi.template_list_params(this.params.page, this.params.size,this.params).then((result) => {
this.list = result.queryResult.list;
this.total = result.queryResult.total;
})
},
changePage: function (page) {//分页参数
this.params.page = page;
this.query()
},
query_site:function () {//获取站点列表
cmsApi.site_list().then((res)=>{
this.siteList=res.queryResult.list;
});
},
del:function (templateId) {//删除模板
this.$confirm('确认提交吗？', '提示', {}).then(()=>{
cmsApi.template_del(templateId).then((res)=>{
if (res.success) {
this.$message.success("删除成功")
this.query()
}else if(res.message){
this.$message.error(res.message)
}else {
this.$message.error("删除失败")
}
})
})
},
edit:function (templateId) {//修改模板
this.$router.push({
path:"/cms/template/edit/"+templateId,
})
},
},
created(){
//没有渲染获取路由中数据，然后在去渲染到页面上
//取出路由当中的参数赋值给数据对象
//路由中是字符串转换成整型数，如果路由中没有就使用或者||符号两者选一个真的
this.params.page = Number.parseInt(this.$route.query.page || 1)
this.params.siteId = this.$route.query.siteId
},
mounted(){
//钩子函数，进入页面就查询服务端请求所有的数据
//当所有的DOM元素渲染完成之后调用query
this.query();
this.siteList =this.query_site();
}
}
</script>
- 在cms.js文件中定义JS代码调用的方法（路径：xc-ui-pc-sysmanage\src\module\cms\api\cms.js）
（1）查询站点列表
export const site_list =() =>{
return http.requestGet(apiUrl+"/cms/site/list")
}
（2）查询模板列表（分页参数）
export const template_list_params=(page,size,params)=>{
let queryString = querystring.stringify(params)
return http.requestGet(apiUrl+'/cms/template/list/'+page+'/'+size+'?='+queryString)
}
（3）根据ID删除模板及其对应的模板文件
export const template_del=(templateId)=>{
return http.requestDelete(apiUrl+"/cms/template/delete/"+templateId)
}
6.创建返回值类，（很重要）整个模块中很多使用
创建：CmsTemplateResult.java路径：xc-framework-model\src\main\java\com\xuecheng\framework\domain\cms\response\CmsTemplateResult.java
@Data
public class CmsTemplateResult extends ResponseResult {
CmsTemplate cmsTemplate;
public CmsTemplateResult(ResultCode resultCode, CmsTemplate cmsTemplate) {
super(resultCode);
this.cmsTemplate = cmsTemplate;
}
}
创建：CmsUploadResult.java路径：xc-framework-model\src\main\java\com\xuecheng\framework\domain\cms\response\CmsUploadResult.java
@Data
public class CmsUploadResult extends ResponseResult {
String stringUpload;
public CmsUploadResult(ResultCode resultCode, String stringUpload) {
super(resultCode);
this.stringUpload = stringUpload;
}
}
7.创建枚举类型
添加代码：路径：xc-framework-model\src\main\java\com\xuecheng\framework\domain\cms\response\CmsCode.java
CMS_TEMPLATEISNULL(false,25001,"上传文件为空！"),
CMS_DELETETEMPLATEISNULL(false,25002,"删除的模板文件不存在！"),
CMS_ADDTEMPLATEDATAISNULL(false,25003,"新增模板数据为空！"),
CMS_DELETETEMPLATEISFALL(false,25004,"模板ID有误删除失败！"),
CMS_TEMPLATEHAVEPAGE (false,25005,"此模板下包含页面删除失败！") ,
CMS_DELETEPAGEISFALL (false,25006,"页面ID有误删除失败！") ,
EDITTEMPLATEFILEISFALL(false,25007,"修改上传模板文件失败！");
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
