文档章节

express + handlebars 学习遇到的小坑

p
 pengqinmm
发布于 2016/06/15 18:20
字数 809
阅读 64
收藏 0

 

最近想系统学习一下express,所以找来大师的《Node与Express》膜拜,问题不少,记录下来,供大家参考交流:

1  模板渲染上下文的赋值 res.locals

是这么个情况:


模板文件views/partials/weather.hbs

<div class="weatherWidget">
    {{#each partials.weather.locations}}
        <div class="location">
            <h3>{{name}}</h3>
            <a href="{{forecastUrl}}">
                <img src="{{iconUrl}}" alt="{{weather}}"> {{weather}}, {{temp}}
            </a>
        </div>
    {{/each}}
    <small>Source: <a href="http://www.wunderground.com">Weather Underground</a></small>
</div>

应用文件meadowlark.js

/* 给res.locals.partials对象添加数据的中间件 */
app.use(function(req, res, next){
    if(!res.locals.partials) res.locals.partials = {};
    res.locals.partials.weather = getWeatherData();
    next();
});


//获得天气数据
function getWeatherData(){
    return {
        locations:[
            {
                name:'Portland',
                forecastURl:'http://www.wunderground.com/US/OR/Portland.html',
                iconUrl:'http://icons-ak.wxug.com/i/c/k/cloudy.gif',
                weather:'Overcast',
                temp:'54.1.F(12.3 C)'
            },
            {
                name:'Bend',
                forecastURl:'http://www.wunderground.com/US/OR/Bend.html',
                iconUrl:'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',
                weather:'Partly Cloudy',
                temp:'55.0.F(12.8 C)'
            },
            {
                name:'Manzanita',
                forecastURl:'http://www.wunderground.com/US/OR/Manzanita.html',
                iconUrl:'http://icons-ak.wxug.com/i/c/k/rain.gif',
                weather:'Light Rain',
                temp:'55.0.F(12.8 C)'
            }
        ]
    }
}

运行  node meadowlark.js 就会报错

Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed [object Object]

查了一些资料,感觉都是客户端用handlebars没有compile 模板源码才会这样,但我是服务端渲染啊,咋也这样?后来,查看书上的源码,发现有一个单词不一样,源码没有用weather,而是weatherContext,进过测试,除了weather,别的都可以,貌似是和handlebars文件名冲突了,我只能想到这了,虽然还没有找到正确的解释,但问题是找到了

贴出可以运行通过的代码:

views/partials/weather.hbs

/* 给res.locals.partials对象添加数据的中间件 */
app.use(function(req, res, next){
    if(!res.locals.partials) res.locals.partials = {};
    res.locals.partials.weatherContext = getWeatherData();
    next();
});

 

应用文件meadowlark.js 

<div class="weatherWidget">
    {{#each partials.weatherContext.locations}}
        <div class="location">
            <h3>{{name}}</h3>
            <a href="{{forecastUrl}}">
                <img src="{{iconUrl}}" alt="{{weather}}"> {{weather}}, {{temp}}
            </a>
        </div>
    {{/each}}
    <small>Source: <a href="http://www.wunderground.com">Weather Underground</a></small>
</div>

2  post表单的重定向处理

express 4.x的api中 res.redirect([status,] path),默认的status是302,

但302和303(HTTP1.1)还是有区别

来自维基百科:

302 Found:

The HTTP response status code 302 Found is a common way of performing URL redirection.

The HTTP response status code 302 Found is a common way of performing URL redirection.Many web browsers implemented this code in a manner that violated this standard, changing the request type of the new request to GET, regardless of the type employed in the original request (e.g. POST).For this reason, HTTP/1.1 (RFC 2616) added the new status codes 303 and 307 to disambiguate between the two behaviours, with 303 mandating the change of request type to GET, and 307 preserving the request type as originally sent.

也就是说302表示找到了,但如果是post请求,重定向url就会为get,修改了请求类型,这种情况,要用303,表示找到了另一个

所以,如果是post表单,303重定向告诉浏览器:你的请求有效,可以在这里找到响应

3 AJAX表单

处理post请求,最好要区分是AJAX还是一般表单提交,有两个属性可以判断:

req.xhr 和 req.accepts(type) ,前者判断是否是AJAX请求,后者判断HTTP Request 头信息合适的返回类型

这里假定AJAX请求的数据都是json

app.post('/process',(req,res)=>{
    console.log(req.accepts('json,html'));
   if(req.xhr || req.accepts('json,html') === 'json'){
       //如果错误,发送{error:'error message'}
       res.json({success:true})
   }else{
       res.redirect(303,'/thank-you');
   }
});

 

 

参考:

1 http://expressjs.com/en/4x/api.html

2 https://en.wikipedia.org/wiki/HTTP_302

3 https://en.wikipedia.org/wiki/HTTP_303

4 https://github.com/EthanRBrown/web-development-with-node-and-express/blob/master

 

© 著作权归作者所有

共有 人打赏支持
p
粉丝 1
博文 62
码字总数 34998
作品 0
西安
程序员
私信 提问
Node.js模板引擎(Hanldlebars)

Handlebars 是基于jQuery的插件,以json对象为数据源,支持逻辑判断,循环操作等。 60k左右。 采用Logic-less template(无逻辑模板),加载时被预编译,而不是到了客户端执行代码时再去编译...

jedi_knight
2015/10/20
53
0
把手模块编译器--Locator-Handlebars

Locator-Handlebars 是 Yahoo 开发的定位器把手模块编译器。locator-handlebars可插入到要编译把手模版(compile Handlebars templates)的定位组件中。然后编译模版可用于使用 express-view...

大胖森
2015/05/05
109
0
express-secure-handlebars

Express Secure Handlebars 通过提供内容感知 XSS 输出过滤器来增强你的 Web 应用程序的安全性。 示例代码: var express = require('express'),// The only difference is to replace 'exp...

孔小菜
2015/05/07
436
0
Node.js 的 MVC 框架--Sleek.js

Sleek.js 是 MVC 封装器框架,基于 Node.js,依赖于 handlebars.js 和 express.js。

叶秀兰
2014/08/15
592
0
Node.js的学习资源、教程和工具

这篇文章编译整理自Stack Overflow的一个如何开始学习Node.js的Wiki帖,这份资源列表在SO上面浏览接近60万次,数千个收藏和顶。特意整理发布到这里,其中添加了部分中文参考资料。 学习指南和...

90后爱国
2015/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
13分钟前
0
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
14分钟前
0
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
22分钟前
1
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
46分钟前
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部