文档章节

express + handlebars 学习遇到的小坑

p
 pengqinmm
发布于 2016/06/15 18:20
字数 809
阅读 71
收藏 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
92
0
把手模块编译器--Locator-Handlebars

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

大胖森
2015/05/05
147
0
Express新手入坑笔记之动态渲染HTML

在日常项目中,我喜欢用Django做后端, 因为大而全 如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,...

木子昭
2018/12/12
0
0
Express新手入坑笔记之Handlebars模板继承

续Express新手入坑笔记之动态渲染HTML,上一篇只是初步实现了html的动态渲染,但不够灵活, 如果写一个动态网站, 会遇到大量模板复用的场景, 为每个url写一个单独的html文件是非常耗时耗力的, 而...

木子昭
2018/12/13
0
0
express-secure-handlebars

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

孔小菜
2015/05/07
506
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在改造 公羊阅读🐏 Taro 版本适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 client_mobile_taro...

dkvirus
今天
4
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部