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 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
js浏览器html5表单验证
Oct 17 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
JS实现纸牌发牌动画
Jan 19 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/10/08 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
厂长助理岗位职责
2013/12/27 职场文书
导航工程专业自荐信
2014/09/02 职场文书
介绍信范文
2015/01/31 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
小学教代会开幕词
2016/03/04 职场文书
浅析Python实现DFA算法
2021/06/26 Python