1.安装mockjs

2.配置mockjs在开发环境中启用,生产环境中禁用

3.创建mock文件夹,以及mock数据文件

4.在main.js中引入与否

5.页面获取数据

        testMock(){
this.axiosRequest('post', '/api/getUserInfo', {}, 'mockData').then(data => {
console.log("userinfo接口返回数据")
console.log(data)
})
},
testMock1(){
this.axiosRequest('get', '/api/getUserlist', {}, 'mockData').then(data => {
console.log("userlist接口返回数据")
console.log(data)
})
}

6.以上配置都没有问题,那么坑来了,控制台报错如下:

因为上面的错误,将思维引向了跨域问题,需要做代理,试过了无效;因为常规思维是要在封装的请求里面,将地址前缀拼接成完整地址,那么坑就在这里,拼接就会向上面一样翻车

直接使用mock中的地址如下,就可以顺利的完成post/get请求:

友情链接:http://mockjs.com/examples.html 文档说明

mock.js学习之路一(Vue中使用)的更多相关文章

  1. mock.js学习之路(二)easy-mock(Vue中使用)

    1.easy-mock建立外部数据,注册账号,创建数据,详细使用过程参照https://www.easy-mock.com/docs文档说明 2.项目中如何引入使用 ①配置一下config.index ...

  2. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  3. 偏前端-vue.js学习之路初级(一)概念

    首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时.    新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...

  4. node.js学习之路

    (非原创) 目录 Nodejs的介绍 15个Nodejs应用场景 Nodejs学习路线图 1. Nodejs的介绍 Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速 ...

  5. JS学习之路,菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

  6. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  7. Js跑马灯效果 && 在Vue中使用

    DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charse ...

  8. 偏前端-vue.js学习之路初级(二)组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

  9. js 学习之路5:使用js在网页中添加水印

    示例: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="te ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_09-freemarker基础-内建函数

    可以理解为freemaker提供的一些函数和方法 controller里面记得把map的数据注释去掉,.放开代码 工程需要重启下 <br/> 学生的个数: ${stus?size} < ...

  2. vim基础学习1---简单命令

    1:vim abc:如果有abc文件,则打开,否则创建之后打开 2:输入"i",才可以输入东西 3:按Esc,它是底行模式,再敲":wq 回车" 保存退出. 4 ...

  3. linux简单命令3---帮助命令

    1:帮助命令:man 命令: 2:这个帮助用的比较多(还是中文):命令  --help 3:shell帮助 4:详细命令(比man更详细)帮助,用的少,比较麻烦:info

  4. 图解 HTTP 笔记(三)—— HTTP 报文内的 HTTP 信息

    本章主要讲解请求和响应是如何运作的 一.HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文,客户端的 HTTP 报文叫做请求报文,服务器端的叫做响应报文. HTTP 报文大致可分为报 ...

  5. Spring事务管理4-----声明式事务管理(2)

    声明式事务管理  基于AspectJ的 XML 方式配置 通过对事务管理器TransactionManager配置通知(增强),然后再配置切点和切面,详细见applicationContext.xml ...

  6. tmpfs使用完毕导致数据库无法正常工作

    df -h 查看 重新启动服务器就可以了

  7. python进阶-mock接口

    setting.py MYSQL_HOST='192.168.127.139' PASSWORD=' PORT=3306 USER='root' DB='stu' tools.py import py ...

  8. Python3 Selenium自动化web测试 ==> 第十节 WebDriver高级应用 -- xpath语法

    学习目的: xpath定位是针对常规定位方法中,最有效的定位方式. 场景: 页面元素的定位. 正式步骤: step1:常规属性 示例UI 示例UI相关HTML代码 相关代码示例: #通过id定位 dr ...

  9. Adobe Acrobat 如何通过书签制作多级目录

    废话不多说,直接上官方文档 看不清可 右击 > 在新标签页中打开图片

  10. eNSP——配置通过FTP进行文件操作

    原理: FTP (File Transfer Protocol,文件传输协议)是在TCP/IP网络和Internet.上最早使用的协议之-,在TCP/IP协议族中属于应用层协议,是文件传输的Inter ...