1.将前端工程的压缩包导入到指定文件夹下解压
点击pachage.json,启动dev.确认导入成功
2.单页面应用的原理和优缺点
2.1什么是单页面应用
2.2单页面应用的优点
1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染
2.3单页面应用的缺点
1、首页加载慢
单页面应用会将js、 css打包成一个文件,在加载页面显示的时候加载打包文件,如果打包文件较大或者网速慢则
用户体验不好。
2、SEO不友好
SEO(Search Engine Optimization)为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对JS支持不好,所以使用单页面应用将大大减少搜索引擎对网站的收录。
2.4总结:单页面应用比较适合后台管理系统项目.
3.创建页面
3.1页面结构
在model目录创建 cms模块的目录结构
在page目录新建page_list.vue,扩展名为.vue。
<template>
<div>
<!--编写页面静态部分,即view部分-->
测试页面显示...
</div>
</template>
<script>
/*编写页面静态部分,即model及vm部分。*/
</script>
<style>
/*编写页面样式,不是必须*/
</style>
3.2页面路由
3.2.1)在cms的router下配置路由
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
export default [{
path: '/',
component: Home,
name: 'CMS',//菜单名称
hidden: false,
children:[
{path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
]
}
]
3.2.2)在base目录下的router导入cms模块的路由
导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)//加入home模块的路由
concat(CmsRouter)//加入cms模块的路由
export default routes;
3.3测试
重启工程,刷新页面
4.element-ui
Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网:https://element.faas.ele.me/#/zh-CN/component/installation
element-ui的使用,参考官网组件
5.Api调用
5.1Api方法定义
在cms模块的api目录定义cms.js,
在cms.js中定义如下js方法,此方法实现http请求服务端页面查询接口
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);
}
5.2Api调用
前端页面导入cms.js,调用js方法请求服务端页面查询接口。
1)导入cms.js
import * as cmsApi from '../api/cms'
2)在query方法中调用 page_list方法
query() {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
this.total = res.queryResult.total;
this.list = res.queryResult.list;
})
},
5.3跨域问题的解决
测试访问,出现错误
原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。
解决:采用proxyTable解决。
proxyTable是什么?
vue-cli提供的解决vue开发环境下跨域问题的方法,proxyTable的底层使用了
http-proxymiddleware(https://github.com/chimurai/http-proxy-middleware),
它是http代理中间件,它依赖node.js,基本原理是用服务端代理解决浏览器跨域:
解决原理:前端访问代理中间件,代理中间件再去访问后端服务.服务端和服务端之间是不存在跨域的.所以解决了这个问题
具体的方法如下:
1)修改前端的访问路径
2)在config/index.js下配置proxyTable。
以/api/cms开头的请求,代理请求http://localhost:31001
'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''
}