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

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

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

  1. 下载安装nodeJS
  2. 安装tmodJS
    npm install -g tmodjs
  3. 后端就口地址
    http://39.96.31.43:3000/books
  4. 创建 template文件夹,下一级目录在创建build文件夹,
  5. 根目录下创建 index.html
  6. template下创建header.html
  7. CMD 执行tmod
  • bulid下会生成template.js
  • 在template下会生成package.json文件
  1. 目录:
  2. 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>
  1. 如果 报…is null,解决方法,调整script标签中的所有东西放在body中就可以解决
  2. header.html下的代码:
<ul>
<!--通过artTemplate引擎{{}}语法解析,-->
    <li>{{menu1}}</li>
    <li>{{menu2}}</li>
    <li>{{menu3}}</li>
</ul>
  1. 渲染结果

  2. tmod运行结果

相关文章
|
5月前
|
小程序 前端开发 JavaScript
微信小程序框架--视图层、逻辑层与页面的生命周期
微信小程序框架--视图层、逻辑层与页面的生命周期
77 0
|
6月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互
103 0
|
8月前
|
JavaScript
Vue数据渲染技巧:从三种方式看后端数据的灵活处理
Vue数据渲染技巧:从三种方式看后端数据的灵活处理
130 0
|
9月前
|
SQL 前端开发 API
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(17):流加载文档layui.flow组件的前后端解决方案
118 0
|
9月前
|
前端开发 JavaScript
【Render】如何将数据渲染到页面?渲染数据的流程
【Render】如何将数据渲染到页面?渲染数据的流程
132 0
Flutter实时动态UI刷新、数据交互
Flutter实时动态UI刷新、数据交互
|
11月前
|
前端开发 数据处理
【React工作记录五十五】子组件的数据无法实时渲染
【React工作记录五十五】子组件的数据无法实时渲染
75 0
|
缓存 JavaScript 前端开发
vue3预渲染和服务端渲染(同构)示例讲解
vue3预渲染和服务端渲染(同构)示例讲解
462 0
vue3预渲染和服务端渲染(同构)示例讲解
|
前端开发
前端工作小结55-正确echart渲染方式
前端工作小结55-正确echart渲染方式
66 0
前端工作小结55-正确echart渲染方式
|
前端开发
前端工作小结39-echart渲染
前端工作小结39-echart渲染
67 0