Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
2019-03-02 02:26
851 查看
基础准备:
1、npm安装vue-cli脚手架后,通过命令“ vue init webpack 项目名 ”来创建项目;
2、了解mockjs,能拦截ajax请求,返回模拟的响应数据,实现前后端分离;
(详细学习网址:https://www.geek-share.com/detail/2723461733.html 或官网)
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中全局引入axi 16c8 os插件(并设定为Vue的原型属性$http)和mock.js文件
第四步:在组件中使用axios发送请求并将响应数据渲染到html
注意:网上一些mockjs+axios的文章实际敲代码会报错,原因是没有如上图用that保存vue实例。还有要注意res.data.data才是mock出来并返回的数据数组
最后成功的效果:
相关文章推荐
- Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
- Vue-cli项目中mockjs + axios实现前后端分离代码demo(清晰易懂)
- vue+mock.js实现前后端分离
- vue+mock.js实现前后端分离
- nginx+vue.js实现前后端分离的示例代码
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- express+vue-cli实现前后端分离交互小例
- 如何运行vue项目(从gethub上download的开源项目),安装vue-cli以及各种vue的环境,运行vue前后端分离项目
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- SpringBoot+Vue前后端分离实现高并发秒杀——后端项目知识总结
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- Django+Vue.js搭建前后端分离项目的示例
- .Net Core+Vue.js+ElementUI 实现前后端分离
- Django +vue.js实现前后端分离(十三)
- vue.js+iview+springboot搭建一个前后端分离登陆demo
- 使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式
- SpringBoot+Vue.js实现前后端分离的文件上传功能
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- ajax + vue + springboot + Restful实现前后端分离项目
- VUE 更好的 ajax 上传处理 axios.js实现代码