摘要:本文主要向大家介绍了JAVA语言之Java的新项目学成在线笔记-day2(四),通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助。
本文主要向大家介绍了JAVA语言之Java的新项目学成在线笔记-day2(四),通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助。
3.3 跨域问题解决
测试 上边的代理 ,结果 报错如下 :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '//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、访问页面//localhost:11000/
2、页面请求//localhost:11000/cms
由于url由//localhost:31001/cms...改为“<a style="color: rgb(66, 133, 244);" href="//localhost:11000/cms." ,所以不存在跨域"="" rel="nofollow">//localhost:11000/cms.",所以不存在跨域 3、通过proxyTable由node服务器代理请求 //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)在config/index.js下配置proxyTable。 以/api/cms开头的请求,代理请求//localhost:31001
'/api/cms': {
target: '//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()
}
修改完毕,测试分页效果。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注编程语言JAVA频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号