Vue使用json-server进行后端数据模拟功能


Posted in Javascript onApril 17, 2018

正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等,接下来我把我自己的上使用心写成文档

安装

首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server

npm install json-server -g

安装完成后检查是否全局安装成功

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

在项目根目录创建一个db.json的目录,然后写入信息

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

在package.json里面的scripts里面加一行命令

"json": "json-server db.json --port 3003"

在项目目录执行命令

npm run json

在bash里面会看到这样的界面

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

恭喜启动成功!

这时候进入网页进行访问

这时候就可以进行访问了

http://localhost:3003/api

可以看到之前写的json串

到此json-server启动完毕

调用的代码是这样的

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

页面初始化就可以看到数据 完成

总结

以上所述是小编给大家介绍的Vue使用json-server进行后端数据模拟功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
用js实现预览待上传的本地图片
Mar 15 Javascript
jQuery 选择器理解
Mar 16 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
js判断密码强度的方法
Mar 18 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
js实现点击按钮复制文本功能
Jul 20 #Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 #Javascript
React中的render何时执行过程
Apr 13 #Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
You might like
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python实现图片批量压缩程序
2018/07/23 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python3实现逐字输出的方法
2019/01/23 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python区分不同数据类型的方法
2019/10/14 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
建材业务员岗位职责
2013/12/08 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
采购部年度工作总结
2015/08/13 职场文书
2016十一国庆节感言
2015/12/09 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python