文档结构
使用Express
最简单的启动Express
在工程根目录下新建一个文件：app.js，文件内的代码如下：
var express = require("express"),
app = express(),
server;
// 启动服务器
server = app.listen("3000", "127.0.0.1", function () {
console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});
然后，用命令提示符窗口，在工程根目录下，启动工程：
node app
在浏览器中输入访问地址127.0.0.1:3000，效果如图所示：
最简单的启动Express.png
添加网站标识图标
下面稍稍加工一下，来为工程添加一个标识图标，就用这个图像吧(图像放在根目录下的public文件夹里)：
Oh my god ! They kill Kenny! You bastard!
首先，引入依赖模块：serve-favicon
npm install serve-favicon --save
其次，修改app.js文件：
var express = require("express"),
favicon = require("serve-favicon"),
app = express(),
server;
// 网站标识图标
app.use(favicon(__dirname + "/public/kenny.png"));
// 启动服务器
server = app.listen("3000", "127.0.0.1", function () {
console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});
在浏览器中输入访问地址127.0.0.1:3000，效果如图所示：
添加网站标识图标.png
润色，向浏览器发送个字符串
这个光秃秃的页面，看着确实难受，总以为页面出错了呢。还是再润色一下，显示点文字吧。
用get方法吧，来根据请求路径来处理客户端发出的GET请求。
格式：app.get(path,function(request, response));
path为请求的路径，第二个参数为处理请求的回调函数，有两个参数分别是request和response，代表请求信息和响应信息。
修改app.js文件：
var express = require("express"),
favicon = require("serve-favicon"),
app = express(),
server;
// 网站标识图标
app.use(favicon(__dirname + "/public/kenny.png"));
// 处理客户的的GET请求
app.get("/", function(req, res) {
res.send("首页");
});
app.get("/about", function(req, res) {
res.send("这是about页面");
});
app.get("*", function(req, res) {
res.send("还没有页面，显示个404");
});
// 启动服务器
server = app.listen("3000", "127.0.0.1", function () {
console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});
这样就指定了about页面路径、根路径和所有路径的处理方法。并且在回调函数内部，使用HTTP回应的send方法，表示向浏览器发送一个字符串。
效果如图所示：
首页.png
about页面.png
其他页面.png
来真的了，访问一个页面
接下来，该弄点儿干货了。首页还是简陋，又不能光用字符串拼出个正经的、比较美观的页面，真那样干，非得累死不行。怎么解决呢？有个法儿，用模板呗。先把需要的内容用模板组装好，然后在需要显示的时候调用它，靠，简单利索。
事儿就是这么个事儿，下手吧。
其实，Express本身自己是有模板引擎的，你想啊，这么牛B的框架，连模板引擎都没有，怎么能拿出手给人看呢。它默认的模板是jade，中文的意思是翡翠。怎么样，很高大上吧，不过，这个模板我不会用，它的语法、文档格式什么的，我看着很陌生，所以我选择了另外一种模板，名字叫ejs，这个模板的文档格式跟html非常贴近，它的语法又跟jsp非常贴近，而且据路边八卦社透露，它的性能要比jade高，因此就拿它试刀吧。
使用ejs模板的步骤如下：
- 安装ejs模块
在命令提示符下进行安装，代码如下：
npm install ejs --save
- 指定前端模板所在文件夹
app.set("views", __dirname + "/view");
- 指定用ejs模板引擎来解析
app.set("view engine", "ejs");
- 设置路由
app.get("/", function(req, res) {
res.render("index");
});
这段代码的意思是说：当访问工程的根路径时，ejs引擎会调用view文件夹下的index.ejs文件，解析后，将结果显示到浏览器中。注意：调用模板要用render()方法，而不是之前介绍的send()方法。
index.ejs文件内容如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>首页---ejs模板</title>
</head>
<body>
我是ejs模板
</body>
</html>
app.js文件内容如下：
var express = require("express"),
favicon = require("serve-favicon"),
app = express(),
server;
// 设置前端模板所在文件夹
app.set("views", __dirname + "/view");
// 指定用ejs模板引擎
app.set("view engine", "ejs");
// 网站标识图标
app.use(favicon(__dirname + "/public/kenny.png"));
// 处理客户的的GET请求
app.get("/", function(req, res) {
res.render("index");
});
app.get("/about", function(req, res) {
res.send("这是about页面");
});
app.get("*", function(req, res) {
res.send("还没有页面，显示个404");
});
// 启动服务器
server = app.listen("3000", "127.0.0.1", function () {
console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});
效果如图所示：
使用ejs模板引擎.png
基因突变，用ejs引擎解析html文件
可以看得出来，上面的解析ejs文件例子中，这个index.ejs文件的文档结构其实就是一个html的文档结构，那么问题来了，ejs引擎能不能解析html文件呢？Of course, no problem!
那么，下手吧。
用ejs解析html文件，只需要两行代码：
app.set("view engine", "html");
app.engine('.html', require('ejs').__express);
这样，修改后的app.js文件的内容就是这样的：
var express = require("express"),
favicon = require("serve-favicon"),
app = express(),
server;
// 设置前端模板所在文件夹
app.set("views", __dirname + "/view");
// 指定用ejs模板引擎，来解析后缀是.html的文件
app.set("view engine", "html");
app.engine('.html', require('ejs').__express);
// 网站标识图标
app.use(favicon(__dirname + "/public/kenny.png"));
// 处理客户的的GET请求
app.get("/", function(req, res) {
res.render("index");
});
app.get("/about", function(req, res) {
res.send("这是about页面");
});
app.get("*", function(req, res) {
res.send("还没有页面，显示个404");
});
// 启动服务器
server = app.listen("3000", "127.0.0.1", function () {
console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});
这段代码的意思是说：当访问工程的根路径时，ejs引擎会调用view文件夹下的index.html文件，解析后，将结果显示到浏览器中。
index.html文件内容如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>首页-HTML模板</title>
</head>
<body>
我是HTML模板
</body>
</html>
效果如图所示：
用ejs引擎解析html文件.png
然后...该定义静态资源的目录了
众所周知，一个页面中只用HTML标签来展示是远远不够的，它还应当具有丰富的配色（让用户看起来顺眼，舒服）和逻辑交互（与用户互动，完成某些操作），这就需要用到CSS样式文件、各种图像文件、JS脚本文件等等各种类型的静态资源。那么，问题又来了，怎样让Express能够访问到这些静态资源呢？其实不难，只需要在app.js文件中指定存放静态资源的目录就行了。
在app.js文件中添加如下代码：
var path = require('path');
// 定义静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
这样，Express就能够访问到根目录下public文件夹中的静态资源了。
index.html文件内容如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>首页-HTML模板</title>
<link href="/css/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
我是HTML模板
</body>
</html>
这样public/css文件夹下的demo.css就可以被页面加载、解析了。
别忘了，要设置路由
...
网友评论