1.Express介绍
官网上有这样一句话很好的概括了Express:
高度包容、快速而极简的Node.js Web 框架
前端有Vue、react等框架,Java也有相对应的开发框架,那么Nodejs也有对应的开发框架,Express就是这样一个Nodejs框架。
Express 是一个简洁而灵活的 node.js web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。
总的来说:Express可以快速的帮助我们搭建一个完整的网站,它并没有更改Nodejs原有的特性,它只是在Nodejs的基础上进行了扩展,让我们可以更方便的进行开发,它有以下几点核心特点:
- 可以设置中间件来响应 HTTP 请求
- 定义了路由表用于执行不同的 HTTP 请求动作
- 定义了路由表用于执行不同的 HTTP 请求动作
2.安装Express
全局安装Express生成器,就像vue-cli一样,可以让我们使用express命令直接创建一个基于express的项目。
npm i -g express-generator
查看Express版本,出现版本号则代表安装成功
express --version
查看版本号
3.初始化Express项目
(1)初始化项目
在电脑任意位置,打开命令行,输入如下初始化命令
express server // server为项目名称,可以任意取
此时目录出现了server文件夹,命令行出现如下界面则代表创建成功:
创建成功
项目初始目录如下:
(2)安装依赖
根据命令行内的提示,安装依赖,进入项目文件夹内,输入如下命令:
npm install
通过package.json文件,我们可以看到项目里面的依赖又哪些,以及启动命令:
package.json文件
依赖解释:
- cookie-parser:第三方cookie操作模块
- express:express框架
- morgan:日志组件
(3)启动项目
命令行输入命令:
npm run start
命令行显示如下则代表启动成功:
我们可以通过bin下面的www文件查看端口号是多少,默认端口是3000,通过浏览器访问同样可以得知是否启动,浏览器输入http://localhost:3000:
启动成功
4.安装nodemon
按照上面方式初始化的项目无法做到更新,当我们更改了代码必须重启才行,所以我们借助nodemon插件实现热更新。
安装依赖:
npm install nodemon
在package.json里面更改启动命令:
"scripts": { "start": "nodemon ./bin/www" },
这个时候项目就可以做到热更新了。
5.封装路由
做前端开发的小伙伴都知道,后端只负责给我们暴露接口,格式大概是/api/...这样的,那么在express中,同样以这种形式将接口返回给前端。在我们刚刚生成的express项目中,有routes文件夹,这个文件夹下面就用来放置我们的路由,也可以叫做接口。
我们改造以下routes文件夹,让我们的路由更加方便管理。
(1)在routes文件夹下新建modules文件夹,用来存放各个接口模块,然后删掉初始化出来的user.js:
新建modules文件夹
因为其它地方引用了它们,所以还得删掉引用的地方,在app.js中:
然后修改为如下:
初始化路由
(2)在modules文件夹下新建home.js,用来存放首页的相关接口逻辑,并编写代码如下:
/routes/modules/home.js // 封装接口方法 const home = { getInfo: (req, res) => { res.render("index", { title: "Express" }); }, }; module.exports = home;
然后修改routes下的index.js,代码如下:
/routed/index.js var express = require("express"); var router = express.Router(); const home = require("./modules/hoem"); /* GET home page. */ router.get("/getInfo", home.getInfo); module.exports = router;
(3)这个时候就在浏览器输入http://localhost:3000/getInfo 同样可以访问了。