单页面
百度解释:
优点:
1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染。
缺点:
1、首页加载慢
单页面应用会将js、 css打包成一个文件,在加载页面显示的时候加载打包文件,如果打包文件较大或者网速慢则
用户体验不好。
2、SEO不友好
SEO(Search Engine Optimization)为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对JS支持不好,所以使用单页面应用将大大减少搜索引擎对网站的收录。
页面路由
在cms目录下配置index.js文件
import Home from "../../home/page/home";
import page_list from "../page/page_list";
export default [{
path: '/',
component: Home,
name: 'CMS内容管理',
hidden: false,
children: [{
path: '/cms/page/list',
component: page_list,
name: '页面列表',
hidden: false,
}
]
}
]
注意:配置路由需要导入该组件,该设置主要是定义了组件的访问路径path
在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.vue页面
<template>
<div>
<el-button style="margin-top: 10px;" type="primary" size="small" @click="query">查询</el-button>
<!--表格-->
<el-table
:data="list"
stripe
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="120">
</el-table-column>
<el-table-column prop="pageWebPath" label="访问路径" width="120">
</el-table-column>
<el-table-column prop="pagePhysicalPath" label="物理路径" width="120">
</el-table-column>
<el-table-column prop="pageCreateTime" label="创建时间" width="120">
</el-table-column>
<el-table-column prop="pageType" label="页面类型" width="120">
</el-table-column>
</el-table>
<el-pagination style="float: right"
background
layout="prev, pager, next"
:total="total"
:current-page.sync="params.page"
:page-size.sync="params.size"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script>
import * as cmsApi from '../api/cms'
export default {
name: "page_list",
data() {
return {
list: [],
params: {
page: 2, //当前页码
size: 5, //每页显示数据
},
total: 50
}
},
methods: {
//处理页码改变
handleCurrentChange(page) {
// alert(page);
this.params.page = page;
this.query();
},
//分页查询
query() {
cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
console.log(res)
this.total = res.queryResult.total;
this.list = res.queryResult.list;
})
},
},
mounted() {
this.query();
}
}
</script>
<style>
</style>
在cms模块的api目录定义cms.js,
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) => {
return http.requestQuickGet(apiUrl +'/cms/page/list/'+page+'/'+size)
}
在前端页面何中调用该api
import * as cmsApi from '../api/cms'
在config/index.js下配置proxyTable实现前端跨域问题去访问服务端数据
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': '' //实际去掉api
}
//target: 'http://127.0.0.1:50201'
}
另外根据vue的生命周期,如果想在访问页面前访问服务端数据可以使用mounted方法
mounted() {
this.query();
}