node.js express项目搭建

以你之姓@ 2021-09-01 10:15 428阅读 0赞

**目录**

1.安装Express

2.第一个 Express 框架实例

3.全局安装Express及express-generator

4.初始化一个Express应用

5.启动应用

--------------------

Express 是一个简洁而灵活的 node.js Web应用框架，使用 Express 可以快速地搭建一个完整功能的网站。本教程介绍如何从零开始搭建Express项目。

开发环境：windows7，node v10.16.0

### 1.安装Express ###

命令：npm install express --save

安装成功后，会在项目目录下生成一个 node\_modules 目录，node\_modules 目录下会自动创建 express 目录

![format_png][]

查看Express版本命令：npm list express

![format_png 1][]

### 2.第一个 Express 框架实例 ###

新建express\_demo.js文件，添加如下代码：

//express_demo.js 文件
    var express = require('express');//引用express
    var app = express();//创建express实例
    
    app.get('/', function (req, res) {//当路由url匹配为'/'时，执行function，返回Hello World
        res.send('Hello World');
    });
    
    var server = app.listen(8081, function () {//应用启动端口为8081
    
        var host = server.address().address;
        var port = server.address().port;
    
        console.log("应用实例，访问地址为 http://%s:%s", host, port)
    
    });

执行以上代码：$  node express\_demo.js

![format_png 2][]

打开浏览器，访问 localhost:8081，可以看到成功返回Hello World

![format_png 3][]

以上就搭建起了一个可运行的 express 项目，下面我们通过生成器工具`express-generator`快速生成一个Express应用

### 3.全局安装Express及express-generator ###

命令：npm install  -g express，`npm install -g express-generator`

### 4.初始化一个Express应用　　 ###

命令：`express express-app（其中express-app为项目名称）`

初始化后的项目目录结构：

![format_png 4][]

目录结构简介：

*  `app.js `应用的初始化文件，包括引入应用程序的基础依赖项、设置视图即view的引擎目录以及模板、设置静态资源路径、配置通用的中间件、引入路由和一些错误处理中间件等。
 *  `package.json `应用的配置文件，文件内包含程序的基础信息、启动脚本和依赖包等。
 *  `bin/www `应用的启动文件，文件内包含引用要启动的应用、设置应用监听的端口和启动http服务等。
 *  `public/** `应用的静态资源文件目录，该目录下的文件资源不需要经过文件映射就可以直接访问。
 *  `routes/** `应用的路由文件，这些路由文件中设置的接口最终会以指定的HTTP请求方式暴露给用户，并在用户请求之后将结果返回。
 *  `views `应用的视图文件，在`app.js`中设置好视图引擎和模板之后，该目录即为应用视图的根目录，然后路由文件就会根据`app.js`中的设置加载并渲染该目录下的视图文件。

### 5.启动应用 ###

安装应用的依赖包命令：npm install

启动程序命令：npm start 或 `node bin/www `

启动后，用浏览器访问：localhost:3000（默认启动端口为3000），可以看到如下页面：

![format_png 5][]

[format_png]: /images/20210728/1083256838f74bab94e25b881e078747.png
[format_png 1]: /images/20210728/1319058480764cb68aba39e6a166ef89.png
[format_png 2]: /images/20210728/a16f90c700da462d903b77fd0d4b93bf.png
[format_png 3]: /images/20210728/0f86a3fde7da4851967546190926bdef.png
[format_png 4]: /images/20210728/7b6c18b0ea8e484994125851b2bda2a9.png
[format_png 5]: /images/20210728/0f3ec51d7b6f42bb925057829b5a7e05.png