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

文章目录

• • 一、使用express-generator创建项目
  • • 1.1 安装express-generator模块
    • 1.2 生成express项目结构
    • 1.3 启动项目
    • 1.4 设置nodemon自启项目
  • 二、手动创建一个Express项目
  • • 2.1 创建项目文件夹并初始化
    • 2.2 安装express模块
    • 2.3 创建项目主文件
    • 2.4 编辑app.js文件
    • 2.5 启动项目
    • 2.6 使用nodemon启动项目
  • 三、项目代码

一、使用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-serverpublic
   create : express-serverpublicjavascripts
   create : express-serverpublicimages
   create : express-serverpublicstylesheets
   create : express-serverpublicstylesheetsstyle.css
   create : express-serverroutes
   create : express-serverroutesindex.js
   create : express-serverroutesusers.js
   create : express-serverviews
   create : express-serverviewserror.pug
   create : express-serverviewsindex.pug
   create : express-serverviewslayout.pug
   create : express-serverapp.js
   create : express-serverpackage.json
   create : express-serverbin
   create : express-serverbinwww

   change directory:
     > cd express-server

   install dependencies:
     > npm install

   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

2. 创建一个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”
   }
   }

3. 启动项目

使用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-serverpackage.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

2. 启动项目

   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

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦