Antd+Vue最详细的搭建流程（下篇之封装Axios、Mock模拟数据、Router基础路由配置和Vuex全局存储使用）

最新推荐文章于 2025-04-01 15:16:52 发布

鲤鲤鲤carp

最新推荐文章于 2025-04-01 15:16:52 发布

阅读量3.9k

点赞数 13

分类专栏： vue学习文章标签： vue es6 vue.js node.js javascript

本文链接：https://blog.youkuaiyun.com/qq_34027761/article/details/108533559

版权

本文详细介绍了在Vue.js项目中，如何使用Axios进行API请求封装，Mock.js模拟数据，Vue Router实现路由管理和Vuex进行状态管理。首先，通过配置Axios的baseURL和拦截器实现了接口的统一处理。接着，利用Mock.js创建了动态数据模拟，避免了真实API的依赖。然后，讲解了Vue Router的配置，包括动态路由、HTML5 History模式以及404页面的处理。最后，通过Vuex创建了模块化的状态管理，演示了如何在登录后保存用户信息以及动态修改系统设置。整个过程涵盖了前端开发的多个核心技术，帮助开发者理解如何在实际项目中运用这些工具。

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

五、Vue中Axios过滤封装请求

Vue的基础环境的搭建安装请看上篇

1. 安装Axios

npm install axios

2. 使用Axios

(1)创建开发环境、生产环境、测试环境的配置文件

在根目录（项目文件夹）下新建三个文件
第一个文件（.env.development）开发环境配置文文件

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '/development-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

第二个文件（.env.production）开发环境配置文文件

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '/production-api'

第三个文件（.env.staging）开发环境配置文文件

NODE_ENV = production

# 测试环境配置
ENV = 'staging'

# 若依管理系统/测试环境
VUE_APP_BASE_API = '/staging-api'

(2)创建request.js 过滤封装请求

在src文件夹下新建utils文件夹，在utils下新建啊request.js文件
目录如下:

在这里插入图片描述
request.js

import axios from "axios";
import {
    Message } from "ant-design-vue";

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
   
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000,
});
// request拦截器
service.interceptors.request.use(
  (config) => {
   
    // 是否需要设置 token
    return config;
  },
  (error) => {
   
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (success) => {
   
    if (success.status && success.status == 200 && success.data.status == 500) {
   
      Message.error({
    message: success.data.msg });
      return;
    }
    if (success.data.msg) {
   
      Message.success({
    message: success.data.msg });
    }
    return success.data;
  },
  (error) => {
   
    if (error.response.status == 504 || error.response.status == 404) {
   
      Message.error({
    message: "服务器被吃了( ╯□╰ )" });
    } else if (error.response.status == 403) {
   
      Message.error({
    message: "权限不足，请联系管理员" });
    } else if (error.response.status == 401) {
   
      Message.error({
   
        message: error.response.data.msg
          ? error.response.data.msg
          : "尚未登录，请登录",
      });
      location.href = "/";
    } else {
   
      if (error.response.data.msg) {
   
        Message.error({
    message: error.response.data.msg });
      } else {
   
        Message.error({
    message: "未知错误!" });
      }
    }
   return Promise.reject(error);
  }
);

export default service;

(3)测试一下，是否拦截成功

在src文件夹下新建api文件夹，在api文件夹下新建login.js
login.js

import request from "@/utils/request";

// 登录方法
export function login(username, password, code, uuid) {
   
  const data = {
   
    username,
    password,
    code,
    uuid,
  };
  return request({
   
    url: "/login",
    method: "post",
    data: data,
  });
}

修改之前的login.vue文件

<template>
  <a-form :form="form" class="login-form" @submit="handleSubmit">
    <a-form-item>
      <a-input
        v-decorator="[
          'username',
          {
   
            rules: [{
    required: true, message: '请输入用户名!' }],
          },
        ]"
        placeholder="用户名"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'password',
          {
   
            rules: [{
    required: true, message: '请输入密码!' }],
          },
        ]"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-checkbox
        v-decorator="[
          'remember',
          {
   
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
      >记住我</a-checkbox>
      <a class="login-form-forgot" href>忘记密码</a>
      <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
      <a href="/register">注册</a>
    </a-form-item>
  </a-form>
</template>

<script>
import {
    login } from "@/api/login";
export default {
   
  beforeCreate() {
   
    this.form = this.$form.createForm(this, {
    name: "normal_login" });
  },
  methods: {
   
    handleSubmit(e) {
   
      e.preventDefault();
      this.form.validateFields((err, values) => {
   
        if (!err) {
   
          this.loading = true;
          console.log("表单里输入的值: ", values);
          var {
    username, password } = values;
          login(username, password)
            .then((res) => {
   
              this.loading = false;
              this.$message.info("登陆成功！");
            })
            .catch((error) => {
   
              this.loading = false;
              this.$message.error("登陆失败！");
            });
        }
      });
    },
  },
};
</script>
<style>
.login-form {
   
  max-width: 300px;
  margin: auto !important;
}
.login-form-forgot {
   
  float: right;
}
.login-form-button {
   
  width: 100%;
}
</style>

测试成功
在这里插入图片描述

六、Vue中mockjs模拟数据

1.安装mockjs

npm install mockjs --save-dev

2.预备知识

（1）Mock主要方法

Mock.mock( rurl?, rtype?, template|function( options ) )
根据数据模板生成模拟数据
（1）属性 rurl 可选
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、’/domian/list.json’。
（2）属性 rtype 可选
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
（3）template 可选
表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。
（4）function(options) 可选
表示用于生成响应数据的函数。
options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范

Mock.setup( settings )
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout
(1)属性settings 必选配置项集合
(2)timeout 可选

//指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容
//也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'
Mock.setup({
   
    timeout: 400
})
Mock.setup({
   
    timeout: '200-600'
})

（2）语法规范

（1）数据模板定义规范（Data Template Definition，DTD）
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

（2）数据占位符定义规范（Data Placeholder Definition，DPD）
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为：

@占位符
@占位符(参数 [, 参数])

3.使用mockjs

（1）创建mock.js

在项目的根目录（与src同级）下，新建mock文件夹，并在mock文件夹下新建mock.js文件

// 引入mockjs
const Mock = require("mockjs");
// 获取 mock.Random 对象
const Random = Mock.Random;
//利用Random随机个一个用户名称和年龄
const userInfo={
   
    "name":Random.cname(),//随机生成一个常见的中文姓名
    "age":Random.integer(0,100),//随机生成0~100之间的数
    "nickName":"@CNAME",//随机生成一个常见的中文姓名(采用数据占位符定义规范写)
    "ageIternet|0-100":1//随机生成0~100之间的数(采用数据模板定义规范写)
}
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock("/development-api/login", "post", userInfo);

具体的mock规则可以参考：mock语法规范

（2）引入mock.js

//在mian.js 位置添加引入即可
// 引入mockjs
require("../mock/mock.js");

（3）测试一下，是否拦截并模拟成功

// 文件login.vue文件 中 方法修改如下：
	handleSubmit(e) {
   
      e.preventDefault();
      this.form.validateFields((err, values) => {
   
        if (!err) {
   
          this.loading = true;
          console.log("表单里输入的值: ", values);
          var {
    username, password } = values;
          login(username, password)
            .then((res) => {
   
              this.loading = false;
              let {
    name, age, nickName, ageIternet } = res;
              this.$message.info(
                `欢迎--${
     name}--登录！恭喜${
     age}岁，您的昵称为${
     nickName},网龄已经${
     ageIternet}个月`
              );
            })
            .catch((error) => {
   
              this.loading = false;
              this.$message.error("登陆失败！");
            });
        }
      });
    },

成功页面：
在这里插入图片描述

七、Vue中Router路由

1.安装Router

npm install vue-router

2.预备知识

(1)路由组件

官方内置的两个：和

<router-view/>组件是一个 functional 组件，渲染路径匹配到的视图组件
（1）属性名 name 类型: string 默认值: "default"
如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件

<router-link/>组件支持用户在具有路由功能的应用中(点击) 导航
（1）属性 to 类型: string | Location required
表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象
（2）属性 replace 类型: boolean 默认值: false
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

（2）动态路由匹配规则

如何动态路径参数？
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
例如:
const User = {
   
  template: '<div>User {
   { $route.params.id }}</div>'
}
const router = new VueRouter({
   
  routes: [
    // 动态路径参数 以冒号开头
    {
    path: '/user/:id', component: User }
  ]
})

(3)路由传参

有三种模式：布尔模式、对象模式和函数模式

//（1）布尔模式
//如果 props 被设置为 true，route.params 将会被设置为组件属性
//也就是说动态路径参数在props设置为true时，被路由的页面可以接受这个值作为组件属性
//例如：
const User = {
   
  props: ['id'],
  template: '<div>User {
   { id }}</div>'
}
const router = new VueRouter({
   
  routes: [
    {
    path: '/user/:id', component: User, props: true },
  ]
 })
//（2）对象模式
//如果 props 是一个对象，它会被按原样设置为组件属性,当 props 是静态的时候有用
//例如：
const router = new VueRouter({
   
  routes: [
    {
    path: '/promotion/from-newsletter', component: Promotion, props: {
    newsletterPopup: false } }
  ]
})
//（3）函数模式
//你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等
//例如：
const router = new VueRouter({
   
  routes: [
    {
    path: '/search', component: SearchUser, props: (route) => ({
    query: route.query.q }) }
  ]
})

（4）HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

3.使用Router

（1）创建首页Home.vue、Welcome.vue、NotFoundComponent.vue

//创建之前先把Home.vue和Welcome.vue中用到的Antd组件按需引入一下,顺带着把router.js引入一下,
//NotFoundComponent中图片可以下载我的源码，或者直接删掉
//修改后的main.js
import Vue from "vue";
import App from "./App.vue";
//按需引入Antd组件库
import {
   
  Button,
  Form,
  Input,
  Icon,
  Che

最低0.47元/天解锁文章