正式开发项目,其实并不会像上一集那样自己手动创建项目。而是会选择更加方便的 express-generator。安装好后,直接一个命令,自动建好项目所需的项目结构

安装

先来安装 express-generator

$ cnpm install express-generator -g

Tips: 这里安装 express-generator 使用的是 -g 参数,也就是将它装成全局的了。这样才能让它在任意目录都运行 express 命令。

新建项目

$ express --view=ejs blog
$ cd blog
$ cnpm install

这里咱们指定了 view,使用 ejs 模板引擎。ejs 是一套类似 RailsERB 的模板引擎,学习起来非常简单的,几乎 零成本。进入项目后,安装相关依赖包。

$ npm start

然后在浏览器中输入 http://localhost:3000,可以看到 Express 已经正常跑起来了。

express

目录结构

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

生成的项目有如下目录结构:

  • public 中是放的各种静态资源,例如 css图片和一些前端页面所需要的 js 代码。
  • routes 是程序的路由部分,路由简单的理解就是将不同的 URL,分别对应到不同的程序代码上去。如果你之前学过用过其他语言开发后端,这里的 routes 其实相当于其他 传统MVC框架路由 + 控制器。咱们开发项目,主要要写的逻辑代码就是放在这里。
  • views,程序的 视图 部分,说白了就是 html 模板 放这里。因为我们使用的是 ejs 模板引擎,所以文件的后缀名变成了 ejs,而不是 html 了。

代码解析

路由

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

第一行代码是说:当访问 / 这个路径的时候。function 里面应当怎样处理。这里有三个参数:

  • reqrequset 的缩写,就是请求的意思。如果用户传递过来的值,类似于 PHP中的 $_GET$_POST取值,在 Express 中就需要通过 req 来接收。
  • resresponse 的缩写,就是响应的意思。当用户有请求过来后,总得响应点什么给用户吧。要么是 渲染一个模板,要么就返回一段 json,这就需要用到这里的 res 了。
  • next 是前往下一个中间件的意思,后面咱们开发项目碰到时再来说。

第二行代码是说:使用 resrender 方法,渲染了一个叫做 index 的模板。并且将 title 传递到了模板中。

视图

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

views/index.ejs 模板中,看到了有几个 <%= title %>,这里就是接受刚才路由部分,发送过来的 title。因为传递过来的 title 值为 Express。所以,浏览器上就显示了 Welcome to Express

修改文件,必须重启

这时候咱们再来做一个测试,将 title 改为 ITFun

router.get('/', function(req, res, next) {
  res.render('index', { title: 'ITFun' });
});

刷新页面后,发现浏览器显示的还是以前的 Welcome to Express,解决方法是需要先停止服务再重启。果然就变成了,Welcome to ITFun

express

使用 nodemon 监听代码变动

但每次改完代码后,都需要重启服务,这让我们开发的过程非常不方便。为了解决这个问题,最方便简单的方法是来安装 nodemon。先停止掉服务后,运行

cnpm i nodemon -S

然后在package.json中,启动服务的命令改为

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

使用 npm start 启动服务,再次修改代码,

router.get('/', function(req, res, next) {
  res.render('index', { title: '长乐未央' });
});

刷新浏览器,果然页面的显示的内容会自动变化了。

express

参考文档

已添加到喜欢了