手摸手vue2+Element-ui整合Axios

举报
QGS 发表于 2023/11/26 21:59:44 2023/11/26
【摘要】 vue2+Element-ui整合Axios

后端WebAPI准备


跨域问题

为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,称为同源策略,同源策略是浏览器安全的基石

同源策略( Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能

所谓同源(即指在同一个域)就是两个页面具有相同的协议( protoco),主机(host)和端口号(port)

当一个请求u的协议、域名、端口三者之间任意一个与当前页面ur不同即为跨域,此时无法读取非同源网页的 Cookie,无法向非同源地址发送AJAX请求

解决跨域问题

CORs( Cross- Origin Resource Sharing)是由W3C制定的一种跨域资源共享技术标准,其目的就是为了解决前端的跨域请求

CORS可以在不破坏即有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。

CORS将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持。

Springboot中配置CORS

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //允许访问的路径
                .allowedOrigins("*")
                .allowedMethods("GET","POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(168000)
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

或者使用@CrossOrigin注解 //表示都允许跨域访问

Element-ui项目创建

Element网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

创建vue2项目

 

 

npm i element-ui

#全局注册ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

图标库

https://fontawesome.dashgame.com/

安装

npm i font-awesome


#全局注册font-awesome

import 'font-awesome/css/font-awesome.min.css';


Axios

Axios,是一个基于promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic (即同一套代码可以运行在浏览器和node.js)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest

axios官网 https://www.axios-http.cn/docs/req_config

vue2项目安装axios

npm i axios


Vueaxios整合


配置说明
#配置请求根路径
axios.defaults.baseURL=http://api.com

#将 axles作为全局的自定义属性,每个组件可以在内部直接访问(Vue3)
appconfig.glcbalProperties.$http = axios

#将 axles作为全局的自定义属性,每个组件可以在内部直接访问(Vue2)
Vue.prototype.$http=axios

vue全局绑定axios

import axios from 'axios'

axios.defaults.baseURL = "http://192.168.1.8:8007"
Vue.prototype.$add = axios


效果











【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。