【vue会员管理系统】篇三之自定义Axios、初试后台接口、跨域问题

一、自定义封装Axios异步对象和添加拦截器

因为本项目很多组件需要通过Axios发送一步请求,所以封装Axios对象,自己封装的Axios在后续可以使用axios中提供的拦截器。

1.在src文件夹下创建utils文件夹,再在utils文件夹下创建request.js文件

2.填入以下代码

复制代码
import axios from "axios";

//创建自定义axios对象
const request = axios.create({
  baseURL: "/", //默认路径
  timeout: 5000, //请求超时
});

//请求拦截器
request.interceptors.request.use(
  (config) => {
    //请求拦截
    return config;
  },
  (error) => {
    //出现异常
    return Promise.reject(error);
  }
);

//响应拦截
request.interceptors.request.use(
  (response) => {
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default request; //导出自定义的axios

二、调用后台服务接口API封装(浅试)

1.在public文件夹下新建db.json文件,并添加数据。

复制代码
[
    {"name":"hh","age":"18"},
    {"name":"jj","age":"18"},
    {"name":"kk","age":"18"}
]

2.在src文件夹下新建api文件夹,再在api文件夹下新建test.js文件,用来封装测试调用的接口。并在test.js文件里填入以下代码:

复制代码
/**
 * 封装调用接口
 */
//同import axios from "@/utils/request";
import request from "@/utils/request";

export default {
  getList() {
    const req = request({
      method: "get",
      url: "/db.json",
    });
    return req;
  },
};

3.打开components下的HelloWorld.vue。在<script>中添加以下代码:

复制代码
import testApi from "@/api/test";

 data() {
    return {
      list: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      testApi.getList().then( response => {
        console.log("get3", response.data);
        this.list = response.data;//将数据给list数组
      });
    },
  },

4.将顶部的<h1></h1>标签里的"msg"改成"list",如下图所示;

5.运行,若页面变成下面的样子则说明axios对象和api封装成功。

三、跨域问题及解决

1.跨域问题如何产生:当前后端的协议、域名、端口三者中有一个不同就会产生跨域问题。

2.解决:

方式2:在vue.config.js文件中新增以下代码

复制代码
//const { defineConfig } = require("@vue/cli-service");
module.exports = {
  devServer: {
    port: 8888, //如果端口被占用则+1
    host: "localhost",
    https: false, //协议
    open: true, //启动服务时自动打开浏览器
    proxy: {
      //开发环境代理配置
      "/dev-api": {
        //目标服务器地址
        target: "http://localhost:8001",
        changeOrigin: true, //开启代理服务器
        pathRewrite: {
          //将请求地址前缀、dev-api替换为空的
          "^/dev-api": "",
        },
      },
    },
  },
  lintOnSave: false, //关闭格式检查
  productionSourceMap: false, //打包时不生成.map文件
};
相关推荐
西西木科技丨Shopify开发机构2 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙8 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1110 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆14 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er18 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0622 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444024 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆25 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子28 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain935 分钟前
Gradle 8.11.1的升级之旅
前端