01-Node-Express系统框架搭建（express-generator）

文章目录

一、使用express-generator创建项目

构建Express项目最快捷方式，莫过于使用express-generator模块自动生成，这也是本文推荐的方式。

1.1 安装express-generator模块

npm i express-generator -g

1.2 生成express项目结构

使用

express

指令在

express-server

文件夹创建一个使用

pug

模板引擎的项目。

> 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:
     >npminstall

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

项目创建完成后，目录结构如下所示：

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          

其中：

1. app.js是项目主文件；
2. views目录用于存放页面文件；
3. routes目录用于存放路由文件；
4. public用于存放静态文件；
5. bin中的www是项目的启动文件；

1.3 启动项目

正常情况下，只需要进入项目文件夹，安装项目依赖的包，然后执行启动命令即可。

>cd .\express-server\# 进入项目文件夹>npm i                                                    # 安装依赖包

added 124 packages in 3s
>npm start                     # 启动项目> [email protected] start
>node ./bin/www

此时，访问

localhost:3000

即可访问系统：

1.4 设置nodemon自启项目

我们启动项目使用的

npm start

指令是在

package.json

中配置的，同样的，我们可以配置我们自己的指令。

在开发过程中，一旦修改了项目代码就需要重新启动项目才能看到执行结果，为了提高开发效率，我们通常会使用

nodemon

模块在项目修改后自动重启项目。

1. 安装nodemon模块

npm i nodemon -g

1. 创建一个nodemon启动项目的指令（以下代码的第7行）

{"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"}}

1. 启动项目

使用

npm run serve

指令在终端启动

express

项目。

>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`

此时，若项目代码发生了改动，项目向自动重启。

二、手动创建一个Express项目

2.1 创建项目文件夹并初始化

创建一个名为

express-server

的项目文件夹，并使用

npm init -y

初始化项目文件夹。

>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"}

此时项目文件夹中就创建了一个名为

package.json

的文件。

2.2 安装express模块

>npm i express 

2.3 创建项目主文件

>touch app.js

2.4 编辑app.js文件

创建一个

hello world

程序，编辑

app.js

文件内容如下：

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 启动项目

使用

node

指令启动项目，执行效果如下：

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

此时，访问

localhost:3000

可见下图所示的界面：

2.6 使用nodemon启动项目

使用

nodemon

使项目在修改后自启动。

1. 安装nodemon模块

npm i nodemon -g

1. 启动项目

> 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

三、项目代码

01-express-generator