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. JavaScript模块化-RequireJs实现AMD规范的简单例子

    AMD规范简介 AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行.require.js和curl.js都是实现AMD规范的优秀加 ...

  2. 从云端到边缘 AI推动FPGA应用拓展

    近日,全球最大的FPGA厂商赛灵思宣布收购深鉴科技的消息,引发人工智能芯片行业热议,这也是首起中国AI芯片公司被收购的案例.值得注意的是,收购深鉴科技的赛灵思在2018年下半年重点发展方面是汽车自动驾 ...

  3. java获取随机密码

    import java.util.Random; public class tests { /** * * author LiuQiang * date 2013-10-14 下午01:13:54 * ...

  4. Kibana安装及使用

    1.Kibana介绍Kibana是一个基于浏览器页面的Elasticsearch前端展示工具.Kibana全部使用HTML语言和Javascript编写的. 2.安装配置Kibana下载地址:http ...

  5. Java堆外内存之六：堆外内存溢出问题排查

    一.堆外内存组成 通常JVM的参数我们会配置 -Xms 堆初始内存 -Xmx 堆最大内存 -XX:+UseG1GC/CMS 垃圾回收器 -XX:+DisableExplicitGC 禁止显示GC -X ...

  6. Redis：Redis

    ylbtech-Redis:Redis 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶部 ...

  7. airtest IDE问题汇总

    FAQ 1.同一个脚本,使用IDE可以运行,使用命令行运行报错 原因:曾经开启过anyproxy代理,添加过HTTP_PROXY环境变量,将其取消即可 unset HTTP_PROXY https:/ ...

  8. oracle 用函数返回对象集合

    1.先要声明全局type:并且,字段变量类型要为object,不能为record: (1)CREATE OR REPLACE TYPE "DDD_BY_DEPT_STATISTISC&quo ...

  9. Dividing Infinity - Distributed Partitioning Schemes

    This is the second post in a series discussing the architecture and implementation of massively para ...

  10. Hive基础之Hive体系架构&运行模式&Hive与关系型数据的区别

    Hive架构 1)用户接口: CLI(hive shell):命令行工具:启动方式:hive 或者 hive --service cli ThriftServer:通过Thrift对外提供服务,默认端 ...