vue项目内封装axios.，使用Mock，搭建前后端分离环境。Axios + Promise + Mock

1.安装Mock

npm install mockjs --save-dev

1.1加入相关Mock代码

在SRC目录下创建文件夹mock，在里面创建虚拟接口地址及数据：

// mock/index.js
import Mock from "mockjs"; // 引入mockjs
const Random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据
let data = []; // 用于接受生成数据的数组
for (let i = 0; i < 10; i++) {// 可自定义生成的个数let template = {name: Random.name(), // 生成地址,string: Random.string(2, 10), // 生成2到10个字符之间的字符串date: Random.date() // 生成一个随机日期,可加参数定义日期格式};data.push(template);
}
Mock.mock("/data/index", "post", data); // 根据数据模板生成模拟数据

2.安装Axios

npm install axios --save

2.1加入相关代码

在SRC目录下创建文件axios.js，在里面设置：请求头、请求拦截、响应拦截：

// axios.js
import axios from "axios";
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded";
// 请求拦截器
axios.interceptors.request.use(function(config) {return config;},function(error) {return Promise.reject(error);}
);
// 响应拦截器
axios.interceptors.response.use(function(response) {return response;},function(error) {return Promise.reject(error);}
);

3.最后封装Axios

在SRC目录下创建文件夹services，在内创建文件global.js,内容如下：

//services/global.js"
import axios from "axios";
// 封装axios的post请求
export function fetch(url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(response => {resolve(response.data);}).catch(error => {reject(error);});});
}
export default {mockdata(url, params) {return fetch(url, params);}
};

4.最后在入口文件main.js添加

import "./mock/index";

import api from "@/services/global.js";
Vue.prototype.$http = api

5.最后随意文件内调用

this.$http.mockdata("/data/index").then(res => {console.log(res);
});

6.最后输入结果：

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Sarah Rodriguez", string: "H1o4NE#kAX", date: "1972-09-13"}
1: {name: "Karen Miller", string: "oQ@YQ24", date: "1978-10-16"}
2: {name: "Patricia Thomas", string: "f#gZ", date: "1970-08-29"}
3: {name: "Eric Allen", string: "Upr%Cop^L", date: "1999-11-25"}
4: {name: "William Taylor", string: "2[Ir", date: "2018-11-18"}
5: {name: "Edward Clark", string: "YTBNX!", date: "2016-10-11"}
6: {name: "Kimberly Gonzalez", string: "lL1&yF", date: "2011-07-23"}
7: {name: "Laura Davis", string: "X)7Hk", date: "2008-04-14"}
8: {name: "Dorothy Williams", string: "[w", date: "1999-09-16"}
9: {name: "David Brown", string: "dAftU1(n", date: "1979-12-12"}
length: 10
__proto__: Array(0)

项目路径

Vue脚手架-搭建前后端分离架构

看到此处的你赶紧试下哈。

本文作为学习用途，原文地址:https://blog.csdn.net/qq_38502227/article/details/102587251

vue项目内封装axios.，使用Mock，搭建前后端分离环境。Axios + Promise + Mock相关推荐

php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
Nodejs搭建前后端分离开发模式下的微信网页项目
原文链接:<Nodejs搭建前后端分离开发模式下的微信网页项目>- 陈帅华本文涉及对前后端分离及微信网页项目中的前端如何在本地环境中开发与调试的思考. 主要问题 1.如何配置微信公众平台 ...
linux的django路径,Ubuntu下使用Django搭建前后端分离的全栈项目
README Ubuntu16.04: Python3.6.2: Django1.11: 开发工具使用了pycharm(Ubuntu): 2017-12-08:更新到留言板第一步,在Linux环境中 ...
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用 1 Sanctum 扩展安装与配置 1.1 安装Sanctum 1.2 配置API中间件 1.3 跨域访问配置 1. ...
ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
基于Vue和Django搭建前后端分离项目
前言最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触, ...
Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署
通过上一节,我们学习了vue脚手架的相关概念以及构建过程,那么开始我们的前后端项目吧 Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入 ...
Jenkins搭建前后端分离项目流水线实战
文章目录项目简介流水线建设前端流水线pipline script nginx配置流水线pipline script 后端流水线pipline script 后端数据库初始化流水线pipline ...
Django vue 搭建前后端分离的web 二
bootstrap的安装和使用: 安装: 在vue项目下使用npm直接安装即可: 由于bootstrap依赖jQuery,所以第一步安装jQuery: npm install jquery 检查在pa ...