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,一经查实,立即删除!

相关文章

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

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

CSS文字或元素的水平垂直居中多种方式(简单明了)

前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中;所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举栗子说明各种解决方式&#x…

Vue-cli 项目打包布署(简单清晰)

第一步:项目打包前更改项目config配置 打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 ./ 如下 第二步:对vue-cli项目进行打包 在运行窗口输入cmd后打开命令窗口,在项目文件下输入npm run build命令 如下&…

Vue-cli项目中路由的基础用法,以及路由嵌套

文件目录: 编辑router文件夹下的index.js文件 第一步:引用vue和vue-router ,Vue.use(VueRouter) /* eslint-disable*/ import Vue from vue import Router from vue-router Vue.use(Router) 第二步:引用…

Vue路由传参的几种方式

前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 参考官网&#x…

常用html字符的转义字符串(html代码),全部转义字符备用

转义字符串,即字符实体(Character Entity)分成三部分: 第一部分是一个&符号; 第二部分是实体(Entity)名字或者是#加上实体(Entity)编号; 第三部分是一个分…

单行文字、多行文字溢出时省略号表示的多种解决方式;调整字符间距;段落首字母大写缩进效果;

文本溢出省略号表示的实现效果: 1、解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: nowrap; 其中overflow:hidden;是在超出元素宽度范围时候不使用滚动条,text-ove…

Vuex使用详解,附加项目遇到的问题(简单明了)

Vuex的定义、个人理解和结构解析 vuex定义:vuex是一个专门为vue.js设计的集中式状态管理架构。 vuex的个人理解: 是存储公有状态数据state的一个仓库(store);解决了大型应用时组件传参的繁杂和不易维护性;vuex的状态储存是响应的…

Chorme控制台console的用法;

前提:是谷歌浏览器! IE8- 不支持console.log();会报错,解决如下: (function (){//创建空console对象,避免JS报错 if(!window.console) window.console {}; var console window.console; //添加console对象的方…

null、undefined、NaN区分解析和条件判定,以及在IF条件中的判定

NaN的理解和用法: NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。 Number.NaN 是一个特殊值,说明某些算术运算(如求负数的平方根)的结果不是数…

vue项目中全局引用jquery 、引用外部js的多种方式(外部纯函数js、外部自执行js、外部js插件),附niceScroll滚动条插件使用

vue项目中全局引用jquery : 1、“ npm install jquery --save ” 命令安装jquery 2、在项目根目录下的 build 目录下找到webpack.base.conf.js 文件,在开头使用以下代码引入webpack,如下 var webpack require(webpack) 3、在webpac…

vue生命周期详解、钩子函数的调用(简单易懂)

定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。 vue的钩子函数图解: vue的钩子函数使用总结: 1、beforeCreate(创建前):beforeCreate钩子函数,这个时候&#x…

vue-router详尽:编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图

vue-router编程式导航 在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航。。。 通俗理解编程式导航&#xff1a;通过操作$router实例的JavaScript代码实现路由跳转。点击 <router-link :to"..."> 等同于调用…

java基础学习笔记(一)

java开发环境搭建&#xff1a;JDK配置 java 集成开发环境IDE&#xff08;Integrated Development Environment&#xff09; 》Eclipse工具 1、官网下载后安装elipse&#xff0c;注意&#xff1a;Eclipse 安装时JDK位数和Eclpise位数必须保持一致&#xff0c;安装过程中Switch…

常用矢量图有哪些格式?AI文件存储为psd分层

前言 下载的矢量图资源会发现有ai格式、cdr格式的、eps格式、icon格式&#xff0c;有的能使用Photoshop打开而有的不行。使用Photoshop保存矢量图时候选择什么格式保存都是经常遇到的问题。 常见问题及解决&#xff1a;PS打开ai格式的矢量图文件&#xff0c;你用PS打开发现只…

java基础学习笔记(二)

1、数组排序之选择法排序和冒泡排序&#xff1f; 选择法排序原理&#xff1a;数组第一位和后续位置数值比较&#xff0c;最大或最小的调换位置后放在第一位&#xff1b;依次比较将第二大或小的值调换位置后放在第二位置&#xff1b;代码如下&#xff1a; for (int j 0; j <…

java基础学习笔记(三)

1、装箱和拆箱 所有基本类型都有对应的类类型&#xff0c;比如int对应的类是Integer,这种类就叫做封装类。数字封装类有Byte、Short、Integer、Long、Float、Double这些类都是抽象类Number的子类。封装类和基本类型之间可以相互转换&#xff0c;而基本类型自动转封装类型就叫装…

名片设计尺寸及注意事项(详尽),附加:文字转曲线或外框字;网址、文字转二维码方法

附加&#xff1a; 文字如何转曲线或外框字&#xff1f;&#xff1f; "转曲"是在用Corl Draw(简称CD)或者Adobe Illustrator(简称AI)做图时对文字作的一项重要操作,因为如果不转曲的话在把文件拿到其它电脑上编辑时可能会因为缺少字体文件而不能正常显示文字!! 转曲…

AVI转MP4视频无损格式转码

前言&#xff1a;产品宣传需要无损avi转mp4转换格式 前期准备&#xff1a; 格式工厂 下载链接&#xff1a;https://pan.baidu.com/s/1WLD1ip9EaMdca_k2x7Zhvg 提取码&#xff1a;i4nx DIVX、AVC、HEVC三种压码格式的区别&#xff1a; DivX是早期的MPEG4视频压缩编码&…

vue-cli搭建和“Cannot find module npm-cli.js” 、“operation not permitted” 、 deprecated coffee-script等错误

前言&#xff1a;重装nodejs后&#xff0c; vue-cli搭建项目后运行vue项目报错报错 "npm Error: Cannot find module npm-cli.js" &#xff0c;同时发现npm -v 也报错。 分析: vue-cli脚手架模板是基于node下的npm来完成安装的&#xff0c;安装vue-cli也会先安装no…