express + mongodb 搭建一个简易网站(二)
express + mongodb 搭建一个简易网站 （二）
在搭建网站（一）中，实现了简单的路由功能，这离一个完整的网站还差的有点远，继续撸代码吧。
1.首先在根目录下新建一个views文件夹，用来存放项目的模板文件，然后在views目录下分别新建index.ejs、admin.ejs、detail.ejs、about.ejs四个文件，如下图。
至于ejs模板的语法。贴个简单的介绍。
在ejs模板中，通常会用下面四种方式在HTML中输出服务端的变量或表达式的值：
a. 直接在<%%>中写表达式或变量。这种情况通常只是用来进行表达式计算或给变量赋值，不会有任何输出，被称作无缓冲的代码。
<% code %>
b. 在<%%>中通过=号输出变量或表达式的值。默认输出到页面中的内容会进行HTML转义。如<div>Hello</div>输出后会变成<div>Hello</div>
<%= code %>
c. 在<%%>中通过-号输出变量或表达式的值。内容不经任何转义直接输出到页面上。
<%- code %>
d. 在结束标记%>之前添加-号，这样输出的内容会自动带有HTML标记的缩进。如：
<% code -%> 或 <% -%> 或 <%= code -%> 或 <%- code -%>
2.将app.js中的代码修改如下：
var express = require('express'); // 引入express框架 var path = require('path'); // 引入path模块 var port = process.env.PORT || 8000; // 设置端口号：3000 var app = express(); //实例化express app.set('views', path.join(__dirname, 'views')); // 设置模板目录 app.set('view engine', 'ejs'); // 设置当前的模板引擎是ejs app.listen(port); // 启动web服务。 app.get('/', function(req, res) { res.render('index', {title: '首页'}); }) app.get('/admin', function(req, res) { res.render('admin', {title: 'admin页'}); }) app.get('/detail', function(req, res) { res.render('detail', {title: 'detail页'}); }) app.get('/about', function(req, res) { res.render('about', {title: 'about页'}); }) console.log('server listening at ' + port);
然后在index.ejs、admin.ejs、detail.ejs、about.ejs中添加如下代码（四个文件一样的代码哦）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>website</title>
</head>
<body>
这是<%= title %>
</body>
</html>
3.由于app.js中使用到了path和ejs模块，所以在控制台中输入npm install ejs path，安装完成后输入node app运行后，
然后在浏览器中输入
http://localhost:8000/
http://localhost:8000/admin
http://localhost:8000/detail
http://localhost:8000/about
是不是出现对应的效果，还是以前的效果，但是我们使用了模板html，以后的页面就是通过模板来渲染后然后返回浏览器。
4.现在的路由都是写在app.js中的，以后app.js中代码量一大就不好维护了，所以要把路由单独抽出来变成一个模块。
在根目录下新建一个routes文件夹，进入routes文件夹下，新建app.js、admin.js、detail.js、index.js、about.js,所有的路由文件全部放在routes中。
在routes/app.js中添加如下代码：
module.exports = function (app) { app.use('/', require('./index')); app.use('/admin', require('./admin')); app.use('/detail', require('./detail')); app.use('/about', require('./about')); };
在routes/index.js中添加如下代码：
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('index', {title: '首页'}) }) module.exports = router
在routes/admin.js中添加如下代码：
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('admin', {title: 'admin页'}) }) module.exports = router;
在routes/detail.js中添加如下代码：
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('detail', {title: 'detail页'}) }) module.exports = router;
在routes/about.js中添加如下代码：
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('about', {title: 'about页'}) }) module.exports = router;
最后app.js中的代码修改如下：
var express = require('express'); // 引入express框架 var path = require('path'); // 引入path模块 var routes = require('./routes/app');// 引入路由模块 var port = process.env.PORT || 8000; // 设置端口号：3000 var app = express(); //实例化express app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.listen(port); // 启动web服务。 routes(app); console.log('server listening at ' + port);
运行node app在浏览器看下效果，是不是一样的，那就对了。目前整个网站的雏形已经有了，后面我们就开始来真家伙了。
