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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue实现评论列表功能
Oct 25 Javascript
vue实现在线学生录入系统
May 30 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的变量总结 新手推荐
2011/04/18 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python占位符输入方式实例
2019/05/27 Python
python实现复制大量文件功能
2019/08/31 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
纬创Java面试题笔试题
2014/10/02 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
简单的辞职信范文
2014/01/18 职场文书
社区禁毒工作方案
2014/06/02 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
佛光寺导游词
2015/02/10 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android