这里我们来搭建一下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本地接口的更多相关文章

  1. json server的简单使用(附:使用nodejs快速搭建本地服务器)

    作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...

  2. json:server 本地搭建

    做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json  在git里执行npm init --ye ...

  3. 入职第二天:使用koa搭建node server是种怎样的体验

    今天是我入职第二天,leader跟我说,昨天配置好了服务端渲染的文件,今天就先研究研究如何使用koa来搭建一个node server吧! 按照惯例,我去koa官网查了一下什么是koa,结果官网很简单的 ...

  4. json server服务器

    json文件可以理解为数据库 一.json-server快速搭建RESTAPI 安装: sudo cnpm install -g json-server 启动(使用): json-server指向js ...

  5. 搭建Mock Server

    1.为什么要搭建mock-server? 为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server. ...

  6. 接口神器之 Json Server 详细指南

    简介 json-server 是一款小巧的接口模拟工具,一分钟内就能搭建一套 Restful 风格的 api,尤其适合前端接口测试使用. 只需指定一个 json 文件作为 api 的数据源即可,使用起 ...

  7. 从0开始搭建SQL Server AlwaysOn 第一篇(配置域控)

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  8. 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)

    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  9. 从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn)

    从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://w ...

  10. 从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点)

    从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

随机推荐

  1. django rest framemark

    一 内容回顾 1 开发者模式 普通开发方式:前后端放在一起开发 前后端分离:前后端只通过 JSON 来交流,组件化.工程化不需要依赖后端去实现 2 后端开发:为前端提供url接口,也就是API或者接口 ...

  2. 【转】Linux useradd

    Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系统管理员对使用系统的用户进行 ...

  3. 2019.01.02 bzoj2467: [中山市选2010]生成树(矩阵树定理)

    传送门 矩阵树定理模板题. 题意简述:自己看题面吧太简单懒得写了 直接构建出这4n4n4n个点然后按照题面连边之后跑矩阵树即可. 代码: #include<bits/stdc++.h> # ...

  4. 2018.11.06 bzoj1040: [ZJOI2008]骑士(树形dp)

    传送门 由题可知给出的是基环森林. 因此对于每个基环森林找到环断开dpdpdp两次就行了. 代码: #include<bits/stdc++.h> using namespace std; ...

  5. 2018.11.03 NOIP模拟 地球发动机(线性dp)

    传送门 考试5分钟写完. 如果没这题今天多半爆零了(汗 直接二分出合法的转移范围. 然后用后面的状态更新前面的就可以了. 代码

  6. Laravel创建自定义 Artisan 控制台命令实例教程

    来源:http://laravelacademy.org/post/1374.html 1.入门 Laravel通过Artisan提供了强大的控制台命令来处理非浏览器业务逻辑.要查看Laravel中所 ...

  7. Java数组的初始化

    1.动态初始化 数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组的动态初始化 int [] arr = new int [3]; 2.静态初始化 数据类型 [] 变量名 = {元 ...

  8. Bagging和Boosting的区别

    转:http://www.cnblogs.com/liuwu265/p/4690486.html Bagging和Boosting都是将已有的分类或回归算法通过一定方式组合起来,形成一个性能更加强大的 ...

  9. [转]MySQL源码:Range和Ref优化的成本评估

    MySQL源码:Range和Ref优化的成本评估 原文链接:http://www.orczhou.com/index.php/2012/12/mysql-source-code-optimizer-r ...

  10. 20155205 《Java程序设计》实验三(敏捷开发与XP实践)实验报告

    20155205 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 一.实验内容及步骤 (一)使用Code菜单 在IDEA中使用工具(Code->Reformate Code ...