01 node express system framework construction (express generator)

One 、 Use express-generator Create project

structure Express The quickest way of the project , There is nothing better than using express-generator Modules are generated automatically , This is also the way recommended in this article .

1.1 install express-generator modular

npm i express-generator -g

1.2 Generate express Project structure

Use express Instruction in express-server Create a folder using pug Template engine project .

> express --view=pug express-server

   create : express-server\
   create : express-server\public\
   create : express-server\public\javascripts\
   create : express-server\public\images\
   create : express-server\public\stylesheets\
   create : express-server\public\stylesheets\style.css
   create : express-server\routes\
   create : express-server\routes\index.js
   create : express-server\routes\users.js
   create : express-server\views\
   create : express-server\views\error.pug
   create : express-server\views\index.pug
   create : express-server\views\layout.pug
   create : express-server\app.js
   create : express-server\package.json
   create : express-server\bin\
   create : express-server\bin\www

   change directory:
     > cd express-server

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=express-server:* & npm start

After the project is created , The directory structure is shown below ：

express-server
    |- bin/
    |		|- www
    |- public/
    |		|- images/
    |		|- javascripts/
    |		|- stylesheets/
    |- routes/
    |		|- index.js
    |		|- users.js
    |- views/
    |		|- error.pug
    |		|- index.pug
    |		|- layout.pug
    |- app.js
    |- package-lock.json
    |- package.json          

among ：

1. app.js Is the project master file ;
2. views Directory is used to store page files ;
3. routes Directory is used to store routing files ;
4. public For storing static files ;
5. bin Medium www It's the startup file for the project ;

1.3 Start project

Under normal circumstances , Just enter the project folder , Install the package that the project depends on , Then execute the start command .

> cd .\express-server\          #  Go to the project folder 
> npm i													#  Install dependency packages 

added 124 packages in 3s
> npm start                     #  Start project 

> [email protected] start
> node ./bin/www

here , visit localhost:3000 You can access the system ：

1.4 Set up nodemon Self starting project

We started the project using npm start The order is in package.json Configured in , alike , We can configure our own instructions .

In the development process , Once the project code is modified, you need to restart the project to see the execution results , To improve development efficiency , We usually use them nodemon The module automatically restarts the project after the project is modified .

1. install nodemon modular

npm i nodemon -g

2. Create a nodemon Instructions to start the project （ Section of the following code 7 That's ok ）

{
    
  "name": "express-server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    
    "start": "node ./bin/www",
    "serve": "nodemon ./bin/www"  
  },
  "dependencies": {
    
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

3. Start project

Use npm run serve The command starts at the terminal express project .

> npm run serve

> [email protected] serve
> nodemon ./bin/www

[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json  
[nodemon] starting `node ./bin/www`

here , If the project code changes , The project automatically restarts .

Two 、 Manually create a Express project

2.1 Create a project folder and initialize

Create a file called express-server Project folder for , And use npm init -y Initialize project folder .

> mkdir express-server
> cd express-server
> npm init -y
Wrote to .\express-server\package.json:

{
    
  "name": "express-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

At this point, a project folder named package.json The file of .

2.2 install express modular

> npm i express 

2.3 Create the project master file

> touch app.js

2.4 edit app.js file

Create a hello world Program , edit app.js The contents of the document are as follows ：

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
    
  res.send('Hello World!')
})

app.listen(port, () => {
    
  console.log(`Example app listening on port ${
      port}`)
})

2.5 Start project

Use node Command start project , The implementation effect is as follows ：

> node .\app.js
Example app listening on port 3000

here , visit localhost:3000 See the interface shown in the following figure ：

2.6 Use nodemon Start project

Use nodemon Make the project start automatically after modification .

1. install nodemon modular

npm i nodemon -g

2. Start project

> nodemon .\app.js
[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node .\app.js`
Example app listening on port 3000

3、 ... and 、 Project code

01-express-generator