json-server的使用

这里跳过node安装以及npm安装

  1. 先全局安装:npm install json-server -g
  2. 在桌面创建一个空的文件夹JSONSERVER
  3. cd 进入到这个文件夹执行npm init --yes,这时候文件夹会多出一个package.json的文件
  4. 项目再安装一次:npm install json-server --save
  5. 修改启动命令,把package.json里的这行
    "test": "echo \"Error: no test specified\" && exit 1"
    替换成
    "json:server": "json-server --watch db.json"方便每一次的启动
  6. 再文件夹根目录下新建一个db文件命名为user.db,复制下面的测试数据到里面
{"user":[{"name":"Henry","phone":"333-444-555","email":"henry@gmail.com","id":1,"age":30,"companyId":1},{"name":"Bucky","phone":"333-444-555","email":"Bucky@gmail.com","id":2,"age":30,"companyId":2},{"name":"Emily","phone":"333-444-555","email":"Emily@gmail.com","id":3,"age":30,"companyId":3},{"name":"Llyse","phone":"333-444-555","email":"Llyse@gmail.com","id":4,"age":30,"companyId":3}],"companies":[{"id":1,"name":"Apple","description":"Apple is good!"},{"id":2,"name":"Microsoft","description":"Microsoft is good!"},{"id":3,"name":"Google","description":"Google is good!"}]
}

最后,在此文件夹的终端启动json-server,命令为:npm run json:server

提示:

//获取所有用户信息          http://localhost:3000/users

//获取id为1的用户信息     http://localhost:3000/users/1

//获取公司的所有信息       http://localhost:3000/companies

//获取单个公司的信息       http://localhost:3000/companies/1

//获取用户和公司的相关联信息       http://localhost:3000/companies/3/users

//根据公司名字获取信息              http://localhost:3000/companies?name=Microsoft

//根据多个名字获取公司信息       http://localhost:3000/companies?name=Microsoft&name=Apple

//根据多个名字获取公司信息       http://localhost:3000/companies?_page=1&_limit=2

//根据升序排序                            http://localhost:3000/companies?_sort=name&_order=asc     //降序是desc

//获取年龄30以上的                   http://localhost:3000/users?age_gte=30

//获取年龄30 - 40的                  http://localhost:3000/users?age_gte=30&age_lte=40

//搜索用户信息                         http://localhost:3000/users?q=k

扩展:(如果想要在本地使用jsonholder里面的数据,在package.json加上红色框的内容)

源码:

"json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Eclipse 使用 CodeMix 插件 开发 Vue.js

前言:对比vscode, codemix集成在eclipse插件里面,符合使用习惯 1、下载并安装node.js 官网地址: https://nodejs.org/en/ , 当前版本是 node-v8.11.4-x64.msi, 安装过程直接默认选项即可。 安装完成后&…

用css画出一个圆圈,里面有个叉号(不能用英文字母x)

用css画出一个圆圈,里面有个叉号(不能用英文字母x) #cyc {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;border: 5px solid #000000;position: relative;}#cyc::before {content: "";display: block;width:…

开发模式下浏览器不支持ES6

在工程项目下安装babel: cnpm install babel-preset-stage-2 --sava-dev 然后在工程项目下找到.babelrc文件打开并在这个位置添加这个参数,如下图 最后,cnpm run dev重启一下项目即可

[css] 用css画出一个圆圈,里面有个对号

[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;border: 5px solid #000000;display: flex;justify-content: center;align-items: center;}#right::before {content: "";display: bl…

vue项目打包成APP

点击查看转载源 事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: ./ 2&…

[css] 如何解决html设置height:100%无效的问题?

[css] 如何解决html设置height:100%无效的问题? 在外层包一个给定高度的 div个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

二分查找与斐波那契

二分查找 l[1,2,10,30,33,99,101,200,301,311,402,403,500,900,1000] def search(n,l):if len(l) 1:print("not exit")returnindex len(l)//2if n > l[index]:l l[index1:]search(n,l)elif n < l[index]:l l[:index]search(n,l)else:print("find it&q…

vue开发小程序Demo

1-准备 电脑安装好node.js环境&#xff0c;安装好npm&#xff0c;安装好微信web开发者工具&#xff0c;选择一款你喜欢的编辑器&#xff0c;我用的是WebStorm 2-打开webStorm&#xff0c;新建一个项目空间然后在终端执行以下命令&#xff0c;我这里是Windows下的WebStorm自带…

react入门笔记

安装react —— npm install create-react-app -g 创建react APP —— npx create-react-app my-pro-name &#xff08;是npx&#xff0c;不是npm喔&#xff09; 测试项目 —— cd my-pro-name npm start

[css] 用css3实现伪3D的文字效果

[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-…

认识 react 的钩子函数

钩子函数运行总览&#xff1a; react基本的钩子函数&#xff08;蓝色为持续运行的钩子函数&#xff09; 执行顺序 和组件相关的几个重要钩子函数

[css] 用css3实现文字发光的效果

[css] 用css3实现文字发光的效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-…

host 'xx' is not allowed to connect to this MySql server

update mysql.user set host % where user root; FLUSH PRIVILEGES; select * from mysql.user;转载于:https://www.cnblogs.com/jjSmileEveryDay/p/9532036.html

[css] 你有使用过css的属性background-blend-mode吗?说说它的运用场景有哪些?

[css] 你有使用过css的属性background-blend-mode吗&#xff1f;说说它的运用场景有哪些&#xff1f; 背景的混合模式,可以是背景图片与背景图片的混合,也可以是背景图片和背景色的之间的混合.个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#x…

递归算法学习

核心&#xff1a; 所谓的递归函数就是在函数体内调用本函数。 注意问题&#xff1a; 使用递归函数一定要注意&#xff0c;处理不当就会进入死循环。递归函数只有在特定的情况下使用 &#xff0c;比如阶乘问题 //递归算法测试 10的阶乘 function f(num){if(num<1){return…

javascript与php与python的函数写法区别与联系

1、javascript函数写法种类&#xff1a; &#xff08;一&#xff09;、第一种 function test(param){return 111; } &#xff08;二&#xff09;、第二种 var test function(param){return 222; }备注&#xff1a;小程序里面是 param&#xff1a;function&#xff08;&#x…

[css] 如何使用css实现鼠标跟随?

[css] 如何使用css实现鼠标跟随&#xff1f; 铺满元素,hover box-shadow个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

小程序加载思源黑体

思源黑体 CN&#xff08;Source Han Sans CN&#xff09;下载链接 放在app.js的onLaunch方法里一次加载 const util require(utils/util.js);App({onLaunch: function () {//加载思源黑体util.getFontFamily();}, })//这个方法建议放到公共文件中&#xff0c;例如我这里是uti…

小程序自带git方法提交时文件冲突的解决

此方式适合不太懂操作git的朋友。 小程序自带的git版本管理如图 git提交代码的正常流程&#xff1a; 先 commit&#xff08;提交&#xff09; 再pull&#xff08;拉取&#xff09;最后push&#xff08;推送&#xff09; 冲突一定是出现在pull&#xff08;拉取&#xff09;后…

[css] 能不能使用纯css使你的浏览器卡死?怎么实现?

[css] 能不能使用纯css使你的浏览器卡死&#xff1f;怎么实现&#xff1f; 可以&#xff0c;用计算属性calc&#xff0c;变量个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关…