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

相关文章
|
存储 Cloud Native 编译器
MSVC编译器的选择说明
MSVC编译器的选择说明
|
7月前
|
JSON 前端开发 JavaScript
借助 CodeBuddy,我见证了一款在线代码格式化神器的诞生
借助 CodeBuddy,我见证了一款在线代码格式化神器的诞生
192 13
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
795 3
|
JSON 搜索推荐 C++
vscode如何更改背景颜色主题,黑色或白色?
【11月更文挑战第16天】在 VS Code 中更改背景颜色主题,可通过三种方式实现:1) 使用快捷键 Ctrl+K 和 Ctrl+T(Mac 上为 Command+K 和 Command+T)选择主题;2) 通过菜单中的“管理”-&gt;“颜色主题”选项选择;3) 修改 settings.json 文件中的 &quot;workbench.colorTheme&quot; 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
24852 6
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
3060 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
1628 4
|
Web App开发 IDE 测试技术
自动化测试的利器:Selenium 框架深度解析
【10月更文挑战第2天】在软件开发的海洋中,自动化测试犹如一艘救生艇,让质量保证的过程更加高效与精准。本文将深入探索Selenium这一强大的自动化测试框架,从其架构到实际应用,带领读者领略自动化测试的魅力和力量。通过直观的示例和清晰的步骤,我们将一起学习如何利用Selenium来提升软件测试的效率和覆盖率。
|
Web App开发 缓存 搜索推荐
实用的Chrome浏览器命令
【5月更文挑战第6天】探索Chrome的隐藏命令行工具,提升浏览效率和解决问题。如`chrome://flags/`启用实验性功能,`chrome://net-internals/`进行网络诊断,`chrome://settings/content/`管理内容设置等。了解这些工具,可解决浏览器问题,优化隐私和性能,实现个性化设置。成为Chrome专家,让浏览体验更上一层楼。
561 0
|
NoSQL 数据处理 调度
【Redis技术专区】「原理分析」探讨Redis6.0为何需要启用多线程
在Redis 6.0版本中,引入了多线程技术,这是为了进一步提高Redis的性能和并发处理能力。通过启用多线程,Redis能够同时处理多个客户端请求,有效地利用多核处理器资源,提高系统的吞吐量和响应速度。
687 1
【Redis技术专区】「原理分析」探讨Redis6.0为何需要启用多线程
|
SQL 消息中间件 Apache
Flink报错问题之使用hive udf函数报错如何解决
Apache Flink是由Apache软件基金会开发的开源流处理框架,其核心是用Java和Scala编写的分布式流数据流引擎。本合集提供有关Apache Flink相关技术、使用技巧和最佳实践的资源。