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, 安装过程直接默认选项即可。 安装完成后&…

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

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

vue项目打包成APP

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

vue开发小程序Demo

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

认识 react 的钩子函数

钩子函数运行总览: react基本的钩子函数(蓝色为持续运行的钩子函数) 执行顺序 和组件相关的几个重要钩子函数

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

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

appium学习记录1

xpath定位: 语法 driver.find_element_by_xpath("//android.widget.EditText[index"登陆"/../preceding-sibling::*[index4]") 语法解释 //android.widget.EditText 表示匹配在文档流匹配android.widget.EditText 其中向服务器发送index"登陆的属性 …

油田 (Oil Deposits UVA - 572)

题目描述&#xff1a; 原题&#xff1a;https://vjudge.net/problem/UVA-572 题目思路&#xff1a; 1.图的DFS遍历 2.二重循环找到相邻的八个格子 AC代码&#xff1a; 1 #include <iostream>2 #include <cstring> 3 using namespace std;4 5 const int maxn 105 ;…

hadoop 常用hdfs命令

转载于:https://www.cnblogs.com/mahailuo/p/9542654.html

css权重核心概念

1. 权重概念&#xff1a; 权重&#xff0c;是一个相对的概念&#xff0c;是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。 权重系数&#xff0c;是表示某一指标项在指标项系统中的重要程度&#xff0c;它表示在其它指标项不变的情况下&#xff0c;这…

SpringCloud(二) 服务注册到Eureka

本篇将完成一个可以注册到注册中心的最简单的服务。无论是服务提供者还是服务消费者&#xff0c;都可以在此项目基础上完善出来。 基础服务 最基础的服务&#xff0c;只完成注册到注册中心。 1、pom.xml 文件 1 <?xml version"1.0" encoding"UTF-8"?&…

CSS之浮动模型

浮动模型又叫流模型&#xff0c;什么是float&#xff08;浮动&#xff09; 最早是为了适应报纸的排版&#xff0c;文字环绕图片的效果&#xff0c;后来经过使用和研究发展出一系列复杂的用法。 CSS 的 Float&#xff08;浮动&#xff09;&#xff0c;会使元素向左或向右移动&…

工作337:pc-ele-ment联查问题

<grid-radiochange"ListRuery"v-model"query.platform":border"true":options"platform_category"/><!--query.platform--></el-form-item><el-form-item label"平台选择"><!-- <el-checkbo…

工作338:pc重置筛选条件

this.query{}console.log(this)getAction("/account/list",{query:{platform_channel: this.query.platrorm_channel,platform_category:this.query.platform,department_id:this.query.department,}}).then(res>{console.log(res)this.accountListres.data})运行…

Python---通配符的使用

苹果单价 9.00 元&#xff0f;斤&#xff0c;购买了 5.00 斤&#xff0c;需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台如果希望输出文字信息的同时&#xff0c;一起输出 数据&#xff0c;就需要使用到 格式化操作符% 被称为 格式化操作符&#xff0c;…

css之文本溢出处理 | 背景图片处理

文本溢出处理 单行文本用缩略符号——text-overflow:ellipsis; 多行文本做截断策略——line-height * 行数 height;text-overflow:hidden; 背景图片处理相关属性 1、background&#xff1a;设置对象的背景样式&#xff0c;是一个复合属性&#xff0c;可以用于同时设置背景…

CSS之盒模型

怎么理解盒子模型&#xff1f; 盒子模型是样式表&#xff08;css&#xff09;控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法&#xff0c;才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子&#xff0c;占据一定的页面空间。占据的空…

浏览器的组成

外壳shell&#xff1a;User Interface&#xff08;用户界面&#xff09;、Browser engine&#xff08;浏览器引擎&#xff09;、Networking&#xff08;网络&#xff09;、UI Backend&#xff08;UI 后端&#xff09;、Date Persistence&#xff08;数据持久化存储&#xff09;…

[css] 异步加载CSS的方式有哪些?

[css] 异步加载CSS的方式有哪些&#xff1f; 异步加载CSS 说到加载 CSS 这种事儿不是很简单吗&#xff1f;像这样咯&#xff1a; 这不就完事儿了嘛&#xff01; 这样是没错&#xff01;但是这样有问题啊——会阻塞渲染&#xff01;浏览器看到这个标签就会停下手里的活儿&…

Golang 垃圾回收机制

1. Golang GC 发展 Golang 从第一个版本以来&#xff0c;GC 一直是大家诟病最多的。但是每一个版本的发布基本都伴随着 GC 的改进。下面列出一些比较重要的改动。 v1.1 STWv1.3 Mark STW, Sweep 并行v1.5 三色标记法v1.8 hybrid write barrier2. GC 算法简介  这一小节介绍三…