Install the Express library and generator

Open CMD and run the yarn global add express express-generator command

Explanation: The two modules represent libraries and generators, respectively. Installing Express will automatically install the Express-Generator for you with ExpresS3, but with ExpresS4 they are separated, so you need to install them separately.

After the installation, run the express –version command to check whether the installation is successful.

If the version number appears, the installation is successful (as shown in the following figure).

Express generator automatically creates Express projects

Enter the express nodejs command (successful as shown below)

Directories after success:

Go to package.json and install the package

Enter the yarn, CNPM I, or NPM I command

Iv. Start the project

Enter the command: NPM run start

Open your browser and access 127.0.0.1:3000 to get access to our project

5. Explanation of project catalogue

Bin: stores executable files

Public: stores js, CSS, and IMG files

Router: stores routing files

Views: Stores view files or template files

App.js: startup file (entry file)

Package. json: stores project information and module dependencies. When adding dependencies to dependencies, run NPM install to check package.json in the current directory and install all specified modules automatically

Node_modules: Stores modules installed in package.json. After you add dependent modules to package.json and install them, store them in this folder

Refer to the link: www.cnblogs.com/shimily/art…

Vi. How to develop in this project

Start by creating a new test.js file in Routes

var express = require('express');
var router = express.Router();

router.get('/'.function (req, res, next) {
	res.send('I'm an interface return value');
});

module.exports = router;
Copy the code

Then add the following code to app.js

var testRouter = require('./routes/test');

app.use('/test', testRouter);

Then open the browser console and fetch the interface we just wrote

fetch('http:localhost:3000/test')
.then(res= >{
  return res.text()
}).then(res= >{
  console.log(res)
})
Copy the code

We found cross-domain problems because we didn’t add cross-domain to NodeJS.

Add the following cross-domain code to app.js

// Set cross-domain access (set it before all requests)
app.all("*".function (req, res, next) {
	* indicates that any domain name is allowed to cross domains
	res.header("Access-Control-Allow-Origin"."*");
	// The allowed header type
	res.header("Access-Control-Allow-Headers"."content-type");
	// The type of requests that are allowed across domains
	res.header("Access-Control-Allow-Methods"."DELETE,PUT,POST,GET,OPTIONS");
	if (req.method == 'OPTIONS')
		res.sendStatus(200); // Let options try to end the request quickly
	else
		next();
});
Copy the code

Then restart the project so that it can be accessed normally

If we modify the content in the project, we need to restart the project manually, which is a bit troublesome. We can install a plug-in to solve this problem.

7. Use nodemon to automatically restart the service

  1. Install the Nodemon module

Enter the NPM I nodemon-s command

  1. Create the nodemon.json file

Create the nodemon.json file in the root directory of the project

{
	"restartable": "rs"."ignore": [".git".".svn"."node_modules/**/node_modules"]."verbose": true."execMap": {
		"js": "node --harmony"
	},
	"watch": []."env": {
		"NODE_ENV": "development"
	},
	"ext": "js json njk css js "
}

Copy the code
  1. Use the Nodemon module

In your package.json file, add a line of script code

"dev": "nodemon ./bin/www"

The code has been put into my Github repository with the link: github.com/wuguanfei/n…

These days, I just wrote a simple background management system made of Vite2 +vue3+TypeScript4+elementPlus. The subsequent functions are still under development. Welcome to use XDM and give your comments 🐶, with the link attached: github.com/wuguanfei/v…