Vue实现分页与前端跨域问题解决策略(二)

CMS系统使用Vue-cli脚手架创建
package.json：记录了工程所有依赖，及脚本命令。
开发使用：npm run dev
打包使用：npm run build
webpack.base.conf.js：webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。
main.js：工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
index.html是模板文件。

单页面应用SPA：只有一张Web页面的应用，页面上所有操作都由JS来控制。
优点：
1、用户体验好，不用刷新页面，整个过程由Ajax来操作；
2、适合前后端分离开发；
缺点：
1、首页加载速度慢；
2、SEO(搜索引擎优化)不友好；
总结：
本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。

页面结构:
.vue文件的结构如下：
<template>：编写页面view部分
<script>：编写页面model及vm部分
<style>：编写页面样式，不是必须
注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。

页面路由：实现url访问到页面
//配置路由
import Home from ‘@/module/home/page/home.vue’;
//导入路由规则
import CmsRouter from ‘@/module/cms/router’
//合并路由规则
concat(CmsRouter)

当前后端的协议、域名或端口不同时会出现跨域问题
原因：浏览器的同源策略不允许跨域访问
同源策略：指协议、域名、端口相同
例如：
前端访问页面：http://localhost:11000/
后端请求接口：http://localhost:31001/
解决：采用proxyTable解决，它是http代理中间件，它依赖node.js。
proxyTable的基本原理：用服务端代理解决浏览器跨域。
cms跨域解决原理：
1、前端访问页面：http://localhost:11000/
2、后端请求接口：http://localhost:11000/cms
具体配置如下：
1、请求前加/api前缀

2、在config/index.js下配置proxyTable：

分页数据效果：

分页数据展示流程：
1、在page_list.vue文件中使用el-table标签初始化分页表头。

2、页面一加载调用changePage函数，然后调用query函数。

3、转化querystring.stringify(params)入参值

4、利用axios发送请求