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

相关文章
|
6月前
|
JSON 前端开发 JavaScript
借助 CodeBuddy,我见证了一款在线代码格式化神器的诞生
借助 CodeBuddy,我见证了一款在线代码格式化神器的诞生
179 13
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
732 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; 属性。此外,用户还可从扩展市场安装更多主题以满足个性化需求。
24416 6
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
2982 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
1573 4
|
Web App开发 IDE 测试技术
自动化测试的利器:Selenium 框架深度解析
【10月更文挑战第2天】在软件开发的海洋中,自动化测试犹如一艘救生艇,让质量保证的过程更加高效与精准。本文将深入探索Selenium这一强大的自动化测试框架,从其架构到实际应用,带领读者领略自动化测试的魅力和力量。通过直观的示例和清晰的步骤,我们将一起学习如何利用Selenium来提升软件测试的效率和覆盖率。
|
机器学习/深度学习 人工智能 算法
Scaling Law触礁数据墙?Epoch AI发文预测LLM到2028年耗尽所有文本数据
【6月更文挑战第23天】Epoch AI警告,大语言模型(LLM)可能在2026-2032年间面临“数据墙”,因人类生成文本数据耗尽。论文探讨LLM扩展限制,提出合成数据、迁移学习和提高数据效率作为应对策略,但也引发数据隐私和伦理问题。研究敦促平衡模型发展与数据资源管理[[1](https://arxiv.org/abs/2211.04325)]。
342 6
|
机器学习/深度学习 算法 数据可视化
使用Logistic算法从疝气病症预测病马的死亡率
使用Logistic算法从疝气病症预测病马的死亡率
231 1
|
开发者
Markdown:解放排版,简洁高效的文字创作神器!
Markdown 是一种轻量级标记语言,以易读易写著称,常用于生成 HTML 页面。其简洁的语法加速了排版,尤其在写作、博客和文档领域广泛应用。虽然不擅长复杂排版,但能轻松实现字体大小调整、插入表格、图片和超链接等。Markdown 通过键盘快捷操作,避免了 Word 等软件的繁琐设置。本文将深入讲解 Markdown 语法,助你提升效率。Markdown 适合快速学习,兼容各种文本编辑器,支持导出多种格式,广泛应用于 GitHub 和多个在线平台。
489 0
|
Web App开发 缓存 搜索推荐
实用的Chrome浏览器命令
【5月更文挑战第6天】探索Chrome的隐藏命令行工具,提升浏览效率和解决问题。如`chrome://flags/`启用实验性功能,`chrome://net-internals/`进行网络诊断,`chrome://settings/content/`管理内容设置等。了解这些工具,可解决浏览器问题,优化隐私和性能,实现个性化设置。成为Chrome专家,让浏览体验更上一层楼。
536 0