Express入门

110 阅读2分钟

Express是基于node.js的一款web开发框架。

环境准备

如果没有安装node,需要先去安装node,安装好node之后就可以开始了,首先创建项目的根目录myapp

$ mkdir myapp
$ cd myapp

利用npm init命令给项目创建一个package.json配置文件,可用于后续安装依赖库执行此命令的时候会给出提示,让用户决定,如果不想更改默认值,直接enter键即可。接下来在项目根目录中执行如下命令,安装Express,并将Express保存到package.json的依赖库列表中。

$ npm install express --save

如果只是临时安装 Express,不想将它添加到依赖列表中,可执行如下命令:

$ npm install express --no-save // 一般用--save,不用此法

npm 5.0+ 版本在默认情况下会将安装的模块添加到 package.json 文件中的 dependencies 列表中。对于较老的 npm 版本,你就必须指定 --save 参数。然后,照旧执行 npm install 命令即可自动安装依赖列表中所列出的所有模块。

创建一个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}`)
})

使用下面命令来启动web服务

$ node app.js

启动成功后,在浏览器输入http://localhost:3000即可接收到响应。

可以用vscode作为编辑器,可以安装node、Express代码提示插件,这样写着才爽!

Express生成器快速搭建项目框架

上述的hello word示例只是个最简单的web服务程序,需要我们自己去搭建项目的基本框架,为了快速搭建项目框架,Express官方提供了express-generator工具,该工具可以快速搭建一个web服务程序的基本框架,以便我们更快速的进入到开发当中,工具生成的框架也可以根据我们自己的需要进行调整。

你可以通过 npx (包含在 Node.js 8.2.0 及更高版本中,对于较老的版本的node,建议先升级node)命令来运行 Express 应用程序生成器。

$ npx express-generator 工程根目录名称
$ cd 工程根目录名称
$ npm install

通过生成器创建的应用一般都有如下目录结构:

.
├── app.js
├── bin
│   └── www
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

通过 Express 应用生成器创建应用只是众多方法中的一种。你可以不使用它,也可以修改它让它符合你的需求。

然后在项目的根目录执行如下命令:

$ DEBUG=myapp:* npm start // 也可以直接执行 npm start

项目启动成功后,在浏览器中输入http://localhost:3000/即可访问web应用。

热加载

在每次修改完代码之后,都要重新执行start命令,修改的代码才能生效,也不知道有没有类似hot reload的方法,答案是肯定的,我们可以通过nodemon来进行hot reload热加载

npm install nodemon -g // 全局安装nodemon
nodemon ./bin/www  // 运行项目

为了方便,我们可以在package.json的scripts中添加命令,如下所示:

"scripts": {
    "start": "nodemon ./bin/www"
},

然后直接执行npm start即可,每次代码修改后,cmd+s就会触发热加载,使修改的代码生效。

实战演练

  1. 请参考本文
  2. 实战开源代码

引用文章

Express中文官网