在query方法中调用 page_list方法
//查询 query:function () { 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 }) } 3.3 跨域问题解决测试上边的代理 ，结果报错如下 ：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:11000' is therefore not allowed access.原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。
proxyTable是什么？
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxymiddleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js， 基本原理是用服务端代理解决浏览器跨域：
cms跨域解决原理：
1、访问页面:11000/
2、页面请求:11000/cms
由于 url由:31001/cms...改为“:11000/cms."，所以不存在跨域
3、通过proxyTable由node服务器代理请求 :31001/cms
服务端不存在跨域问题
具体的配置如下：
1）修改api方法中url的定义
请求前加/api前缀
//public是对axios的工具类封装，定义了http请求方法 import http from './../../../base/api/public' let sysConfig = require('@/../config/sysConfig') let apiUrl = sysConfig.xcApiUrlPre; export const page_list = (page, size, params) => { return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'http://www.likecs.com/'+size) }2）在config/index.js下配置proxyTable
以/api/cms开头的请求，代理请求:31001
'/api/cms': { target: 'http://localhost:31001', pathRewrite: { '^/api': '' } 3.4 分页查询测试1、定义分页视图
使用v-on监听更改分页事件
v‐on:current‐change="changePage" // 作用是点击下一页后，自动更新当前页面数据 <!-- 分页--> <el-pagination v-on:current-change="changePage" layout="prev, pager, next" :total="total" :current-page="this.params.page" :page-size="this.params.size"> </el-pagination>2、定义数据模型对象
data() { return { list: [], total: 50, params: { page: 1, // 页码 size: 2 //每页显示个数 } } },3、定义分页方法，接收页码参数
//分页查询，接收page页码 changePage(page) { this.params.page = page; this.query(); },修改完毕，测试分页效果。
3.5 进入页面立即查询目前实现的功能是进入页面点击查询按钮向服务端表求查询，实际的需求是进入页面立即查询。
如何实现？
这要用到vue的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、 编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
通常使用最多的是created和mounted两个钩子：
created：vue实例已创建但是DOM元素还没有渲染生成。 mounted：DOM元素渲染生成完成后调用。本例子在两个方法的任意一个都满足需求：
添加如下代码：
mounted() { // 默认查询页面 this.query() }重新刷新页面。
4 前后端请求响应流程小结