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. 合并Dev BPL教程

    一.准备工具 1.Devexpress vcl 14.2.2 下载地址http://download.csdn.net/user/rfjbco,共用个包,下载后解压,程序目录已带有DxAutoInst ...

  2. php安装ZendGuardLoader扩展问题

     1,安装ZendGuardLoader:wget http://downloads.zend.com/guard/6.0.0/ZendGuardLoader-70429-PHP-5.4-linux- ...

  3. ESXI服务器的四个网口负载均衡

    什么是NIC Team(负载均衡) NIC Team其实就是将多个物理网卡同时分配到相同的端口/端口组,目的是为了实现带宽聚合,负载均衡以及故障转移 配置NIC Team 一.选择一台ESXi主机,打 ...

  4. 【洛谷】P1641 [SCOI2010]生成字符串（思维+组合+逆元）

    题目 传送门:QWQ 分析 不想画图. https://www.luogu.org/problemnew/solution/P1641 好神仙的题啊. 代码 // luogu-judger-enabl ...

  5. php表达式

    表达式是PHP中一个重要的概念,可以把表达式理解为“任何有值的东西”.在本教程中涉及到表达式的语法,我们以“expr”来表示表达式. 下面就是一个表达式: $x > $y; 在上面的例子中,当$ ...

  6. python logging模块使用教程

    简单使用 #!/usr/local/bin/python # -*- coding:utf-8 -*- import logging logging.debug('debug message') lo ...

  7. Pillow 读取图片截断错误

    做图像处理的时候,Pillow是经常使用到的模块. 最近在读取图片的时候出现了一个错误. OSError: image file is truncated (461 bytes not process ...

  8. svn快速安装

    windows版本控制系统. 用VisualSVN server 服务端和 TortoiseSVN客户端搭配使用 软件下载 VisualSVN-Server:http://subversion.apa ...

  9. 本地yum源快速创建

    1.建立挂载目录mkdir /rui 2.挂载iso到新建的/rui目录

  10. hbase 简介

    hbase是hadoop的数据库,能够对大数据提供随机实时的读写访问功能,具有开源,分布式,可扩展行,面向列存储的特点.hbase的目标是存储并处理大量的数据. 它可以直接使用本地文件系统,也可以使用 ...