文档章节

express + handlebars 学习遇到的小坑

p
 pengqinmm
发布于 2016/06/15 18:20
字数 809
阅读 52
收藏 0
点赞 0
评论 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
博文 60
码字总数 34464
作品 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。欢迎加入翻译组。 这篇文章编译整理自Stack Overflow的一个如何开始学习Node.js的Wiki帖,这份资源列表在SO上...

伯乐在线
2014/08/11
0
0
Node.js的学习资源、教程和工具

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

90后爱国
2015/07/21
0
0
微信小程序开发中的小坑

微信小程序中开发的小坑 本文随时更新微信小程序开发过程中遇到的小坑。现已收集如下。 微信小程序编译后的大小不能超过1MB。 微信小程序不能建立两个(含)以上的WebStock连接。

冬天之雪
2016/12/22
58
0
前端那些事之node+express+koa学习

《搭建 Node.js 开发环境》 windows 环境 直接从 github clone nvmw 到本地, 这里假设大家都使用 d:git 目录存放 git 项目 设置 d:gitnvmw 目录到你的 PATH 环境变量中: 重新打开你的终端, 输...

上官清偌
2017/10/31
0
0
scaloid开发android

本篇文章被重新写了一遍,基本上一篇文章写完后,过20天后,就发现以前的观点站不住脚了。 scaloid强大的表现力 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"...

lost_o0
2014/06/23
0
3
阿里云 oss web直传node签名

以下是我使用node的进行签名代码,node框架是express。 给大家提供一个参考。 晚安

开源中国最帅没有之一
2016/10/02
54
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
17分钟前
2
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
27分钟前
0
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
54分钟前
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
39
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0
IDEA配置技巧

超详细设置Idea类注释模板和方法注释模板 idea去掉注解param下划线 JetBrains全系列破解

AK灬
今天
0
0
rsync通过服务同步/Linux系统日志/screen工具

rsync通过服务同步 分为服务端(机器A) 和客户端(机器B) 机器A操作编辑/etc/rsyncd.conf配置文件 [root@yolks1 ~]# vim /etc/rsyncd.conf 文件中添加以下配置 port=873 ...

Hi_Yolks
今天
0
0
分发系统介绍expect脚本远程登录expect脚本远程执行命令 expect脚本传递参数

分发系统介绍 分发系统-expect讲解(也就是一个分发的脚本) 场景: 业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因为业...

lyy549745
今天
0
0
android studio 中设置创建类时的说明信息(包含 作者 ,创建时间,注释说明等)

今天简单来说一下android studio开发工具中的 一个小设置功能; 在开发过程中我们习惯给新建的类添加一些注释信息,创建日期、时间和作者等。 设置信息 File—>Settings—>Editor—>File and...

切切歆语
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部