nodejs实战案例(Express框架+mongoDB)之4:路由配置,ejs引擎

上一节详细的分析了路由原理,和摸版,现在我们把整个网站的骨架建立起来:

这里我们需要用到前端的bootstrap,jquery请大家下载

下载好以后将js,css和图片放置到public文件中,public里面是放置静态文件的

 

修改routes中的index.js文件,我们将整个路由配置放置在这个文件中:

get表示请求数据,post是发送数据

module.exports = function(app){

//http://localhost:3000/ 请求地址

app.get(‘/’,function(req,res){

});

//http://localhost:3000/loginout  登出请求地址

app.get(‘/loginout’,function(req,res){

});

//发送登陆信息接受地址http://localhost:3000/login

app.post(‘/login’,function(req,res){

});

//发送注册信息接受地址http://localhost:3000/reg

app.post(‘/reg’,function(req,res){

});

//http://localhost:3000/show  网站登陆后内容展示页

app.get(‘/show’,function(req,res){

});

//ajax异步的get请求获取地址http://localhost:3000/getQuestion

app.get(‘/getQuestion’,function(req,res){

});

//http://localhost:3000/people/tang  tang这个用户的展示页面

app.get(‘/people/:user’,function(req,res){

});

//发生编辑和修改个人信息的请求地址http://localhost:3000/people

app.post(‘/people’,function(req,res){

});

//http://localhost:3000/question/1 具体问题展示页

app.get(‘/question/:id’,function(req,res){

});

//http://localhost:3000/error 404和错误页面展示地址

app.get(‘/error’,function(req,res){

});

//ajax异步提问发生问题地址http://localhost:3000/ask

app.post(‘/ask’,function(req,res){

});

//ajax异步回答问题地址http://localhost:3000/answer

app.post(‘/answer’,function(req,res){

});

//百度百科爬虫获取地址

app.get(‘/baike’,function(req,res){

});

 

//后台管理

app.get(‘/admin’,function(req,res){

});

//管理员登陆发送信息地址

app.post(‘/adminLogin’,function(req,res){

});

//信息管理页面地址

app.get(‘/admincon’,function(req,res){

});

//发生修改信息地址

app.post(‘/adminchange’,function(req,res){

});

};
打开views文件,删掉index.ejs 文件下面是试用下ejs这个摸版引擎尝试下效果:直接用上面代码覆盖之前的index.js

ps:这里扩展一个知识点,关于模板后缀名,如果不习惯ejs这种写法,是可以修改为html这种但是使用ejs模板引擎的。

下面引用中文api解释

—————————————————-

app.engine(ext, callback)

注册模板引擎的 callback 用来处理ext扩展名的文件 默认情况下, 根据文件扩展名require() 对应的模板引擎。 比如你想渲染一个 “foo.jade” 文件,Express会在内部执行下面的代码,然后会缓存require(),这样就可以提高后面操作的性能

app.engine('jade', require('jade').__express);

那些没有提供 .__express 的或者你想渲染一个文件的扩展名与模板引擎默认的不一致的时候,也可以用这个方法。 比如你想用EJS模板引擎来处理 “.html” 后缀的文件:

app.engine('html', require('ejs').renderFile);

这个例子中EJS提供了一个.renderFile() 方法和Express预期的格式: (path, options, callback)一致, 可以在内部给这个方法取一个别名ejs.__express,这样你就可以使用”.ejs” 扩展而不需要做任何改动

有些模板引擎没有遵循这种转换, 这里有一个小项目consolidate.js 专门把所有的node流行的模板引擎进行了包装,这样它们在Express内部看起来就一样了。

var engines = require('consolidate');
app.engine('haml', engines.haml);
app.engine('html', engines.hogan);

—————————————————-

具体操作:下面为实验,做完后请修改回原来内容

在app.js 文件里面,我们找到

app.set(‘views’, __dirname + ‘/views’);

app.set(‘view engine’, ‘ejs’);

1. 在后面添加app.engine(‘html’, require(‘ejs’).renderFile);

2. 将views下面文件都修改为html后缀名,

3. 将index.html内容的头和尾修改为<%- include header.html %><%- include footer.html %>

4. 将routes/index.js内容

res.render(‘index.html’, {

title:”知道”,

name:”问答平台”

});

修改蓝色部分。

好了重新打开页面,这样html后缀文件就能使用了

我们这个例子中不这样使用,请返回修改。

下面继续,我们在views中新建3个文件:

header.ejs 公共头文件

footer.ejs 公共尾文件

index.ejs 登陆注册页

header.ejs文件内容:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″ />

<title>know</title>

<base href=”http://localhost:3000/” />

<link rel=”stylesheet” href=”stylesheets/style.css”>

<link rel=”stylesheet” href=”stylesheets/bootstrap.min.css”>

<script type=”text/javascript” src=”javascripts/jquery-1.8.0.min.js”></script>

<script type=”text/javascript” src=”javascripts/bootstrap.min.js”></script>

<script type=”text/javascript” src=”javascripts/underscore.js”></script>

</head>

<body>

<div class=”navbar navbar-inverse navbar-fixed-top”>

<div class=”navbar-inner”>

<div class=”container”>

<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

<span class=”icon-bar”></span>

</button>

<a class=”brand” href=”#”>nodejs</a>

<div class=”nav-collapse collapse”>

<ul class=”nav”>

<li><a href=”/”>首页</a></li>

<li><a href=”/show”>信息广场</a></li>

<li><a href=”/people”>个人主页</a></li>

<li><a href=”#myModal” data-toggle=”modal”>提问</a></li>

<li class=”dropdown”>

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>小工具<b class=”caret”></b></a>

<ul class=”dropdown-menu”>

<li><a href=”/baike”>百度百科</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>
然后是footer.ejs内容:上面都是静态页面,直接复制上面代码到header.ejs即可

</body>

</html>

首页index.ejs登陆内容:

<%- include header %>

<div class=”container”>

<div class=”row hero-unit”>

<div class=”span4″>

<h1>1</h1>

<p>2</p>

</div>

<div class=”span3 offset3″>

<form id=”login” action=”/login” method=”post”>

<fieldset>

<div class=”row-fluid”>

<div class=”span3″>登陆</div>

<div class=”span5 offset4″ id=”changeReg” style=”cursor:pointer”>切换注册</div>

</div>

<input type=”text” placeholder=”用户名” name=”name”>

<input type=”password” name=”password” placeholder=”密码”>

<button type=”submit” class=”btn”>登陆</button>

 

</fieldset>

</form>

<form id=”reg” action=”/reg” method=”post”>

<fieldset>

<div class=”row-fluid”>

<div class=”span3″>注册</div>

<div class=”span5 offset4″ id=”changeLog” style=”cursor:pointer”>切换登陆</div>

</div>

<input type=”text” placeholder=”用户名” name=”name”>

<input type=”password” name=”password” placeholder=”密码”>

<input type=”password” name=”repassword” placeholder=”确定密码”>

<button type=”submit” class=”btn”>注册</button>

</fieldset>

</form>

</div>

</div>

<hr>

<footer>

</footer>

</div>

<script>

$(“#login”).hide();

$(“#changeReg”).on(“click”,function(){

$(“#login”).hide();

$(“#reg”).show();

});

$(“#changeLog”).on(“click”,function(){

$(“#login”).show();

$(“#reg”).hide();

});

</script>

<%- include footer %>
里面加入了简单的js切换效果
最顶端的和低端引入了公共的头和尾。

下面我们像查看下效果:

修改index.js路由:

app.get(‘/’,function(req,res){

});

为:

app.get(‘/’,function(req,res){

res.render(‘index’);

});

 

能看到下面页面内容:

现在我们希望有有node控制内容,而不都是静态内容,

继续修改

app.get(‘/’,function(req,res){

//当页面访问http://localhost:3000/时,路由导向index.ejs

res.render(‘index’);

});

为:

app.get(‘/’,function(req,res){

res.render(‘index’, {

title:”知道”,

name:”问答平台”

});

});

引用下res.render的api

——————————————————————–

res.render(view, [locals], callback)

渲染view, 同时向callback 传入渲染后的字符串。 callback如果不传的话,直接会把渲染后的字符串输出至请求方, 一般如果不需要再对渲染后的模板作操作,就不需要传callback。 当有错误发生时next(err)会被执行. 如果提供了callback参数,可能发生的错误和渲染的字符串都会被当作参数传入, 并且没有默认响应。

res.render('index', function(err, html){
  // ...
});
res.render('user', { name: 'Tobi' }, function(err, html){// ... });

——————————————————————–

引用下res.redirect的api

——————————————————————–

res.redirect([status], url)

使用可选的状态码跳转到url 状态码status默认为302 “Found”.

res.redirect('/foo/bar');
res.redirect('http://example.com');res.redirect(301, 'http://example.com');res.redirect('../login');

Express支持几种跳转,第一种便是使用一个完整的URI跳转到一个完全不同的网站。

res.redirect('http://google.com');

第二种是相对根域路径跳转,比如你现在在 http://example.com/admin/post/new, 下面的的代码跳转到 /admin 将会把你带到http://example.com/admin:

res.redirect('/admin');

这是一种相对于应用程序挂载点的跳转。 比如把一个blog程序挂在 /blog, 事实上它无法知道它被挂载,所以当你使用跳转 /admin/post/new 时,将到跳到http://example.com/admin/post/new, 下面的相对于挂载点的跳转会把你带到http://example.com/blog/admin/post/new:

res.redirect('admin/post/new');

路径名.跳转同样也是支持的。 比如你在http://example.com/admin/post/new, 下面的跳转会把你带到 http//example.com/admin/post:

res.redirect('..');

最后也是最特别的跳转是 back 跳转, 它会把你带回Referer(也有可能是Referrer)的地址 当Referer丢失的时候默认为 /

res.redirect('back');

——————————————————————–

将views中的index.ejs

<div class=”span4″>

<h1>1</h1>

<p>2</p>

</div>

为:

<div class=”span4″>

<h1><%= title%></h1>

<p><%= name%></p>

</div>

建议大家在index中多尝试下添加其他内容,练练手,下一节准备开始注册功能。

 

未经允许不得转载:前端撸码笔记 » nodejs实战案例(Express框架+mongoDB)之4:路由配置,ejs引擎

上一篇:

下一篇: