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 相关文章推荐
JS中获取函数调用链所有参数的方法
May 07 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
JavaScript 异步调用
Oct 25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JavaScript实现弹出窗口效果
Dec 09 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
JavaScript 五大常见函数
2018/03/23 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
python中文编码问题小结
2014/09/28 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python实现的归并排序算法示例
2017/11/21 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python求质数列表的例子
2019/11/24 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
2014三年级班主任工作总结
2014/12/05 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
人事局接收函
2015/01/30 职场文书
小学校长个人总结
2015/03/03 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
js中Object.create实例用法详解
2021/10/05 Javascript
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL