mui结合tomdJS实现前后端数据分离以及数据的渲染

拼搏的小浣熊

已于 2023-06-15 15:38:55 修改

阅读量586

点赞数 1

分类专栏：笔记文章标签： javascript 开发语言 ecmascript

于 2019-12-17 15:23:31 首次发布

本文链接：https://blog.csdn.net/qq_44891434/article/details/103580744

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

mui结合tomdJS实现前后端数据分离以及数据的渲染

下载安装nodeJS
安装tmodJS
npm install -g tmodjs
后端就口地址
http://39.96.31.43:3000/books
创建 template文件夹，下一级目录在创建build文件夹，
根目录下创建 index.html
template下创建header.html
CMD 执行tmod
- bulid下会生成template.js
- 在template下会生成package.json文件
目录：

index.js下的代码

 </head>

 <body>
     <!-- 头部-start -->
     <div id="headerDIV"></div>
     <!-- 头部-end -->
     <!-- header.html 编译后的 template.js -->
     <script src="js/mui.min.js"></script>
     <script type="text/javascript" src="./template/build/template.js"></script>
 	<script>
 		 mui.init();
 		 var headerDIV = document.getElementById('headerDIV');
 		 mui.plusReady(function(){
 		 	mui.get('http://39.96.31.43:3000/books',{category:'news'},function(success){
 		 			var data ={menu1:success[0].id,menu2:success[1].id,menu3:success[2].id};
 					var headerHTML = template('header',data); 
 						console.log(headerHTML)
 						headerDIV.innerHTML = headerHTML;
 				},'json'
 			);
 		 })
 	</script>

 </body>

如果报…is null,解决方法，调整script标签中的所有东西放在body中就可以解决

header.html下的代码：

	<ul>
<!--通过artTemplate引擎{{}}语法解析，-->
    <li>{{menu1}}</li>
    <li>{{menu2}}</li>
    <li>{{menu3}}</li>
</ul>

渲染结果
tmod运行结果

拼搏的小浣熊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录