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运行结果

相关文章
|
3月前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
30 0
|
6月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
49 2
|
6月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
6月前
|
存储 JavaScript 数据处理
uniapp获取接口数据并渲染至页面中
uniapp获取接口数据并渲染至页面中
361 0
|
前端开发 JavaScript Java
单页应用 / 多页应用、客户端渲染 / 服务器渲染
单页应用 / 多页应用、客户端渲染 / 服务器渲染
104 0
|
JavaScript
Vue数据渲染技巧:从三种方式看后端数据的灵活处理
Vue数据渲染技巧:从三种方式看后端数据的灵活处理
186 0
|
前端开发 JavaScript
【Render】如何将数据渲染到页面?渲染数据的流程
【Render】如何将数据渲染到页面?渲染数据的流程
184 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
146 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
|
缓存 安全 JavaScript
Yii2.0的视图渲染机制是怎样的?底层原理是什么?
Yii2.0的视图渲染机制是怎样的?底层原理是什么?
|
前端开发
前端工作小结55-正确echart渲染方式
前端工作小结55-正确echart渲染方式
84 0
前端工作小结55-正确echart渲染方式