漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示

简介: 漏刻有时数据可视化大屏核心框架模版更换前端模版操作(1)HTML文件分离及访问显示

准备步骤:

1、完成核心框架的安装;

2、准备前端HTML模版

(1)文件目录



(2)大屏效果



开始更换大屏:

1、index.html文件重命名为demo.html,并复制到dashboard/view/demo.html;

2、static目录下新建demo文件夹,并将模版css、images、js复制到static/demo/目录下;



已选择区域为新增模版的路径位置;

3、dashboard\controller\Index.php创建访问demo.html的方法;



  function demo()
  {
    global $CONF;
    $tpl      = new Smarty;
    $pagestpl = './' . DASH_BOARD . '/view/demo.html';
    if (!$tpl->isCached($pagestpl)) {
      $tpl->assign('title', $CONF['sys_name']);
      $tpl->assign('STATIC', 'static/demo/');
    }
    $tpl->display($pagestpl);
  }

      1、$pagestpl = ‘./’ . DASH_BOARD . ‘/view/demo.html’ 大屏前端文件路径                       为/view/demo.html

      2、$tpl->assign(‘STATIC’, ‘static/demo/’); 前端文件的css、js、images路径为static/demo/

4、修改dashboard\view\demo.html文件中静态文件中的路径为3种的赋值路径;


20191207155537340.png

    <meta charset="utf-8">
    <title>大数据统计展示大屏</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <link href="css/index.css" rel="stylesheet" />

修改为

  <head>
    <meta charset="utf-8">
    <title>{$title}</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="{$STATIC}css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="{$STATIC}js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="{$STATIC}js/bootstrap.min.js"></script>
    <link href="{$STATIC}css/index.css" rel="stylesheet" />
  </head>
  <body>
    <header>{$title}</header>



保存文件,关闭即可。

**访问:**http:/你的域名/index.php?m=Index&a=demo,即可实现前端静态文件的更换

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
12天前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
28 4
|
25天前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
48 2
|
14天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
23 0
|
3月前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
38 1
|
3月前
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
47 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
27 0
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
28 6