Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）

怼烎@ 2022-02-05 07:05 191阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

基础准备：

1、npm安装vue-cli脚手架后，通过命令“ vue init webpack 项目名 ”来创建项目；

2、了解mockjs，能拦截ajax请求，返回模拟的响应数据，实现前后端分离；  
（详细学习网址：[https://blog.csdn.net/zhanglir333/article/details/78721585][https_blog.csdn.net_zhanglir333_article_details_78721585] 或官网）

3、了解 axios，基于http客户端的promise，面向浏览器和nodejs。

（详细学习网址：[https://www.jianshu.com/p/df464b26ae58][https_www.jianshu.com_p_df464b26ae58] 或官网）

第一步：安装 mockjs 和 axios 插件

*  cnpm install mockjs --save-dev
 *  cnpm install axios --save-dev
 *  安装完毕后，使用命令 npm run dev 运行项目

第二步：创建mock.js文件（包括引用mockjs插件，设定mock规则、拦截ajax请求）

![Image 1][]

第三步：在main.js中全局引入axios插件（并设定为Vue的原型属性$http）和mock.js文件

![Image 1][]

第四步：在组件中使用axios发送请求并将响应数据渲染到html

![Image 1][]

注意：网上一些mockjs+axios的文章实际敲代码会报错，原因是没有如上图用that保存vue实例。还有要注意res.data.data才是mock出来并返回的数据数组

最后成功的效果：

![Image 1][]

作者：唐人不自醉  
链接：https://www.jianshu.com/p/4444ab455936

[Fundebug]: https://www.fundebug.com/
[https_blog.csdn.net_zhanglir333_article_details_78721585]: https://blog.csdn.net/zhanglir333/article/details/78721585
[https_www.jianshu.com_p_df464b26ae58]: https://www.jianshu.com/p/df464b26ae58
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Axios完成前后端分离项目数据交互

一、安装Axios > npm i axios -S 封装一个请求工具：request.js import axios from 'axios'

Dear 丶/ 2023年10月14日 22:58/ 0 赞/ 210 阅读

相关 mockJs企业级应用工具，实现前后端分离

mockJs 配套视频： [视频学习地址][Link 1] mockJs生成随机数据语法 mockJs拦截请求 vue结合mockJs实现新闻管理

秒速五厘米/ 2023年07月21日 06:07/ 0 赞/ 10 阅读

相关 vuecli 和 python django 前后端分离

一前台vue项目搭建 1. 创建vuecli 脚手架　　　vue create data\_analysis\_front(项目名字) 　　　![在这里插入图

柔情只为你懂/ 2023年06月21日 03:47/ 0 赞/ 29 阅读

相关前后端分离，必须知道的axios

1. axios介绍 VUE中结合网络数据进行应用的开发目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便.（不知道Aja

曾经终败给现在/ 2022年11月03日 14:29/ 0 赞/ 240 阅读

相关前后端分离架构：Web 实现前后端分离，前后端解耦

你知道的越多，不知道的就越多，业余的像一棵小草！你来，我们一起精进！你不来，我和你的竞争对手一起精进！编辑：业余草 blog.csdn.net/fuzh

冷不防/ 2022年09月03日 01:23/ 0 赞/ 406 阅读

相关前后端分离之本地数据调试——mockJs的应用

由于时间关系，我们直接上图，大伙可以结合webpack进行实践开发，下面的代码是老版本的，具体的教程可以参考[这里][Link 1]。 ![Center][] [L

蔚落/ 2022年06月10日 08:52/ 0 赞/ 320 阅读

相关 Express+Vue+axios在前后端分离的项目中使用Session

Express+Vue+axios在前后端分离的项目中使用Session 前言 Session简介搭建带有Session功能的后端服务器搭建前

阳光穿透心脏的1/2处/ 2022年03月25日 04:07/ 0 赞/ 1283 阅读

相关 Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

怼烎@/ 2022年02月05日 07:05/ 0 赞/ 192 阅读

相关 Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）

基础准备： 1、npm安装vue-cli脚手架后，通过命令“ vue init webpack 项目名 ”来创建项目； 2、了解mockjs，能拦截ajax请求，

以你之姓@/ 2021年09月15日 13:52/ 0 赞/ 214 阅读

相关 Vue-cli中用mockjs axios实现前后端分离

一，安装axios和mockjs cnpm i axios -S （注意：-S是--save的简写，也就是说，安装axios也可以用：cnpm i axios

向右看齐/ 2021年07月25日 16:21/ 0 赞/ 440 阅读