详解vue-cli项目中用json-sever搭建mock服务器


Posted in Javascript onNovember 02, 2017

vue-cli下配置json-server

使用json-server实现后台数据接口

先建一个json文件:db.json 放在build/下

详解vue-cli项目中用json-sever搭建mock服务器

在build/dev-server.js中配置 (注意变量命名)

github说明:

详解vue-cli项目中用json-sever搭建mock服务器

详解vue-cli项目中用json-sever搭建mock服务器

启动项目 地址栏输入 localhost:8081

详解vue-cli项目中用json-sever搭建mock服务器

服务已启动成功 8081后加相应后缀即可访问数据

localhost:8081/posts

l详解vue-cli项目中用json-sever搭建mock服务器

localhost:8081/comments

详解vue-cli项目中用json-sever搭建mock服务器

最后做一下浏览器代理 设置config/index.jsr如下

详解vue-cli项目中用json-sever搭建mock服务器

最后验证一下

详解vue-cli项目中用json-sever搭建mock服务器

完结撒花=-=

全局安装json-server

npm install json-server -g

在项目目录下创建mock文件夹,并在文件夹下创建db.json文件

{
  "slides": [{
    "src": "/static/img/right1.png",
    "title": "xxx1",
    "href": "#"
  }, {
    "src": "/static/img/right2.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right3.png",
    "title": "xxx2",
    "href": "#"
  }, {
    "src": "/static/img/right4.png",
    "title": "xxx2",
    "href": "#"
  }],
  "list": [{
    "id": 1,
    "url": "#",
    "title": "文艺"
  }, {
    "id": 2,
    "url": "#",
    "title": "经管"
  }, {
    "id": 3,
    "url": "#",
    "title": "社科"
  }]
}

文件格式如下:

找到package.json文件夹,写入两个命令:

"mock": "json-server --watch mock/db.json",
 "mockdev": "npm run mock & npm run dev"

详解vue-cli项目中用json-sever搭建mock服务器

我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行

如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免

详解vue-cli项目中用json-sever搭建mock服务器

在config/index.js中设置代理:

主要是为了将请求映射到http://localhost:3000

详解vue-cli项目中用json-sever搭建mock服务器 

注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务

在设置代理之前,可以先进行测试,看是否可以启动mock服务器

运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可、

详解vue-cli项目中用json-sever搭建mock服务器

页面中可采用axios进行数据的请求

,例:

详解vue-cli项目中用json-sever搭建mock服务器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
vue实现简单加法计算器
Oct 22 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 #Javascript
JavaScript登录验证基础教程
Nov 01 #Javascript
vue打包后显示空白正确处理方法
Nov 01 #Javascript
js实现登录与注册界面
Nov 01 #Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 #Javascript
五步轻松实现zTree的使用
Nov 01 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
PHP中的替代语法介绍
2015/01/09 PHP
JavaScript中的其他对象
2008/01/16 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
简单学习vue指令directive
2016/11/03 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
学python需要去培训机构吗
2020/07/01 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
工程现场管理求职自荐信
2013/10/02 职场文书
2013年高中生自我评价
2013/10/23 职场文书
社区志愿者活动总结
2014/06/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书