浅谈vue-cli集成axios使用实例_vuecli5加axios-优快云博客

该博客主要介绍了在Vue中使用Axios进行远程数据交互的方法。包括Axios的定义、安装导入，以及在App.vue中导入、调用和配置。还提及了Springboot后台项目搭建，同时针对vue.js跨域问题给出添加全局配置和请求配置两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
- 目标
- 关键字
一、定义
二、安装导入
- 安装 npm install axios &&>npm install --save axios vue-axios
三、使用及场景
整体文件
坑
- 1 添加全局配置
- 2 添加请求配置
参考

前言

读书须用意，一字值千金。

目标

掌握调用动态数据，后台服务搭建（springboot），

关键字

钩子函数
axios

一、定义

远程数据交互的工具，类似于jquery的ajax

二、安装导入

安装 npm install axios &&>npm install --save axios vue-axios

D:\vuework\vue-work-03\hello-vue>npm install axios
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ axios@0.21.0
added 1 package from 1 contributor in 10.216s

40 packages are looking for funding
  run `npm fund` for details



   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New patch version of npm available! 6.14.4 -> 6.14.9      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.9   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯


D:\vuework\vue-work-03\hello-vue>npm install --save axios vue-axios
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN vue-axios@3.2.0 requires a peer of vue@>= 3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

三、使用及场景

导入 App.vue

import axios from 'axios'
// 将axios工具绑定到vue实例的原型中：目的：为了在任何vue组件中都能够使用this.$axios获取axios工具
Vue.prototype.$axios = axios;

调用

this.$axios
      .get("/api/api/getAllStudent")
      .then(res => {
         console.log("加载客户列表..."+res.data);
        this.tableData = res.data;
        console.log("success===>" + JSON.stringify(res));
      })
      .catch(error => {
        console.log("error====>" + JSON.stringify(error));
      });

配置（config/index.js）

 //  /api/customer/list  将api->http://localhost:8081/customer/list
    proxyTable: {
      '/api': {
        target:'http://localhost:8081/', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请 求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，/api/customer/list          
          '^/api': '' // 替换target中的请求地址，也就是说以后你在请求 http://localhost:8081/api/customer/list这个地址的时候直接写成/api即可
        }
      }
    },

Springboot后台项目

后续放入到我的GIT上

整体文件

App.vue

<template>
  <div id="app">
    <el-container>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: []
      }
    }
    , //钩子函数,当实例创建完成之后发起请求
  created() {
    console.log("加载客户列表...");
  //  jQuery
  //   $.get("http://localhost:8081/getAllStudent", function(res) {
  //     this.tableData = res.data;
  //   })
      this.$axios
      .get("/api/api/getAllStudent")
      .then(res => {
         console.log("加载客户列表..."+res.data);
        this.tableData = res.data;
        console.log("success===>" + JSON.stringify(res));
      })
      .catch(error => {
        console.log("error====>" + JSON.stringify(error));
      });
  }

};
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //  /api/customer/list  将api->http://localhost:8081/customer/list
    proxyTable: {
      '/api': {
        target:'http://localhost:8081/', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请 求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，/api/customer/list          
          '^/api': '' // 替换target中的请求地址，也就是说以后你在请求 http://localhost:8081/api/customer/list这个地址的时候直接写成/api即可
        }
      }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

坑

vue.js跨域问题 :CORS 头缺少 ‘Access-Control-Allow-Origin’)
这个是springboot的问题
解决方案两个

1 添加全局配置


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
	@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() {
			@Override
			public void addCorsMappings(CorsRegistry registry) {
				registry.addMapping("/api/**"); //对应的接口
			}
		};
	}
}

2 添加请求配置

在这里插入图片描述


response.setHeader("Access-Control-Allow-Origin", "*");

参考

浅谈vue-cli安装及快速创建：
https://blog.youkuaiyun.com/aa327056812/article/details/110487535

https://www.npmjs.com/package/axios
多留言多点赞你们的只支持是我坚持下去的动力，都支棱起来！！！