axios在vue中的使用

我就是我 2021-07-24 22:30 443阅读 0赞

**目录**

一 视频

二 教程

三 源码

四 服务端代码结构

1 接口文档.xlsx

2 router.js

五 启动并测试服务端

六 安装yarn

七 安装vant

八 安装vue

九 客户端代码结构

十 运行步骤

十一  运行效果

十二 说明

1 Axios的使用

--------------------

# **一 视频** #

[https://www.imooc.com/learn/1152][https_www.imooc.com_learn_1152]

# **二 教程** #

[https://www.runoob.com/vue2/vuejs-ajax-axios.html][https_www.runoob.com_vue2_vuejs-ajax-axios.html]

# **三 源码** #

[https://github.com/cakin24/axios-learn][https_github.com_cakin24_axios-learn]

[https://github.com/cakin24/axios\_node\_api][https_github.com_cakin24_axios_node_api]

# **四 服务端代码结构** #

![20191101211515453.png][]

## 1 接口文档.xlsx ##

接口文档

## 2 router.js ##

控制器功能

# **五 启动并测试服务端** #

cnpm install
    node index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# **六 安装yarn** #

npm install yarn

# **七 安装vant** #

yarn add vant
    yarn add babel-plugin-import

# **八 安装vue** #

npm install -g @vue/cli

# **九 客户端代码结构** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# **十 运行步骤** #

1 Project setup
    npm install
    2 Compiles and hot-reloads for development
    npm run serve
    3 Compiles and minifies for production
    npm run build
    4 Run your tests
    npm run test
    5 Lints and fixes files
    npm run lint

# **十一  运行效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

# 十二 说明 #

## 1 Axios的使用 ##

a 安装 vue axios

npm install --save axios vue-axios

b 在main.js中引入

在项目中使用axios模块

import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios)

c 发送axios请求

参考官网：[https://gitee.com/mirrors/axios?\_from=gitee\_search][https_gitee.com_mirrors_axios_from_gitee_search]

d 后端解决跨域问题

## 2 跨域问题 ##

a 什么是跨域

这是浏览器对 js 的一种安全现状，也就是说浏览器的页面内去访问其他服务器上的资源的时候，就会出现跨域。同源策略明确了什么情况下是属于跨域。所谓的同源策略，指的是协议、域名、端口完全相同，才是安全的。

b 什么是同源

同源是指域名、协议、端口均相同。

c 使用CORS（跨资源共享）解决跨域问题

CORS是一个W3C标准，全称是“跨资源共享”。它允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10.整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨域，就会自动添加一些附件头信息，有时还会多一次附加请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信（在header中设置“Access-Control-Allow-Origin”,"\*"）

[https_www.imooc.com_learn_1152]: https://www.imooc.com/learn/1152
[https_www.runoob.com_vue2_vuejs-ajax-axios.html]: https://www.runoob.com/vue2/vuejs-ajax-axios.html
[https_github.com_cakin24_axios-learn]: https://github.com/cakin24/axios-learn
[https_github.com_cakin24_axios_node_api]: https://github.com/cakin24/axios_node_api
[20191101211515453.png]: /images/20210724/985f3674e57842019126ae12e7e16015.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/7f484bec3c254908ac5b3f0fa3b49bb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/143ebdd043304cb5b425053f9ee734d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/42780a33823a4f2da5208267af879401.png
[https_gitee.com_mirrors_axios_from_gitee_search]: https://gitee.com/mirrors/axios?_from=gitee_search