如果看过上一篇《看得懂的 Node.js》,就会发现手动搭建一个 web 服务器还是比较繁琐
而 express 就是一个可以极大地提高开发效率的 web 开发框架
一、创建项目
在 express 4.0 之前,我们使用 npm install -g express 来全局安装 express
但是 4.0 之后,express 的命令行工具被单独分离出来,叫做 express-generator
npm install -g express-generator
如果了解过 vue,express-generator 和 express 的关系就像 vue-cli 和 vue 的关系
然后可以通过 express --version 命令来验证是否安装成功
然后在需要创建项目的目录下,直接使用 express 命令创建项目
express Node-Project
上面的 Node-Project 是自定义的项目名称
命令执行完成后,会在当前目录生成一个 Node-Project 项目文件夹
进入项目目录(cd Node-Project),安装依赖
npm install
然后通过 npm start 命令启动项目
npm start
开发过程中建议在 debug 环境中运行,所以通常使用这个命令启动项目:
set DEBUG=Node-Project & npm start
然后在浏览器中打开 http://localhost:3000/ 就能打开项目
如果 3000 端口被占用,可以在 bin / www 文件中修改端口
二、认识路由
在生成的项目文件中,有一个 routes 文件夹,存放着 express 框架预置的基本路由
路由一般由一个 URI、HTTP 请求(GET、POST)和若干个句柄组成
每个句柄的结构通常都是 app.METHOD(path, callback)
比如 users.js 就是一个最基本的路由
然后在 app.js 中引入模块
并配置路由结点
然后在浏览器中打开 http://localhost:3456/users 就能查看到响应内容
如果希望路由发送一个 html 页面,只需要使用 res.sendfile(url)
express 的结构中,通常在 views 中存放静态文件
假如已经在 views 文件夹下准备了一个 test.html文件,然后在 users.js 中追加一个句柄
router.get(‘/test‘, function(req, res) { res.sendfile("./views/test.html") });
然后打开 http://localhost:3456/users/test 就能查看到 test.html
三、加载静态文件
如果刚才的 test.html 文件中,关联了外部 css 或者 js 文件,会发现这些文件都没有被加载