Vue使用json-server来进行后端数据模拟
正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立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来进行后端数据模拟的更多相关文章
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- json server服务器
json文件可以理解为数据库 一.json-server快速搭建RESTAPI 安装: sudo cnpm install -g json-server 启动(使用): json-server指向js ...
- json server的简单使用(附:使用nodejs快速搭建本地服务器)
作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...
- vue package.json 解析
vue package.json 中可以看到这个包的来源位置 在repository对象中的url中可以看到 所以当你要封装自己包的时候就可以改变这个地址去加载这个包(把你封装的包发到某个gi ...
- Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合
Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合 摘要:本文主要记录了如何将将前端的对象数组通过Json字符串传到后端,并在后端将Json字符串转换为对象集合. 前端代码 前 ...
- json:server 本地搭建
做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json 在git里执行npm init --ye ...
- 接口神器之 Json Server 详细指南
简介 json-server 是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用. 只需指定一个 json 文件作为 api 的数据源即可,使用起 ...
- Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题
一.Axios.Router的安装和使用 1.如何安装Axios和Router 1).进入到工程所在的文件夹,通过cmd指令,进入到window的dos界面 2).输入:npm install axi ...
随机推荐
- Myeclipse中进行JUnit单元测试
最近学习了在myeclipse中进行单元测试,写点东西总结总结. JUnit单元测试: 测试对象为一个类中的方法. juint不是javase中的部分,所以必须导入jar包,但是myeclipse自带 ...
- Android自定义之ScrollView下拉刷新
公司项目,需要用到ScrollView的下拉刷新,一开始使用的时候PullToRefresh三方库的下拉刷新,我比较纠结第三档库,很强大,但是,公司项目的需求,PullToRefresh就不能做到了, ...
- php执行与curl区别
如执行一个文件写入 Linux服务器,分别php **/a.php与 curl http://**/a.php 结果:php执行写入到/root/test.txt, curl与浏览器运 ...
- 简谈 Java 中的泛型通配符
很好的一篇文章https://zhuanlan.zhihu.com/p/26681625
- python多重继承
# 动物 Dog - 狗狗: Bat - 蝙蝠: Parrot - 鹦鹉: Ostrich - 鸵鸟. # 哺乳动物 鸟类 # 能跑 能飞 class Animal(object): pass # 大 ...
- Hadoop ->> HIVE
HIVE的由来: 最初由Facebook基于HDFS开发出来的一套数据仓库工具. HIVE可以干什么? HIVE可以将已经结构化的数据映射成一张表,然后可以使用HIVE语言像写T-SQL一样查询数据. ...
- 手写vector
看过JDK源码,现在自己想实现一个vector. 最开始的时候,我大概构想了一下怎么设计,一种是设置一个指针数组来存放对象,这样修改的时候可以不用大量的元素复制,但后来仔细想了想,它需要设置一个额外的 ...
- Android(java)学习笔记10:同步中的死锁问题以及线程通信问题
1. 同步弊端: (1)效率低 (2)如果出现了同步嵌套,就容易产生死锁问题 死锁问题及其代码 : (1)是指两个或者两个以上的线程在执行的过程中,因争夺资源产生的一种互相等待现象 (2)同步代码块的 ...
- CSP
CSP(Content-Security-Policy): 内容安全策略 作用: .限制资源获取 .报告资源获取越权 限制方式: .default-src限制全局 跟链接请求有关的东西,限制他 ...
- 2018.11.22 mac中"允许所有安装来源"的命令 & Mac窗口标题显示文件的路径
当Mac遇到软件无法安装或者此文件已经损坏之类的时候 原因是软件为破解版,地址来源已改变,被系统拦截了,解决办法就是直接在终端中输入"sudo spctl --master-disable ...