初步尝试Express&jade快速建站

最近一直在看Web开发相关的书籍，一周时间读完了《Node开发指南》一书，由于之前了解过一些Node的相关知识，于是前面基础知识学得比较快，到开发实践这一章的时候，却发现好多内容不能跟着练习了。因为近几年Node的发展过于快速，其Web开发框架Express必然也更新得比较频繁，并且版本与版本之间差异较大。所以，书中必然有好多代码在现在来看肯定运行不了，但是大体的框架还是在那里，想动手实践还是得对照着官方文档进行。

1. 生成Express项目

根据官方文档入门的介绍，根据Express建站的步骤大致写一下：

  1. npm install express 安装express
  2. npm install express-generator -g 安装express应用生成器
  3. express myapp 生成express项目目录以及基本启动代码
  4. DEBUG=myapp npm start 启动应用（Mac or Linux）；set DEBUG=myapp & npm start 启动应用（Windows）
  5. 浏览器访问http://localhost:3000

通过上面几步很快就完成了一个项目的部署，那么接下来就是要往里填写内容了，用框架开发就是这么快，但是会忽略掉很多重要的细节。

打开myapp文件夹，会看到该项目的目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

了解过一些Node的相关知识就知道，Node是通过动态网页的方式来实现网站的，就如同其他语言Java、PHP一样，要实现动态页面就要在HTML模板中插入程序代码，于是就有了JSP、PHP以及ASP等技术。通过JavaScript实现的模板引擎有很多，Jade就是其中之一，为什么选择它，因为Express默认就是它，反正也是新接触，那就它咯。

2. Jade模板引擎

由于新学，也没有什么经验可谈，基本用法参考官网就可以了。这类语言基本上看一遍就百分之八九十了，接下来就是熟练使用它。

3. 回头看看app.js

1
2
3
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

这里就是设置Jade模板引擎以及视图目录的地方。

4. 编写路由规则

编写路由规则，打开routes/index.js文件，添加4条路由规则，代表4个不同的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Home Page'});
});
/* GET detail page. */
router.get('/detail/:id', function(req, res, next) {
  res.render('detail', { title: 'Detail Page'});
});
/* GET admin page. */
router.get('/admin', function(req, res, next) {
  res.render('admin', { title: 'Admin Page'});
});
/* GET list page. */
router.get('/list', function(req, res, next) {
  res.render('list', { title: 'List Page'});
});

5. 瞧瞧jade模板视图文件

打开views/layout.jade

1
2
3
4
5
6
7
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

看了一遍jade语法的基本就能看出这是一个基本页面,然后再打开views/index.jade。

1
2
3
4
extends layout
block content
  h1= title
  p Welcome to #{title}

路由规则中，title变量就用与此处，如此即为动态页面。npm start启动应用，访问http://localhost:3000得到页面如下图。

6. 依次创建detail、list、admin页面

根据路由规则所规定的访问路径，依次访问，会得到不同的动态页面。

技术, Node
建站, express, jade