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

基础准备:

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出来并返回的数据数组

最后成功的效果:







本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/554106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uc浏览器下载的视频怎么导出来?导出方法分享

很多时候用户都会使用浏览器下载视频和文件,那么用户已经下载的视频要如何导出呢,这时候如果不知道怎么操作,那么就往下看下去吧,今天小编会与大家一起来分享一下如何将uc浏览器下载的视频导出的方法,其实操作下来还是…

JS闭包的简单理解。优缺点以及垃圾回收机制

闭包是什么?了解闭包首先了解js的‘链式作用域’结构,对象可以一级一级的向上查找父对象的变量,所以父对象的变量对子对象可见,反之不成立;所以都可以访问全局变量 为了解决函数外部无法访问函数内局部变量的问题&…

如何禁止爱奇艺视频

本文播放器家园网给大家整理了如何禁止爱奇艺视频方面的内容。爱奇艺pc端和手机端都支持通过频道推荐、观看历史、加入看单、搜索功能快速找到想看的视频。 WFilter有自带的常用协议特征库,可以通过禁止“爱奇艺视频”的协议来禁止爱奇艺视频。步骤如下 1、1.打开…

详解var、let、const关键词声明变量的区别,以及变量提升、块级作用域的认识等。

首先回顾一下JavaScript中var声明变量的基础知识:• 在使用var关键词声明变量时,变量在函数外则是全局变量,有全局作用域,全局变量在页面关闭后销毁;变量在函数内则是局部变量,作用局部作用域(变…

腾讯视频如何设置热键

本文小编给大家带来的是腾讯视频相关的内容。腾讯视频有快捷键的功能,那怎么设置或更改呢?来看一下具体步骤吧! 1、首先,打开电脑里的腾讯视频,然后点击右上方的“菜单”键 2、点击后会弹出一个弹窗,点击“设置” 3、进入设置…

浏览器tab标签显示网站标志图标

对于不同的浏览器,方法是有差别的 1.对于IE或TT浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索 2.这大概是所有浏览器通用的在标签页加入指定图标的方法: 把favicon.ico图标放到网站…

如何使用腾讯视频小程序功能

很多人都使用腾讯视频,播放器家园网小编给大家分享一下如何下载腾讯视频里的视频_*腾讯视频~如何使用腾讯视频小程序功能呢相关内容。 腾讯视频~如何使用腾讯视频小程序功能呢? 首先找到手机软件,打开后按照下面的指示一步步完…

关于web前端性能优化总结

1、从DOM结构和标签上来优化使用语义化的标签,代码清晰简洁; 减少Dom节点,增加渲染速度; 使用W3C标准书写闭合小写的标签; 给图片和table指定宽高,避免缩放; 防止src和href值为空,当…

爱奇艺视频播放怎么开加速

很多人都使用爱奇艺,播放器家园网小编给大家分享一下爱奇艺下载电视剧怎么下载手机_爱奇艺视频播放什么开加速相关内容。爱奇艺视频播放什么开加速?爱奇艺视频播放的时候想要加速播放,那到底是什么整的呢,具体的设置操作步骤如下 1、点击爱…

关于提高网页加载速度个人学习以及经验总结

性能黄金法则: 记住:只有10% - 20%的最终用户时间花在了下载HTML文档上,其余的80%-90%时间花在下载页面中的所有组件(js、css 、image 、flash)进行的http请求上。根据上面的黄金法则,可以知道网页提速方式…

搜狐视频如何开启青少年模式

搜狐视频开启青少年模式可以避免孩子使用时造成的无意识消费,那么如何开启呢?下面给大家简单介绍一下 1、首先在手机桌面找到【搜狐视频】并点击进入 2、在【我的】页签点击右上角设置图标进入 3、点击【青少年模式】进入 4、点击【开启青少年模式】即可完成本…

VUE学习和开发中的注意点总结(一),便于回顾(不断完善补充。)

1、export 和export default 的区别? 在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对…

手机qq浏览器过滤广告设置教程

手机qq浏览器过滤广告设置教程 手机QQ浏览器怎么过滤广告?今天浏览器家园小编给大家分享的是如何屏蔽手机QQ浏览器广告?对这个感兴趣的小伙伴们就一起学习下吧,以下就是具体的内容。 手机QQ浏览器屏蔽广告方法 1.打开手机QQ浏览器,点击底栏【菜单】 …

绘制扇形的多种方式,包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo

对clip的理解: clip是对使用了该样式的元素进行裁剪显示。使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-top相对距离,依此分别是右边界离该元素左侧border-left相对距离。参数top和left取值auto时候代…

QQ浏览器怎么设置为默认浏览器

怎么将qq浏览器安装成自己想要的默认浏览器呢,今天小编就教大家一个方法,通过简单的方式,将qq浏览器设置成默认浏览器,这样用户在操作的时候就会更加的方便,打开浏览器就可以使用qq浏览器的功能,那么到底要…

在VUE项目中使用SCSS ,对SCSS的理解和使用(简单明了)

首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、…

如何解决360浏览器卡死的问题

我们在上网的时候,不可缺少的就是浏览器了,有一大部分人还是喜欢用360浏览器的。刚开始用360浏览器的时候感觉很不错,都都不知什么情况,老是无故崩溃,或者时常卡死,上网慢,播放视频插件响应失败…

前端windows下常用的CMD 命令归纳

前言:在vue项目开发或安装部署卸载时候经常会用到CMD命令操作,所以这里将常用到的cmd命令进行归纳。在运行框或cmd界面输入以下代码,回车键确定跳转对应的功能或界面shutdown 关机;mspaint 打开画图工具&a…

360浏览器图片放大镜如何关闭

360浏览器图片放大镜怎么关闭?360浏览器是一款功能强大的浏览器,在使用浏览器的时候,鼠标移动到图片那里,就会自动放大。有时候会很不方便,要怎么关闭呢,下面就给大家分享具体步骤。 打开工具,选择设置&a…

VUE中父子组件传参(简单明了)

父组件向子组件传递参数 child.vue如下 <template><div class"childClass"><h3>子组件内容</h3><p :class"num6?redclass:blueclass">当父组件内容传递给子组件时&#xff0c;该行变成红色</p><p>父组件向子…