express + mongodb 搭建一个简易网站 （二）

在搭建网站（一）中，实现了简单的路由功能，这离一个完整的网站还差的有点远，继续撸代码吧。

1.首先在根目录下新建一个views文件夹，用来存放项目的模板文件，然后在views目录下分别新建index.ejs、admin.ejs、detail.ejs、about.ejs四个文件，如下图。

至于ejs模板的语法。贴个简单的介绍。

在ejs模板中，通常会用下面四种方式在HTML中输出服务端的变量或表达式的值：

a. 直接在<%%>中写表达式或变量。这种情况通常只是用来进行表达式计算或给变量赋值，不会有任何输出，被称作无缓冲的代码。

<% code %>
b. 在<%%>中通过=号输出变量或表达式的值。默认输出到页面中的内容会进行HTML转义。如<div>Hello</div>输出后会变成&lt;div&gt;Hello&lt;/div&gt;

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

express + mongodb 搭建一个简易网站(二)的更多相关文章

  1. express + mongodb 搭建一个简易网站 （四）

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

  2. express + mongodb 搭建一个简易网站 （三）

    express + mongodb 搭建一个简易网站 (三) 前面已经实现了基本的网站功能,现在我们就开始开搞一个完整的网站,现在整个网站的UI就是下面的这个样子. 我们网站的样子就照着这个来吧. 1 ...

  3. express + mongodb 搭建一个简易网站(一)

    express + mongodb 搭建一个简易网站(一) 前言:后台使用node.js的express框架,数据库使用mongodb,模板使用ejs.大概就这些. 开始第一个简易网站之旅吧.... ...

  4. express + mongodb 搭建一个简易网站 （五）

    前面已经将导航中的“所有宝贝”页面连上了mongodb,现在我们就把其他的页面脸上数据库,将整个网站全部实现. 打开routes文件,找到jacket.js,将里面的代码修改如下: var expre ...

  5. 从无到有，用Nodejs+express+mongodb搭建简易登陆系统

    前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说 ...

  6. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  7. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  8. nodejs实战《一起学 Node.js》 使用 Express + MongoDB 搭建多人博客

    GitHub: https://github.com/nswbmw/N-blog N-blog 使用 Express + MongoDB 搭建多人博客 开发环境 Node.js: 6.9.1 Mong ...

  9. 搭建一个wordpress网站需要做哪些工作

    今天做了自己的个人网站:二飞日志 之前因为服务器的问题,因为备案的原因辛辛苦苦做的站点数据没了.还好的是没有多少数据.没关系,重新来.有了上一次的经验,这次搭建起来比较顺手.但是也出现了几个问题.下面 ...

随机推荐

  1. linux vnc 安装

    http://blog.csdn.net/mchdba/article/details/49306383

  2. 大数据挖掘算法篇之K-Means实例

    一.引言 K-Means算法是聚类算法中,应用最为广泛的一种.本文基于欧几里得距离公式:d = sqrt((x1-x2)^+(y1-y2)^)计算二维向量间的距离,作为聚类划分的依据,输入数据为二维数 ...

  3. BEGIN-4_蓝桥杯_Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-+Fn-,其中F1=F2=. 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n. 输 ...

  4. 接口测试3-2csv格式

    csv文件数据 IntellJ IDEA打开终端:view-tool windows-terminal,可以在终端中查看文件路径 阿里 马云 京东 刘强东 京东 马化腾 #java //读取csv文件 ...

  5. (转)Win7 64位系统下 Retional rose 2003 安装及破解

    网上关于Retional rose 2003安装和破解的文章比较多,这里,我结合自己的亲身体验,和大家分享一下win7 旗舰版 64位系统下Retional rose 2003(下面简称rose200 ...

  6. 取得 Ajax 返回参数

    ajax 函数,p1 为正常参数 function ExecWebFunction(callback,p1) { $.ajax({ type: "POST", contentTyp ...

  7. 图片尺寸批量resize的matlab并行代码

    在caffe ImageNet例子中有对图片进行resize的部分,文中使用的是linux shell脚本命令: for name in /path/to/imagenet/val/*.JPEG; d ...

  8. 第14章 UDP编程（3）_利用UDP实现广播功能

    3. 广播的介绍 (1)广播 ①广播实现一对多的通信,如QQ群 ②它通过向广播地址发送数据报文实现的 (2)SO_BROADCAST选项 ①SO_BROADCAST选项控制着UDP套接字是否能发送广播 ...

  9. NVMe on RHEL7

    原文地址https://www.dell.com/support/article/cn/zh/cnbsd1/sln312382/nvme-on-rhel7?lang=en Posted on beha ...

  10. servlet练习1

    1. 编写一个Servlet,当用户请求该Servlet时,显示用户于几点几分从哪个IP(Internet Protocol)地址连线至服务器,以及发出的查询字符串(Query String).查询一 ...