美文网首页vueVuesome Good ideas
Vue-cli项目中mockjs + axios实现前后端分离代

Vue-cli项目中mockjs + axios实现前后端分离代

作者: 唐人不自醉 | 来源:发表于2019-03-02 02:26 被阅读10次

基础准备:

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

2、了解mockjs,能拦截ajax请求,返回模拟的响应数据,实现前后端分离;
(详细学习网址:https://blog.csdn.net/zhanglir333/article/details/78721585 或官网)

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

(详细学习网址: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请求)

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

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

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

最后成功的效果:


相关文章

  • Vue-cli项目中mockjs + axios实现前后端分离代

    基础准备: 1、npm安装vue-cli脚手架后,通过命令“ vue init webpack 项目名 ”来创建项...

  • vue使用模拟数据

    在项目中尝试了mockjs,mock数据,实现前后端分离开发。关于mockjs,官网描述的是1.前后端分离2.不需...

  • Vue<mock.js的使用>

    效果图: vue+mockjs 模拟数据,实现前后端分离开发 首先 npm install mockjs --sa...

  • 2019-11-28

    关于mockjs模拟数据的使用 一、 本文主要结合webpack+vue+mockjs,前后端分离,模拟后端接口数...

  • axios 和 vue-axios

    vue-cli 下进行前后端通讯时,可以使用 axios vue-axios实现,避免引入$.ajax减小项目大...

  • 1、前后端搭建

    预备知识(备查):1)vue+servlet2 ) axios 目标 本章制作前后端分离的项目,前后端实现跨域访问...

  • mockjs

    mockjs是用来模拟后台请求,并生成模拟数据的一个插件。实现前后端分离开发,前端不用在后端功能还未开发完成的情况...

  • vue+mockjs 模拟数据,实现前后端分离开发

    vue+mockjs 模拟数据,实现前后端分离开发总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档...

  • 10、vue.js工程化项目起步-vue-router-demo

    本文章主要采用vue-cli配合webpack来创建项目,引入axios库调用后端API,实现了增删改查 1.命令...

  • Nineth vue.js工程化项目起步-vue-router-

    本文章主要采用vue-cli配合webpack来创建项目,引入axios库调用后端API,实现了增删改查 1.命令...

网友评论

    本文标题:Vue-cli项目中mockjs + axios实现前后端分离代

    本文链接:https://www.haomeiwen.com/subject/sgmsuqtx.html