文章目录
一、使用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-servercreate : 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.csscreate : express-server\routes\create : express-server\routes\index.jscreate : express-server\routes\users.jscreate : express-server\views\create : express-server\views\error.pugcreate : express-server\views\index.pugcreate : express-server\views\layout.pugcreate : express-server\app.jscreate : express-server\package.jsoncreate : express-server\bin\create : express-server\bin\wwwchange directory:> cd express-serverinstall dependencies:> npm installrun 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
其中:
app.js
是项目主文件;views
目录用于存放页面文件;routes
目录用于存放路由文件;public
用于存放静态文件;bin
中的www
是项目的启动文件;
1.3 启动项目
正常情况下,只需要进入项目文件夹,安装项目依赖的包,然后执行启动命令即可。
> cd .\express-server\# 进入项目文件夹> npm i# 安装依赖包added 124 packages in 3s> npm start # 启动项目> express-server@0.0.0 start> node ./bin/www
此时,访问localhost:3000
即可访问系统:
1.4 设置nodemon自启项目
我们启动项目使用的npm start
指令是在package.json
中配置的,同样的,我们可以配置我们自己的指令。
在开发过程中,一旦修改了项目代码就需要重新启动项目才能看到执行结果,为了提高开发效率,我们通常会使用nodemon
模块在项目修改后自动重启项目。
安装nodemon
模块
npm i nodemon -g
创建一个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"}}
启动项目
使用npm run serve
指令在终端启动express
项目。
> npm run serve> express-server@0.0.0 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 -yWrote 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 = 3000app.get('/', (req, res) => {res.send('Hello World!')})app.listen(port, () => {console.log(`Example app listening on port ${port}`)})
2.5 启动项目
使用node
指令启动项目,执行效果如下:
> node .\app.jsExample app listening on port 3000
此时,访问localhost:3000
可见下图所示的界面:
2.6 使用nodemon启动项目
使用nodemon
使项目在修改后自启动。
安装nodemon模块
npm i nodemon -g
启动项目
> 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