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

怼烎@ 2022-02-05 07:05 120阅读 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 条评论，120人围观）

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

相关阅读

相关 vue实现前后端项目分离与交互②

后端数据的加载输入 1.1 在src目录下创建一个utils文件夹，创建了一个request.js文件,然后下载axios。 1.2 在requ

╰+哭是因爲堅強的太久メ/ 2024年04月06日 14:55/ 0 赞/ 22 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![640?wx\_fmt=png][640_wx_fmt_png] 作者 | 山河远阔来源 | www.blog.csdn.net/weixin\_37539378

叁歲伎倆/ 2021年08月19日 23:07/ 0 赞/ 672 阅读

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

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

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