详解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 相关文章推荐
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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
缅甸的咖啡简史
2021/03/04 咖啡文化
php计算程序运行时间的简单例子分享
2014/05/10 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python调用API实现智能回复机器人
2018/04/10 Python
python实现图片彩色转化为素描
2019/01/15 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
自定义django admin model表单提交的例子
2019/08/23 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python绘制玫瑰的实现代码
2020/03/02 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
马智宇结婚主持词
2014/04/01 职场文书
三字经教学反思
2014/04/26 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL