搭建json-server本地接口
这里我们来搭建一下json-server的本地接口,来让我们的网页能够对里面的数据进行增删改查
第一步,安装json-server的全局:Linux和windows在终端或者git中里面输入以下指令,mac系统的话需要在前面加上sudo
npm install -g json-server
第二步,自行创建一个文件夹,我创建在了我的网页文件夹下,命名JSONSERVER,在引入进这个文件夹,这里我用的代码是
cd Desktop/用于服务器的前端比赛/JSONSERVER/
第三步,初始化package.json的文件,使用方法有两个,1:
npm init --yes 这样的话直接就创建出来了,如果我们希望对其修改相应信息,则使用
npm init 你需要输入一些信息,如果全部回车的话效果和上一行是一样的。以下是我的运行情况
第四步,在当前文件安装一个我们需要的模块json-server
npm install json-server --save
第五步,调整你的package.json文件,修改启动操作,
记事本或者你做网页用的IDE打开package.json
将scripts下由"test":"echo \"Error: no test specified\" && exit 1"
改成"json:server":"json-server --watch db.json"
这个json:server你可以自己取名字这里我希望见名知意,所以取了json:server.
{
"name": "jsonserver",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"json:server": "json-server --watch db.json"
},
"author": "",
"license": "ISC",
"dependencies": {
"json-server": "^0.14.0"
}
}
保存package.json,创建一个db.json,同样的,这里你也可以自己命名,只要是json就成,也对应着package.json里的修改。
打开db.json输入,注意是使用双引号
{
"user":[
"name":"柯基",
"phone":"",
"id":
]
}
保存,回到你的命令行工具,回到上一级的项目文件下使用代码开启服务,这里的jons:server是你之前在package.json里面的命名。
npm run json:server
开启成功
这时候打开你的浏览器,输入http://localhost:3000/如果出现类似这样的网页,你就成功啦~
在你的网页JS代码中可以使用以下代码进行数据获取
$.get("http://localhost:3000/user?username="+liyuke).
then(function(response){
// console.log(response);
})
加油啊柯基~~~
搭建json-server本地接口的更多相关文章
- json server的简单使用(附:使用nodejs快速搭建本地服务器)
作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...
- json:server 本地搭建
做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json 在git里执行npm init --ye ...
- 入职第二天:使用koa搭建node server是种怎样的体验
今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧! 按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的 ...
- json server服务器
json文件可以理解为数据库 一.json-server快速搭建RESTAPI 安装: sudo cnpm install -g json-server 启动(使用): json-server指向js ...
- 搭建Mock Server
1.为什么要搭建mock-server? 为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server. ...
- 接口神器之 Json Server 详细指南
简介 json-server 是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用. 只需指定一个 json 文件作为 api 的数据源即可,使用起 ...
- 从0开始搭建SQL Server AlwaysOn 第一篇(配置域控)
从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...
- 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
- 从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn)
从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://w ...
- 从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点)
从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
随机推荐
- 2018.12.08 codeforces 946D. Timetable(背包)
传送门 题意简述:有一个人上n天课,每天有m个小时的时间安排表(一个01串),为1表示要上课,否则不上课,求出如果可以最多翘kkk节课这nnn天在校待的总时间的最小值(一天必须在所有课上完后才能离开) ...
- 2018.10.30 bzoj4942: [Noi2017]整数(线段树压位)
传送门 直接把修改的数拆成logloglog个二进制位一个一个修改是会TLETLETLE的. 因此我们把303030个二进制位压成一位储存在线段树里面. 然后维护区间中最靠左二进制位不为0/1的下标. ...
- Amount of Degrees(数位dp)
题目链接:传送门 思路:考虑二进制数字的情况,可以写成一个二叉树的形式,然后考虑区间[i……j]中满足的个数=[0……j]-[0……i-1]. 所以统计树高为i,中有j个1的数的个数. 对于一个二进制 ...
- react创建项目报错unexpected end of json while parsing near xxx
报这个错,执行下面的命令,然后重新创建项目就可以. npm cache clean --force
- VC调试小结
本机调试F5: 开始调试Shift+F5: 停止调试F10: 调试到下一句,这里是单步跟踪 F11: 调试到下一句,跟进函数内部Shift+F11: 从当前函数中跳出F9: 设置(取消)断点Outpu ...
- vue+大文件分片上传
最近公司在使用vue做工程项目,实现大文件分片上传. 网上找了一天,发现网上很多代码都存在很多问题,最后终于找到了一个符合要求的项目. 工程如下: 对项目的大文件上传功能做出分析,怎么实现大文件分片上 ...
- NodeJs回调操作Promise化
mongoose是一个NodeJs下MongoDB的ORM库.使用这个库,您从DB到表(collection)都不用创建了.只需要在项目中定义好Model. 下面就是用上一篇的代码来演示如何把mong ...
- day29(对象转xml(使用java))
通常使用xStream工具. 将集合,数组,对象转成XML. 导入两个包: xpp3_min-1.1.4c.jar xstream-1.4.4.jar 自定义一个类 package com.baidu ...
- Scala_针对集合的操作
针对集合的操作 遍历操作 列表的遍历 scala> val list = List(1,2,3,4,5,6) list: List[Int] = List(1, 2, 3, 4, 5, 6) s ...
- AngularJS 路由及SPA理解
一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...