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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
js导出txt示例代码
Jan 14 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
js获取 type=radio 值的方法
May 09 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js倒计时抢购实例
Dec 20 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
从理论角度讨论JavaScript闭包
Apr 03 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/12/05 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP分页类集锦
2014/11/18 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Javascript delete 引用类型对象
2013/11/01 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
script标签属性用type还是language
2015/01/21 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
原生js轮播特效
2017/05/18 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
js中this对象用法分析
2018/01/05 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python中强大的命令行库click入门教程
2016/12/26 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
举例讲解Python装饰器
2020/12/24 Python
Python运算符+与+=的方法实例
2021/02/18 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
团队精神的演讲稿
2014/05/14 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Python获取字典中某个key的value
2022/04/13 Python