漏刻有时数据可视化大屏核心框架模版更换前端模版操作(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,即可实现前端静态文件的更换

相关文章
|
1月前
|
人工智能 前端开发 搜索推荐
前端UI框架的发展:从混沌到秩序的演变
前端UI框架的发展:从混沌到秩序的演变
N..
|
1月前
|
前端开发 JavaScript 开发者
HTML框架
HTML框架
N..
15 1
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
43 0
|
23小时前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
1天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
4天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
15 3
|
4天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
13 2
|
4天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
15 1
|
15天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
21 1
|
18天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2