Front-end node.js uses express module to quickly build web server

Front-end node.js uses express module to quickly build web server

Written in front: Editor: vscode
Preparation : Modules to
be used:

• express module: used to quickly build a server
• morgan module: log module
• body-parser module: for data processing
• path module: built-in module for address information processing

Implementation process:

1. Create project file: here I created a express-app folder as the root directory
2. Create the project directory structure: here I only created some directories that I need. The
   directory structure is as follows:
   
   you can create it directly in the folder by clicking, or you can enter the express-app folder in the terminal and use the command mkdir folder name Way to create
3. Write code in the main module

//引入 要使用到的模块 express morgan body-parser 
const express = require("express");
const logger = require("morgan");
const bodyParser = require("body-parser");
const path = require("path");
const router = require("./routes/index");

//实例化 express
const app = express();

//使用中间件 app.use()
//设置日志以开发环境显示
app.use(logger("dev"));

//设置数据处理方式
app.use(bodyParser.json()); //处理 json 数据
app.use(bodyParser.urlencoded({
    
    extended:false})); //处理 post 提交的数据

//设置静态资源 
//express.static(" 地址 ")设置静态资源 
//path.join(__dirname , "public") 动态获取服务器地址 与静态资源文件夹进行地址拼接 .join()
app.use(express.static(path.join(__dirname , "public")));

//设置路由
app.use(router);
//端口号监听
app.listen(3000 , () => {
    
    
  console.log("server is running...")
});

There are two ways to set up routing here, one is to write a routing module by yourself, and the other is to generate a module through express. Here I wrote the routing in the routes/index.js file.
Routing file: routes/index.js

//引入 express 模块
//引入 express 模块
const express = require("express");

//实例化路由
const router = express.Router();

//设置路由匹配规则
//访问 home 页面
router.get("/" , (request , response) => {
    
    
  console.log("获取到的参数",request.url);//打印一下访问路径，控制台查看
  response.send("欢迎来到 express 框架");
});

//暴露路由
module.exports = router;

1. Add resources to the static resource folder Here I added a few files for testing
   

2. At this point, after the code is written, it is time to start operations in the terminal

3. Into the root directory of the current project, use npm initinitialize to generate package.json documents, records information about the project, as well as to facilitate the transfer and copy publishing dependent. Set according to the information displayed in the terminal. Of course, you can always press Enter. My package.json file after setting:

4. 

5. Install the third-party module, because I used Taobao npm mirror (installation speed is faster), so the command is cnpm i express morgan body-parser --saveinstalled successfully
   
   . The package.json file
   
   at this time produced three dependent packages at the end.

6. The next step is to run the project node app
   
   entered in a browser http://127.0.0.1:3000/to access root
   
   access css file http://127.0.0.1:3000/css/base.css
   
   access js file http://127.0.0.1:3000/js/common.js
   
   access image resources http://127.0.0.1:3000/images/guoqing.jpg
   
   when accessing public address omitted

At this point, this simple project is complete