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. R(5): sql 数据处理

    sqldf程序包是R语言中实用的数据管理辅助工具,但最新版本的包在处理中文时出现乱码,待解决 Usage:  sqldf(x, stringsAsFactors = FALSE,  row.names ...

  2. bootstrap+font-awesome表单

    bootstrap+font-awesome表单 <form action="" class="form-horizontal col-sm-offset-4&qu ...

  3. windows平台安装配置Gitblit

    1 安装配置jdk环境变量 2下载GitBlit,下载地址:http://www.gitblit.com或者http://gitblit.com  解压即可 3修改gitblit\data下defau ...

  4. canvas基础之变换

    2D绘制上下文支持各种基本的绘制变换: rotate(angle):围绕原点旋转图像angle弧度.(举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180.) scale(scaleX ...

  5. TMOD

    1. • tag/itemlist {{Syntax Error}} Debug info: Unexpected token else Waiting... Debug info: node D:/ ...

  6. Python 天气预报+微信

    """ Description: 需要提供以下三个信息,在申请到的微信企业号当中可以找到 agentid corpid corpsecret Author:Nod Dat ...

  7. ESXI 5.5加载 zabbix OVF 3.2.6操作

    如果是虚拟机安装ZABBIX,ZABBIX的前台WEB时间,是由虚拟机的BIOS时间决定的. 一. 1.去官方下载vmdk磁盘镜像 链接地址为https://sourceforge.net/proje ...

  8. php 编程笔记分享

    php获取POST数据的三种方法php 图片加水印源代码php+ajax+json的一个最简单实例php 汉字转拼音源码php遍历目录,生成目录下每个文件的md5值并写入到结果文件中php实现linu ...

  9. 伯克利推出「看视频学动作」的AI智能体

    伯克利曾经提出 DeepMimic框架,让智能体模仿参考动作片段来学习高难度技能.但这些参考片段都是经过动作捕捉合成的高度结构化数据,数据本身的获取需要很高的成本.而近日,他们又更进一步,提出了可以直 ...

  10. SQL SERVER回滚恢复误操作的数据

    在生产数据库做CURD操作时,可能会有执行某条语句误操作的情况发生,针对这个种情况有两点建议: 1. 在SQL SERVER上开启事务确认功能,当执行完语句后确认无误,再提交事务.(开启方法见附件图片 ...