热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于express与ejs的那点儿事

一、片段试图有时候从数据库读取一堆数据,要展现到前台,由于展示前不可能清楚有多少个数据项,不可能在前台预先写足够行数的表格,因此肯定是通过动态生成的。express3.0使用所谓“片段视
一、片段试图 有时候从数据库读取一堆数据,要展现到前台,由于展示前不可能清楚有多少个数据项,不可能在前台预先写足够行数的表格,因此肯定是通过动态生成的。express3.0使用所谓“片段视图”完成上述功能。 1、安装插件 npm install express-partial
2、在express中配置加入: var partials = require('express-partials');
3、在app.set('view engine', 'ejs');语句下面添加: app.use(partials());
便可以使用片段视图了。首先是后台js文件:  var items = [   {username : 'a', role : 'admin'},   {username : 'b', role : 'admin'},   {username : 'c', role : 'guest'},   {username : 'd', role : 'guest'},  ];  res.render('account', {items : items}); 给到前台页面account.ejs,前台页面的表格部分:                               <%- partial('accountItem', items)%>
用户名 权限角色

然后在新建accountItem.ejs,内容为:
<%= accountItem.username %>
<%= accountItem.role %>

启动服务器,就能查看结果。

二、前台模版变量赋值的问题 如果后台没有把前台模版的变量赋值,那么前台直接使用会报错,例如: 后台a.js文件有一句: res.render('a',{title : 'express'});
在a.ejs中,有这么一句:

<%= data %>


那么会报错,因为后台没有送data这个值。解决的办法是在输出这个值之前做判断,需要这么写: <% if(locals['data']){ %>        

<%= data %>

<% } %> 这样如果data没赋值,那么不输出,当然该条件判断也可以添加else,当data没赋值时输出别的东西。
当出现以下情况: 后台a.js文件有这两句:var book = {author : 'tom', title : 'abc'};res.render('a',{book : book});
前台ejs如何判断author是否为tom呢?应该这么写: <% if(locals.book.author == 'tom'){ %>       

abc

<% } %>
但是不能通过locals.book.author判断后台是否有对author赋值,要用locals['book']['author']来判断,locals.book同样不能判断后台是否有对book赋值。

三、插入其他ejs页面有时候页面内容非常多,我们希望前台也跟后台一样模块化,例如某个网站的导航条,某些弹出的模态框,我们希望通过把它们这些小‘页面’独立出来,不仅使主页面代码没那么臃肿,而且模块化也便于管理,我们可以利用ejs的include指令,如下:<% include myNav.ejs %>
这句插入一个名为myNav.ejs的文件,在我的项目中这个文件是用于显示导航条的。这样这个控制导航条的ejs就可以插入到其他需要的页面中,而且需要修改导航条的时候修改这个ejs文件就可以了,很方便。

推荐阅读
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 第8章 使用外部和内部链接
    8.1使用web地址LearnAboutafricanelephants. ... [详细]
  • 基于PgpoolII的PostgreSQL集群安装与配置教程
    本文介绍了基于PgpoolII的PostgreSQL集群的安装与配置教程。Pgpool-II是一个位于PostgreSQL服务器和PostgreSQL数据库客户端之间的中间件,提供了连接池、复制、负载均衡、缓存、看门狗、限制链接等功能,可以用于搭建高可用的PostgreSQL集群。文章详细介绍了通过yum安装Pgpool-II的步骤,并提供了相关的官方参考地址。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文介绍了在Hibernate配置lazy=false时无法加载数据的问题,通过采用OpenSessionInView模式和修改数据库服务器版本解决了该问题。详细描述了问题的出现和解决过程,包括运行环境和数据库的配置信息。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文详细介绍了如何创建和使用VUE uni-app开发环境,包括通过HBuilderX可视化界面和通过vue-cli命令执行的方法。文章内容简单清晰,易于学习与理解。通过学习本文,读者可以深入了解VUE uni-app开发环境,并通过实践验证掌握具体的使用情况。编程笔记将为读者推送更多相关知识点的文章,欢迎关注! ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
author-avatar
手机用户2602918323
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有