CMS前端開發
導入工程(省略)
創建cms模塊
在src/module
下創建如下結構:
頁面Vue
這裏我直接放入我寫好的代碼
修改src/module/cms/page/page_list.vue
中的內容
<template>
<div>
<el-button type="primary" icon="el-icon-search" @click="query" style="margin-top: 20px">查詢</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="pageName" label="頁面名稱" width="400"></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="物理路徑" min-width="250"></el-table-column>
<el-table-column prop="pageCreateTime" label="創建時間"></el-table-column>
</el-table>
<!-- 分頁欄 -->
<el-pagination
@current-change="changePage"
:current-page.sync="params.page"
:page-size="params.size"
layout="total, prev, pager, next"
:total="total"
style="float: right">
</el-pagination>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
export default {
data() {
return {
tableData: [],
total: 50,
params: {
page: 1,
size: 20
}
}
},
methods: {
// 分頁查詢
changePage:function() {
this.query()
},
// 查詢
query:function() {
// 分頁查詢CMS頁面
console.log("當前頁碼:" + this.params.page + ", 當前記錄數:" + this.params.size);
cmsApi.page_list(this.params.page, this.params.size, this.params).then(res => {
// 獲取數據
this.total = res.queryResult.total
this.tableData = res.queryResult.list
})
}
},
mounted() {
this.query()
}
}
</script>
其中的頁面分頁、表格等,建議直接從element ui
官網複製。
頁面路由
-
修改
src/module/cms/router/index.js
中的內容import Home from '@/module/home/page/home.vue'; import page_list from '@/module/cms/page/page_list.vue'; export default [{ path: '/cms', component: Home, name: 'CMS內容管理', hidden: false, children:[ { path:'/cms/page/list', name:'頁面列表', component: page_list, hidden:false} ] }]
-
修改
src/base/router/index.js
中的內容,添加cms
模塊的路由import Vue from 'vue' import Router from 'vue-router' // 導入路由規則 import HomeRouter from '@/module/home/router' import CmsRouter from '@/module/cms/router' // 導入cms模塊路由規則 Vue.use(Router); // 定義路由配置 let routes = [] let concat = (router) => { routes = routes.concat(router) } // 合併路由規則 concat(HomeRouter) concat(CmsRouter)// 新增cms模塊路由 export default routes;
API方法調用定義
修改src/module/cms/api/cms.js
中的內容
import http from './../../../base/api/public'
export const page_list = (page,size,params) => {
return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'/'+size)
}
跨域問題解決
使用proxyTable
解決跨域問題。
機制:
前端發送請求時,不再直接發送給後端服務器,而是發送給當前域的代理服務;然後由代理服務將請求發送給我後端服務器獲取數據返回給前端頁面。因爲只有瀏覽器會存在跨域問題,而我們的請求是由代理服務發送出去的所有不存在跨域問題。