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. MySQL的Join使用

    在MySQL(以5.1为例)中,表连接的语法可以参见MySQL官方手册:MySQL官方手册-JOIN 在查询中,连接的语法类似 SELECT select_expr FROM table_refere ...

  2. SQL 计算某月有多少天

    今天用SQL Server 2005写查询语句,要求计算一个月平均每天发生的金额.以前往往喜欢查询相关的所有列,在代码中进行计算,还没有在SQL中写过. 第一印象就是:要考虑到润年还是平年,再判断是大 ...

  3. js 正则用空格分割字符串

    var filename = "ASDFK*SADF+ALDLAS-LDKFADFa*seAc tion.java";var arr = filename.split(/\*|\- ...

  4. 通过textarea标签解决ClipboardJS在iphone复制失败问题

    前段时间做了微信自定义分享的功能,分享出的页面存在邀请码在ios手机上复制失败的问题,然而在PC端和安卓机上是没有问题的.百度了一下,基本给出的解决方案是:ios不单纯支持on,为点击的元素添加空点击 ...

  5. [UE4]ue4 c++学习推荐

    我由易到难推荐,不过在此之前还是先看看官方对于VS设置的推荐: https://docs.unrealengine.com/latest/INT/Programming/Development/Vis ...

  6. Spark分析之SparkContext启动过程分析

    SparkContext作为整个Spark的入口,不管是spark.sparkstreaming.spark sql都需要首先创建一个SparkContext对象,然后基于这个SparkContext ...

  7. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  8. 提高solr的搜索速度

    之前是使用12台机分布式搜索,1台为主机做索引并分发给子机,8台做大索引搜索服务,3 台做小索引搜索服务,配置基本是内存在4-8G,cpu:2-8core的服务器,索引的大小为8G.搜索的响应时间 是 ...

  9. JQ树插件 — zTree笔记

    1.zTree作者很贴心的为使用者将不同功能的代码封装成不同的文件,方便大家尽量减少加载的代码量,如果基本全用到,则不必一个个引用,有一个文件“jquery.ztree.all.js”,包含了所有.如 ...

  10. Python - Django - ORM 实例

    准备工作: 首先创建一个名为 Py_Django 的数据库 新建项目,名为 mysite0 创建完成后需要进行几项配置 mysite0/settings.py 下 首先是 html 文件相关 其次是数 ...