热门关键字:
jquery > jquery教程 > jquery教程 > 实现如同jsp标签的HTML模板

实现如同jsp标签的HTML模板

294
作者:管理员
发布时间:2021/3/16 14:44:51
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4229
  今天,我们要实现的就是类似jsp这样的html模板文件(当然,远没有jsp那般强大)。首先,得先介绍一下JSON(JavaScript Object Notation)


  JSON是一种轻量级的数据交换格式,可用来替代xml成为服务端和客户端之间数据交换格式。程序解析起JSON数据来也非常快。下面是JSON的语法和一段示例:


  数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组


  示例:


  从语法和示例我们可以看出:JSON具有两种结构,对象(使用{})和数组(使用[])


  JSON基于JavaScript标准的一个子集,所以基于JavaScript的Node.js使用起JSON来是得天独厚。


  项目依旧是延续着上一篇的TestFrame,但不会很涉及,主要是讲讲实现方法


  首先,我们先来确定一下等会要显示的数据。和以前一样,今天的也是显示唐诗,JSON数据如下:


  只为示例,所以只有两首。


  下面就是创建一个html的唐诗模板:


  现有文件目录结构如下:


  红色方框里就是新添加的文件和文件夹。


  在有了模板以后,我们就要根据数据和模板来创建新的html,然后将此html文件返回给客户端,下面是render这个渲染函数(我们将其做成一个模块):


  render.js


  render函数参数说明:


  res : response,用于响应客户端,此参数将传给response模块


  filePath : html模板的路径


  dataSource : JSON文件的数据源


  target : 唐诗的名字(如chunxiao)


  在这里,还用到了一个response模块,这是为了尽量不去改以前的代码,所以为render模块单独写了一个响应模块,代码如下:


  response.js


  在这里要修改一下Luyou.js


  首先是在文件开头加上:


  然后是Http服务器文件路由函数的修改,


  客户端查询唐诗的路径有两条:


  然后在/tangshi路径里会对url进行处理,提取出诗名后进行render处理,至于req.url.indexOf(“。”)<=0是为了防止静态css文件也在这条路由路径处理。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐