使用MiniUI完成一个后台管理页面

最新推荐文章于 2024-09-26 14:26:06 发布

coding_xian

最新推荐文章于 2024-09-26 14:26:06 发布

阅读量9.7k

点赞数 5

本文链接：https://blog.csdn.net/Carl_changxin/article/details/82078008

版权

前言:觉得这个不如easyui好，有兴趣可移步：

https://blog.csdn.net/Carl_changxin/article/details/82142181

1、下载：http://www.miniui.com/download/

2、解压

3、打开WebContent目录下的index.html；在其中找自己想要的页面

如：示例---快速入门---典型界面---表格维护；

4、我只需要Demo中的页面代码，但我的Code没有显示，无法复制；

右键查看网页源代码，ctrl+f搜索表格维护，就能找到链接，单击就能访问到需要的页面

下面就是我们需要的页面：右键源代码，复制到自己的html文件中

5、给页面引入css和js文件

根据所给的引入路径和页面路径（上图已有），在解压文件中找到对应的css和js文件：

<head>
    <title>CellEdit 单元格编辑 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
</head>

页面所在路径是：E:\jar包\MiniUI\miniui_java\WebContent\demo\datagrid下

那么css所在路径是：E:\jar包\MiniUI\miniui_java\WebContent\demo\demo.css

js所在的路径是：E:\jar包\MiniUI\miniui_java\WebContent/scripts\boot.js

6、显示结果

注意boot.js中又引入了许多其它css和js，将这些文件找到放入js文件夹下，修改引入路径

结果boot.js中的引入路径修改为：

//miniui
document.write('<script src="' + bootPATH + 'jquery.min.js" type="text/javascript"></sc' + 'ript>');
document.write('<script src="' + bootPATH + 'miniui/miniui.js" type="text/javascript" ></sc' + 'ript>');
document.write('<link href="' + bootPATH + 'res/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />');
document.write('<link href="' + bootPATH + 'miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />');

//common
document.write('<link href="' + bootPATH + 'res/css/common.css" rel="stylesheet" type="text/css" />');
document.write('<script src="' + bootPATH + 'res/js/common.js" type="text/javascript" ></sc' + 'ript>');

//skin
if (skin && skin != "default") document.write('<link href="' + bootPATH + 'miniui/themes/' + skin + '/skin.css" rel="stylesheet" type="text/css" />');

//mode
if (mode && mode != "default") document.write('<link href="' + bootPATH + 'miniui/themes/default/' + mode + '-mode.css" rel="stylesheet" type="text/css" />');

//icon
document.write('<link href="' + bootPATH + 'miniui/themes/icons.css" rel="stylesheet" type="text/css" />');

页面的引入路径修改为：

<head>
    <title>CellEdit 单元格编辑 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/boot.js" type="text/javascript"></script> 
</head>

页面显示为：

重要注意：如果配置了过滤器，页面有可能没有css样式；需要在过滤器中设置静态资源放行；

本案例中，我因为在做权限管理，所以用了shiro过滤器，需要在filterChainDefinitions属性中添

加：

/userList.html = anon
/css/** = anon 
/js/** = anon

后期发现：依旧缺少一些js文件，导致页面可以加载出来，但还是会报错，原因是第4步Code最好到在线网址去找到这个页面http://www.miniui.com/download/不要用自己下载的。结果引入的css和js要多出两个，最终修改为：

<head>
    <title>用户管理页面 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/boot.js" type="text/javascript"></script> 
    <script src="js/miniui/locale/en_US.js" type="text/javascript"></script>
    <script src="js/js/ColumnsMenu.js" type="text/javascript"></script>
</head>