首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
version
iostream
blob
python3
range
regex
testing
web
controller
copy
php7
int
window
include
ip
audio
md5
uml
timestamp
utf-8
case
random
uri
text
search
sum
httprequest
jar
input
web3
hash
java
buffer
integer
byte
cpython
dagger
php8
foreach
heatmap
dll
chat
hook
grid
hashcode
jsp
main
stream
emoji
bash
request
function
php
io
hashtable
callback
express
hashset
usb
nodejs
object
dockerfile
process
netty
shell
import
bit
spring
httpclient
fetch
metadata
cPlusPlus
scala
expression
c语言
require
get
cookie
数组
当前位置:
开发笔记
>
编程语言
> 正文
关于express与ejs的那点儿事
作者:手机用户2602918323 | 来源:互联网 | 2023-09-10 22:30
一、片段试图有时候从数据库读取一堆数据,要展现到前台,由于展示前不可能清楚有多少个数据项,不可能在前台预先写足够行数的表格,因此肯定是通过动态生成的。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文件就可以了,很方便。
express
nodejs
js
数据库
npm
install
require
view
文件
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
hover
用 nodeimages 打造简易图片服务器
必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ...
[详细]
蜡笔小新 2023-10-17 16:34:14
ip
Node.js学习笔记(一)package.json及cnpm
本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ...
[详细]
蜡笔小新 2023-12-10 18:26:02
sum
第8章 使用外部和内部链接
8.1使用web地址LearnAboutafricanelephants. ...
[详细]
蜡笔小新 2023-10-17 21:55:36
md5
基于PgpoolII的PostgreSQL集群安装与配置教程
本文介绍了基于PgpoolII的PostgreSQL集群的安装与配置教程。Pgpool-II是一个位于PostgreSQL服务器和PostgreSQL数据库客户端之间的中间件,提供了连接池、复制、负载均衡、缓存、看门狗、限制链接等功能,可以用于搭建高可用的PostgreSQL集群。文章详细介绍了通过yum安装Pgpool-II的步骤,并提供了相关的官方参考地址。 ...
[详细]
蜡笔小新 2023-12-14 19:10:25
blob
基于layUI的图片上传前预览功能的2种实现方式
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
sum
HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
[详细]
蜡笔小新 2023-12-14 15:08:18
text
如何限制php数据库链接数和连接超时时间?
本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ...
[详细]
蜡笔小新 2023-12-14 14:06:10
text
Hibernate配置lazy=false时无法加载数据的问题解决方法
本文介绍了在Hibernate配置lazy=false时无法加载数据的问题,通过采用OpenSessionInView模式和修改数据库服务器版本解决了该问题。详细描述了问题的出现和解决过程,包括运行环境和数据库的配置信息。 ...
[详细]
蜡笔小新 2023-12-14 13:59:45
text
后台获取视图对应的字符串
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
text
VUE uni-app开发环境的创建和使用方法详解
本文详细介绍了如何创建和使用VUE uni-app开发环境,包括通过HBuilderX可视化界面和通过vue-cli命令执行的方法。文章内容简单清晰,易于学习与理解。通过学习本文,读者可以深入了解VUE uni-app开发环境,并通过实践验证掌握具体的使用情况。编程笔记将为读者推送更多相关知识点的文章,欢迎关注! ...
[详细]
蜡笔小新 2023-12-11 14:07:38
ip
React 小白初入门
推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ...
[详细]
蜡笔小新 2023-10-17 16:10:45
ip
快速学习RN之环境搭建和跑demo(一)
RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ...
[详细]
蜡笔小新 2023-10-17 15:29:16
utf-8
Node.js开发札记之二·页面篇
前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ...
[详细]
蜡笔小新 2023-10-16 23:59:51
ip
ReactJS UI Ant 设计空组件
ReactJSUIAnt设计空组件原文:https://w ...
[详细]
蜡笔小新 2023-10-16 22:08:13
web
Webpack babel ES6 转ES5
npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ...
[详细]
蜡笔小新 2023-10-16 19:57:15
手机用户2602918323
这个家伙很懒,什么也没留下!
Tags | 热门标签
version
iostream
blob
python3
range
regex
testing
web
controller
copy
php7
int
window
include
ip
audio
md5
uml
timestamp
utf-8
case
random
uri
text
search
sum
httprequest
jar
input
web3
RankList | 热门文章
1
开发笔记:一个线程多次调用一个函数
2
那些广告和联系我们挡住了我的博客
3
开发微信公众号小技巧(微信授权跳转)
4
python 括号内内容_在python中从括号内提取数据
5
设计模式之六大原则
6
C#学习教程:只使用’ifelse’语句的’else’部分是否可以接受?分享
7
jmeter连接数据库:JDBC Connection Configuration
8
.Net Core建站(3):搭建三层架构
9
2017 MultiUniversity Training Contest 3 hdu 6063
10
RegExp 常见四种正则方法
11
用Python手把手教你搭建一个web框架-flask微框架!
12
英语启蒙慢速儿歌第59集(衣服类英语儿歌顺口溜)
13
【软件测试自动化-QTP系列讲座 6】== 利用DotNetFactory调用.NET类库 ==
14
远程管理软件:Royal TSX 5 for Mac激活版
15
基于Springboot纯Controller层代码功能测试
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有