Use json-server to quickly build a local data interface

1. Installation

Install json-server globally:

npm  install  -g  json-server

If it is a linux system or a mac system, you need to add sudo to the global installation, and then enter the ciphertext password.

sudo  npm  install  -g json-server

2. Test

json-server -h                  //测试命令

If the following content appears, the installation is successful!

3. Create a new folder, for example, create a new folder JSONSERVER on the desktop. Then cd JSONSERVER. Enter the folder.

4. Initialize the project

Initialize it with either of the following two commands, and the package.json file will appear in the folder after completion.

//第一种方法
npm init  

//第二种方法
npm init --yes

5. Install dependent modules

npm install json-server --save

6. Modify the configuration file

Open the package.json file and modify the scripts as follows:

"scripts": {
    "json:server": "json-server --watch db.json"
},

7. Create a new json file

The above is db.json, so also create a new db.json file, and then write the json data.

{
  "users": [
    {
      "name": "tt",
      "phone": "123456789",
      "email": "[email protected]",
      "age": "20",
      "id": 1,
      "companyId": 1
    },
    {
      "name": "dede",
      "phone": "123456789",
      "email": "[email protected]",
      "age": "30",
      "id": 2,
      "companyId": 2
    },
    {
      "name": "wf",
      "phone": "123456789",
      "email": "[email protected]",
      "age": "23",
      "id": 3,
      "companyId": 3
    },
    {
      "name": "mj",
      "phone": "123456789",
      "email": "[email protected]",
      "age": "45",
      "id": 4,
      "companyId": 3
    }
  ],
  "companies": [
    {
      "id": 1,
      "name": "Apple",
      "description": "Apple lalala!"
    },
    {
      "id": 2,
      "name": "Microsoft",
      "description": "Microsoft lalala!"
    },
    {
      "id": 3,
      "name": "Google",
      "description": "Google lalala!"
    }
  ]
}

8. Run

npm run json:server

Using the command to run is actually running json-server --watch db.json. It will provide an address with a port of 3000, view the page, and after loading, you can see the relevant content. If you get an error, you can try:

sudo npm run json:server

9. Extra

By 8, the basic usage has been completed. If you want to take the data from an interface, you can modify it in the package.json file:

"scripts": {
    "json:server": "json-server --watch db.json"
    "json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"
},

Then re-npm run json:server:remote on it.

10. View related content

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

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

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

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

// 获取所有公司id为3的用户
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

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

// 获取年龄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=h  h指的是查询的首字母

As above, the simple construction of json-server is completed. If you want to learn how to use vue and json-server together, please see "vue+json-server realizes background management system" later. If you find it helpful, please give the blogger a thumbs up! Thank you for your support!

Use json-server to quickly build a local data interface

Guess you like