CMS系统使用Vue-cli脚手架创建
package.json：记录了工程所有依赖，及脚本命令，类似于pom文件
开发使用：npm run dev
打包使用：npm run build
webpack.base.conf.js：webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader
main.js：工程的入口文件
src：存放页面及JS代码
dist：webpack打包输出静态文件
assert：放图片
base：类似于微服务工程中的common，通用工具工程
common：存放工具类
component：脚手架自动生成的文件夹
mock：前端单元测试
module：常用的文件夹：存放模块代码，需要掌握
statics：静态文件
vuex：后面用到再说
import是ES6的语法，类似于require
运行：右键package.json—选择show Npm Script—点击dev
单页面应用SPA
只有一张Web页面的应用，页面上所有操作都由JS来控制。
优点：
1、用户体验好，不用刷新页面，整个过程由Ajax来操作；
2、适合前后端分离开发；
缺点：
1、首页加载速度慢
2、SEO(搜索引擎优化)不友好，抓取页面中的数据
总结：
本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。
前端页面开发
1、在model目录创建 cms模块的目录结构
2、在page目录新建page_list.vue，扩展名为.vue
.vue文件的结构如下：
<template>编写页面view部分</template>
<script>编写页面model及vm部分</script>
<style>编写页面样式，不是必须</style>
注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。
页面路由：实现url访问到页面
//配置路由 @相当于src路径
import Home from ‘@/module/home/page/home.vue’;
//导入路由规则
import CmsRouter from ‘@/module/cms/router’
//合并路由规则
concat(CmsRouter)
3、使用Element-UI进行开发
Element组件
跨域问题：
由于浏览器的同源策略不允许跨域访问，当前后端请求的协议(http)、域名(localhost)或端口号(11000)不相同时会出现跨域问题
同源策略：指协议、域名、端口相同
例如：
前端访问页面：http://localhost:11000/cms
后端请求接口：http://localhost:31001/cms
解决：采用proxyTable解决，它是http代理中间件，它依赖node.js，前端请求11000/cms，代理通过解析/cms去请求31001/cms，因为nodeJS服务端跟后台服务端之间请求是不存在跨域问题
proxyTable的基本原理：用服务端代理解决浏览器跨域
具体配置如下：
1、请求前加/api前缀
2、在config/index.js下配置proxyTable：
原理：
前端访问页面：http://localhost:11000/api/cms
经过nodejs中proxyTable代理后端请求接口：http://localhost:31001/cms
分页数据效果：
分页数据展示流程：
1、在page_list.vue文件中使用el-table标签初始化分页表头。
2、页面一加载就加载数据，需要用到vue中的钩子函数，通常使用最多的是created和mounted两个钩子：
created：DOM元素还没有渲染生成时调用
mounted：DOM元素渲染完成后调用该方法
在该实例中使用到了mounted钩子，页面一加载就能查询到分页数据：
当分页数据有变化时会调用changePage函数，然后调用query函数
3、转化querystring.stringify(params)入参值
4、利用axios发送请求
前后端请求响应流程小结：
1、在浏览器输入前端url
2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3、首先执行page_list.vue中的钩子方法
4、在钩子方法中调用query方法
5、在query方法中调用cms.js中的page_list方法
6、cms.js中的page_list方法通过axios请求服务端接口
7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list) 8、服务端处理，将查询结果响应给前端
9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量
10、vue.js通过双向数据绑定将list数据渲染输出
