cms-前端

在module中创建CMS页面原型 定义cms目录,创建相应接口 在page目录中创建page_list页面 在router页面中创建index.js路由组件 import Home from '@/module/home/page/home.vue'; import page_list from "../page/page_list"; export default [{ path: '/', component: Home, name: 'CMS', hidden: false, children:[ {path: '/cms/page/list',name:'页面列表',component: page_list } ] } ] 这样在home组件中,就可以获取到路与信息,并渲染成树状列表显示 仿照home路由组件,创建cms路由默认显示,并且设置管理页面的子路由 在base工程中合并路由组件 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); // 定义路由配置 let routes = [] let concat = (router) => { routes = routes.concat(router) } // // 导入路由规则 import HomeRouter from '@/module/home/router' import CmsRouter from '@/module/cms/router' // 合并路由规则 concat(HomeRouter) concat(CmsRouter) export default routes; 开发page_list. »

创建组件 页面效果 ​ 创建page_add.vue页面 配置路由 在cms模块的路由文件中配置“添加页面”的路由： {path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true} 注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。 测试，在浏览器地址栏输入http://localhost:11000/#/cms/page/add 在页面列表添加“添加页面”的按钮 实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。 在查询按钮的旁边添加： <router-link :to="{path:'/cms/page/add'}" > <el-button type="primary" size="small">新增页面</el-button> </router-link> :to为点击后跳转到相应路由 说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是标签。 page_add页面 <!-- pageForm就是page绑定的数据对象的名称--> <el-form :model="pageForm" label-width="80px" > <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. »

修改页面前端开发 修改页面用户操作流程： 1、用户进入修改页面，在页面上显示了修改页面的信息 2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败” 页面处理流程 页面的处理流程如下： 1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象 2、页面信息通过数据绑定在表单显示 3、用户修改信息点击“提交”请求服务端修改页面信息接口 编写page_edit页面 修改页面的布局同添加页面，可以直接复制添加页面，在添加页面基础上修改。 下边编写页面内容： 1、编写page_edit.vue 页面布局同添加页面，略。 2、配置路由 进入修改页面传入pageId import page_edit from '@/module/cms/page/page_edit.vue'; { path: '/cms/page/edit/:pageId', name:'修改页面',component: page_edit,hidden:true}, 3、在页面列表添加“编辑”链接 参考table组件的例子，在page_list.vue上添加“操作”列 <!-- 操作列,跳转到修改界面--> <el-table-column label="操作" width="80"> <!--slot-scope:插槽,取得当前行数据,命名为page 拿到行数据,从行中取出pageid--> <template slot-scope="page"> <el-button size="small"type="text" @click="edit(page.row.pageId)">编辑 </template> </el-table-column> 编写edit方法 //路由跳转 edit:function (pageId) { //打开修改页面 this.$router.push({ path:'/cms/page/edit/'+pageId, }) }, 页面内容显示 本功能实现：进入修改页面立即显示要修改的页面信息。 1、定义api方法 export const page_get=(id) => { //定义方法,请求服务端站点根据id查询接口,返回结果 return http.requestQuickGet(apiUrl + '/cms/page/get/' +id); } export const page_edit=(id,params) => { //定义方法,请求服务端站点修改页面接口,返回结果 return http. »

删除页面前端开发 Api方法 /*页面删除*/ export const page_del = id => { return http.requestDelete(apiUrl+'/cms/page/del/'+id) } 编写页面 1、在page_list.vue页面添加删除按钮 <el-table-column label="操作" width="80"> <!--slot-scope:插槽,取得当前行数据,命名为page 拿到行数据,从行中取出pageid--> <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> 在原来,修改页面按钮的插槽中直接再加一个按钮 删除事件 del:function (pageId) { //调用接口 this.$confirm('确认删除吗？', '提示', {}).then(() => { cmsApi.page_del(pageId).then(res=>{ if (res.success) { this.$message.success("删除成功") //刷新页面 this.query() }else { this.$message.success("删除失败") } }); }) } }, »