Basic use of JSON server

  One 、Node Environment building

1-1 brief introduction

        Node.js It's an open source and cross platform JavaScript Runtime environment . It is a popular tool for almost any project ！Node.js Run outside the browser V8 JavaScript engine （Google Chrome The kernel of ）.Node.js The application runs in a single process , There is no need to create a new thread for each request . Node.js In its standard library, it provides a set of asynchronous I/O Native features （ To prevent JavaScript The code is blocked ）, also Node.js Libraries in are usually written using a non blocking paradigm .

        When Node.js perform I/O In operation （ For example, read from the network 、 Access to a database or file system ）,Node.js The operation will be resumed when the response returns , Instead of blocking threads and wasting CPU Loop waiting for . This makes Node.js You can handle thousands of concurrent connections on a single server , Without introducing the burden of managing thread concurrency （ This can be significant bug The source of the ）.

        Node.js Have a unique advantage , Because writing for browsers JavaScript Millions of front-end developers can now write server-side code in addition to client-side code , Without learning a completely different language .

1-2 Node.js Environment building

1-2-1 download

  Official website address : Node.js Chinese net

 .msi  and  .zip  Format difference ：

• .msi yes Windows installer Developed program installation file , It allows you to install , modify , Uninstall the program you installed ..msi Namely Windows installer Data packets of , Encapsulate all the content related to the installation files in one package .
•  .zip It's a compressed package , After decompression, you can , No installation required

1-2-2 install

When the download is complete , Double click Install Package , Start installation , Always point next that will do .

•   Node.js runtime Represents the operating environment
•   npm package manager Express npm Package manager
•   online documentation shortcuts Online document shortcuts
•   Add to PATH Add to environment variables

1-2-3 verification

        After installation ,.msi The format of the installation package has node Add the launcher to the system environment variable path in , See system variable validation .

Carry out orders node -v see node edition .

the latest version node At the time of installation, it also installed npm, perform npm -v see npm edition .

1-3 npm brief introduction

        npm Its full name is Node Package Manager, It's based on Node.js Package manager , Also the whole Node.js The most popular in the community 、 The package manager that supports the most third-party modules . 

        npm The purpose of ：JavaScript It's easier for developers to share and reuse code .

1-3-1 npm Usage scenarios of ：

• Allow users from NPM The server downloads third-party packages written by others to use locally .
• Allow users from NPM The server downloads and installs command-line programs written by others to use locally .
• Allows users to upload their own packages or command-line programs to NPM Servers for other people to use .

  If you install an older version of npm, It's easy to get through npm Command to upgrade , The order is as follows ：

npm install npm -g

Use Taobao mirror command ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

        npm run yes npm run-script Abbreviation , As the name suggests, it is to execute the script . The executed script is configured in package.json Medium scripts object .

Two 、json-server Environment building

2-1 brief introduction

          One runs locally on the front end , Can be stored json Data server. Generally speaking , Is to simulate the server interface data , It is generally used after the front and rear ends are separated , Front end personnel can not rely on API Development , And build a local JSON service , Generate test data by yourself .

        seeing the name of a thing one thinks of its function ,json-server It's just a storage json Data server~​.

Open source address

Home address ：json-server - npm
Github Project address ：https://github.com/typicode/json-server

2-2 install

   Use npm Global installation json-server：

npm install -g json-server

   You can view the version number , To test whether the installation was successful ：

json-server -v

2-3 establish

json Online editor ：JSON Online editor - Lazy tools |www.ab173.com

Create any folder , Enter the folder , Create a db.json A file containing some data ：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

contrast myserver/db.json File data , You can find ： /db It's the whole db.json Data packets , and /posts /comment /profile  Namely db.json The child objects inside .

  So ,json-server hold db.json Each of the root nodes key, As a router. We can write test data according to this rule .

2-4 start-up

Under folder , Directly in the address bar cmd, Access terminal . Execute startup json-server command .

json-server --watch .\db.json --port 5222

 2-5  see

Enter the address in the browser ：http://localhost:+ Port number / The name of the interface , You can see the data .
for example ： Input http://localhost:5000/comments

2-6 Relevant startup parameters

• grammar ：json-server [options] <source>
• A list of options ：

Parameters	Abbreviation	The default value is	explain
--config	-c	Specify profile	[ The default value is : "json-server.json"]
--port	-p	Set port [ The default value is : 3000]	Number
--host	-H	Set the domain [ The default value is : "0.0.0.0"]	String
--watch	-w	Watch file(s)	Monitor or not
--routes	-r	Specify a custom route
--middlewares	-m	Specify Middleware files	[ Array ]
--static	-s	Set static files directory	Static Directory , analogy ：express Static Directory
--readonly	--ro	Allow only GET requests [ Boolean ]
--nocors	--nc	Disable Cross-Origin Resource Sharing [ Boolean ]
--no	gzip	, --ng Disable GZIP Content-Encoding [ Boolean ]
--snapshots	-S	Set snapshots directory [ The default value is : "."]
--delay	-d	Add delay to responses (ms)
--id	-i	Set database id property (e.g. _id) [ The default value is : "id"]
--foreignKeySuffix	--	fks Set foreign key suffix (e.g. _id as in post_id)	[ The default value is : "Id"]
--help	-h	Display help information	[ Boolean ]
--version	-v	Display version number	[ Boolean ]

3、 ... and 、 Additional features

3-1 Static file server

have access to JSON Server For you HTML、JS and CSS Provide services , Just between and db.json In the same category , establish public Catalog , It can store some static resources .

3-2 Replace port

        json-server Default The port is 3000,--port You can use the following flags to start on other ports JSON Server ：

json-server --watch db.json --port 8080

      If you think the code to start the service is a little long , You can also consider db.json Create a new folder at the same level package.json, Write the configuration information in it ：

{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

  And then start the service , Just execute the following instructions ：

npm run mock