欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学成在线 第2天 讲义-CMS前端开发 三

程序员文章站 2022-05-25 10:31:26
...

3.2 Api调用 
3.2.1 Api方法定义 
cms模块的api目录定义cms.jscms.js中定义如下js方法,此方法实现http请求服务端页面查询接口。

//public是对axios的工具类封装,定义了http请求方法
import http from
'
./../../../base/api/public
'
export const page_list
=
(page,size,params)
=
> {
return http
.requestQuickGet(
'
http://localhost:31001/cms/page/list/
'
+page+
'
/
'
+size)
}

axios实现了http方法的封装,vue.js官方不再继续维护vue-resource,推荐使用 axios
3.2.2 Api调用 
前端页面导入cms.js,调用js方法请求服务端页面查询接口。
1)导入cms.js 

import*as cmsApi from'../api/cms'

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-proxy-middlewarehttps://github.com/chimurai/http-proxy-middleware),它是http代理中间件,它依赖node.js基本原理是用服务端代理解决浏览器跨域: 

学成在线 第2天 讲义-CMS前端开发 三 
cms跨域解决原理: 
1、访问页面http://localhost:11000/ 
2、页面请求http://localhost:11000/cms
由于urlhttp://localhost:31001/cms...
改为http://localhost:11000/cms.",所以不存在跨域
3、通过proxyTablenode服务器代理请求 http://localhost: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+
'
/
'
+size)
}

2)在confifig/index.js下配置proxyTable
/api/cms开头的请求,代理请求http://localhost:31001 

'
/api/cms
'
: {
target:
'
http://localhost:31001
'
,
pathRewrite: {
'^
/api
'
:
''
//实际请求去掉/api
}

3.4 分页查询测试 
1、定义分页视图 
使用v-on监听更改分页事件 

<el
‐
pagination
layout
=
"
prev, pager, next
"
:page
‐
size
=
"
this.
params.size
"
v
‐
on:current
‐
change
=
"
changePage
"
:total=
"
total
"
:current
‐
page
=
"
this.
params.
page
"
style
=
"
float:right;
"
>
</el
‐
pagination>

2、定义数据模型对象

data() {
return {
list:[],
total:50,
params:{
page:1,//页码
size:2//每页显示个数
}
}

3、定义分页方法,接收页码参数

//分页查询,接收page页码
changePage(page){
this.
params.
page
=
page;
this.
query()
}

修改完毕,测试分页效果。

相关标签: 技术文章