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在浏览器看下效果,是不是一样的,那就对了。目前整个网站的雏形已经有了,后面我们就开始来真家伙了。