JS使用模板化快速填充HTML数据进行项目开发

qq_37825730 2017-07-10 03:31:33

经理要求我们几个员工一起研究如何使用模板进行web开发，他向我们展示了些例子，均是使用同一页面模板，模板没有写死在<body>里，写在叫一个<script type="text/template"> 的标签里，然后根据接收的数据填充进模板，动态生成页面。经理让我们自己去网上找相关资料，根据自己理解试着做，我找了很多例子，但是都说不清楚，或者我不怎么看得懂，求助：能否有哪位好心的大神给个简单的例子，或者说些通俗些的话让我好理解些，在此拜谢！

...全文

662 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_37825730 2017-07-12

打赏
举报

引用 7 楼 qq_29594393 的回复:

Java web 工程,前后端分离的,在webapp 目录下面导入静态文件(css,html,js) vue 是不需要安装,所谓的导入,只是复制粘贴到你的工程,然后按路径引用. 这个和在前端开发,没有任何不同

非常感谢您的回答，言下之意，vue是可以用在javaweb工程的，如同用标签<script src="js/vue.js"></script>导入，只是我没弄对是么？请再允许我厚脸皮地问一句，vue提供的标签是在body里直接用是无法识别的，难道是vue标签只能作用在<script type="text/template">下的标签，不知大神您你能否读懂我的描述，我是新手，虚心求教！以下是我想实现的功能，大概意思是，我想在<script type="text/template">里写好模板，然后接收到数据后插入模板，最后添加到body里，其实也是我在网上找到的方法，请您指出我的错误，我该怎么结合vue.js实现这个功能

<body>

	<div>
		<label>姓名：</label> <input type="text" placeholder="请输入姓名"
			v-model="name">
	</div>
	<!-- Javascript -->
	<script src="js/jquery-1.8.2.min.js"></script>
	<script src="js/vue.js"></script>
</body>

<script type="text/template">  
    <tr mgid="{mgid}" mid="{mid}">  
        <td>  
            <input type="checkbox" mid="{mid}"></td>  
        <td>  
            <a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons">  
                <img src="{localfile}" style="width:45px;height:45px;"></a>  
        </td>  
        <td>  
            <input type="text" class="input-large valid" value="{medianame}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}" readonly="readonly"></td>  
        <td>{mediatype}</td>  
        <td>  
            <a onclick="updateMediaName(this)" href="javascript:void(0);">重命名</a>  
            <a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>  
            <a onclick="daleteMedia(this)" href="javascript:void(0);">删除</a>  
            <a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>  
        </td>  
    </tr>  
</script>

<script type="text/javascript">
	function formatTemplate(dta, tmpl) {
		var format = {
			name : function(x) {
				return x;
			}
		};
		return tmpl.replace(/{(\w+)}/g, function(m1, m2) {
			if (!m2)
				return "";
			return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
		});
	}

	$(document).ready(function() {
		var dta = {
			"total" : "1",
			"page" : "1",
			"records" : "3",
			"rows" : [ {
				"groupname" : "美食图片",
				"mid" : 4766,
				"sid" : 517,
				"medianame" : "哈哈哈",
				"mgid" : 549,
				"mediatype" : "哈哈哈",
				"mediaid" : "",
				"timestamp" : "",
				"localfile" : "/UploadFile/image/201409/14/0x6dvf.jpg",
				"picurl" : "",
				"thumbid" : "",
				"voiceformat" : "",
				"state" : 1,
				"createtime" : "\/Date(1410673220000+0800)\/",
				"uploadtime" : "\/Date(1410673220000+0800)\/",
				"width" : 480,
				"height" : 360,
				"seizespace" : 17.41
			} ]
		};

		//获取模板上的HTML  
		var html = $('script[type="text/template"]').html();
		//定义一个数组，用来接收格式化合的数据  
		var arr = [];
		//对数据进行遍历  
		$.each(dta.rows, function(i, o) {
			//这里取到o就是上面rows数组中的值, formatTemplate是最开始定义的方法.  
			arr.push(formatTemplate(o, html));
		});
		//好了，最后把数组化成字符串，并添加到table中去。  
		$('#tableData').append(arr.join(''));
		
	});
</script>

当作看不见 2017-07-12

打赏
举报

我想下面这个应该对你有些帮助 https://cn.vuejs.org/v2/guide/ vue 不需要在js 里面设置模板,整个body里面的HTML都是vue的模板,而js 里面,vue 只设定数据和方法. 只需要化几十分钟的时间看一下vue的基础教程,我想你很快就能体会到它的妙处

当作看不见 2017-07-11

打赏
举报

Java web 工程,前后端分离的,在webapp 目录下面导入静态文件(css,html,js) vue 是不需要安装,所谓的导入,只是复制粘贴到你的工程,然后按路径引用. 这个和在前端开发,没有任何不同

qq_37825730 2017-07-11

打赏
举报

引用 3 楼 qq_29594393 的回复:

模板有前端的,现在前端的数据绑定可以使用vue,angular,react 后端渲染,像jsp ,asp 等都是的,也有类似于jade 一类的模板模板就是把页面布局等都填充好,就是数据不一致,-- > 例如个人信息页面,每个人都是不一样的,但是不可能给每个人一个做页面,所以填好一个个人信息模板就够了,获取个人得数据,填入就为每个人展示了不同的个人信息页

我看了一下vue.js，大概了解了它的用法。但是，请问一下，我如何将vue.js部署在我的java项目里面，网上未找到这方面说明，难道不能用在javaweb里面吗，以我的理解我觉得是可以的啊

Hello World, 2017-07-10

打赏
举报

兼容性比较好的可以考虑knockout.js，示例：http://www.cnblogs.com/TomXu/archive/2011/11/25/2256930.html

NANU-NANA 2017-07-10

打赏
举报

引用 3 楼 qq_29594393 的回复:

模板有前端的,现在前端的数据绑定可以使用vue,angular,react 后端渲染,像jsp ,asp 等都是的,也有类似于jade 一类的模板模板就是把页面布局等都填充好,就是数据不一致,-- > 例如个人信息页面,每个人都是不一样的,但是不可能给每个人一个做页面,所以填好一个个人信息模板就够了,获取个人得数据,填入就为每个人展示了不同的个人信息页

我支持三楼的发言

当作看不见 2017-07-10

打赏
举报

模板有前端的,现在前端的数据绑定可以使用vue,angular,react 后端渲染,像jsp ,asp 等都是的,也有类似于jade 一类的模板模板就是把页面布局等都填充好,就是数据不一致,-- > 例如个人信息页面,每个人都是不一样的,但是不可能给每个人一个做页面,所以填好一个个人信息模板就够了,获取个人得数据,填入就为每个人展示了不同的个人信息页

world_broken 2017-07-10