vue项目连接到后端接口

背景

后端采用的是若依springboot分离版本，前端是自己搭建的vue项目，不是若依的前端框架，需要免认证进行调用接口的话，注释掉安全认证配置中的鉴权认证，或者将接口加入白名单

1.安装axios

npm install axios --save

2.在request.js中编写请求后端的路径，创建src/utils/request.js

import axios from 'axios'
 
const request = axios.create({
    baseURL: 'http://localhost:8082',
    timeout: 5000
})
export default request

前端默认启动是8080端口，与后端若依框架的启动接口冲突，所以将后端改为了8082

3.调用后端接口

import request from '@/utils/request';
...//此处省略其他代码
created(){
this.getList();
},
methods: {
    getList() {
        request.get('/dzj/registerPrint')
          .then(res => {
            console.log(res.data);
              //this.tableData = res.data
       })
  },
}

4.启动项目，查看结果

5.附可能产生的问题

启动报错

npm run dev

> [email protected] dev E:\前端\dzjDemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 1 1 1 1 1 1 1 1 1 1 1 1   1 1 13% building modules 32/45 modules 13 active ...ate&index=0!E:\前端\dzjDemo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.   
 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1    1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2  2 2 2 26% building modules 137/152 modules 15 active ...E:\前端\dzjDemo\src\components\Foot.vu 2 2 2 2 2  2 2 2 2 2 2 2 2 2 2 2 2 2 2  5 94% asset optimization

 ERROR  Failed to compile with 3 errors                                                                                                                                             13:51:04

 error  in ./node_modules/axios/lib/adapters/fetch.js

Module parse failed: Unexpected token (162:6)
You may need an appropriate loader to handle this file type.
| 
|     request = new Request(url, {
|       ...fetchOptions,
|       signal: composedSignal,
|       method: method.toUpperCase(),

 @ ./node_modules/axios/lib/adapters/adapters.js 4:0-38
 @ ./node_modules/axios/lib/axios.js
 @ ./node_modules/axios/index.js
 @ ./src/utils/request.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view/register/print.vue
 @ ./src/view/register/print.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/axios/lib/platform/index.js

Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| export default {
|   ...utils,
|   ...platform
| }

 @ ./node_modules/axios/lib/defaults/index.js 8:0-44
 @ ./node_modules/axios/lib/axios.js
 @ ./node_modules/axios/index.js
 @ ./src/utils/request.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view/register/print.vue
 @ ./src/view/register/print.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/axios/lib/core/mergeConfig.js

Module parse failed: Unexpected token (6:69)
You may need an appropriate loader to handle this file type.
| import AxiosHeaders from "./AxiosHeaders.js";
|
| const headersToObject = (thing) => thing instanceof AxiosHeaders ? { ...thing } : thing;
|
| /**

 ERROR  Failed to compile with 1 errors                                                                                                                                             13:57:22

 error  in ./node_modules/axios/index.js

Module build failed: Error: ENOENT: no such file or directory, open 'E:\前端\dzjDemo\node_modules\axios\index.js'

 @ ./src/utils/request.js 1:0-26
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/view/register/print.vue
 @ ./src/view/register/print.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解决方式：降低axios版本
（1）删除node-module中axios文件夹
（2）在“package.json”中，将axios的版本信息改为1.5.0
（3）在命令行中输入 npm install [email protected] --save，安装指定版本的axios
再次启动项目就正常了