web前端框架Hui使用

最近在写SSM项目，没有太多时间去设计web前端，就想要学习使用web前端框架，在这里选择了Hui前端框架，以下是学习记录和心得。

1.下载前端框架

网址：http://www.h-ui.net/

2.解压下载的文件

官方解释文档

\根目录
├── _blank.html 空白页(每次我们都拿空白页去创建，这样比较干净！)
├── _footer.html 页脚公共代码片段
├── _header.html 头部公共代码片段
├── _meta.html meta公共代码片段
├── robots.txt 搜索引擎爬虫配置文件
├── login.html 管理员登陆
├── index.html 首页(主框架)
├── welcome.html 我的桌面（默认永远打开的页面）
├── member-开头的 用户相关
├── artice-开头的 资讯相关
├── picture-开头的 图片相关
├── product-开头的 产品相关
├── page-开头的 页面相关
├── system-开头的 系统相关
├── admin-开头的 管理员相关
├── charts-开头的 统计相关
static/ 资源
├── h-ui/ H-ui特有资源
│ ├── css/ 样式
│ │ ├── H-ui.css H-ui基础样式
│ │ ├── H-ui.min.css H-ui.css 压缩版
│ │ ├── H-ui.ie.css H-ui.css IE低版本兼容补丁
│ ├── images/ 图片资源
│ ├── js/
│ │ ├── H-ui.js H-ui核心脚本
├── h-ui.admin/ H-ui.admin核心资源
│ ├── css/ 样式
│ │ ├── H-ui.login.css 后台管理员登录页样式
│ │ ├── H-ui.admin.css 后台界面主要样式
│ ├── images/ 图片资源
│ ├── js/
│ │ ├── H-ui.admin.js 后台管理核心脚本
│ ├── skin/ 皮肤资源
│ │ ├── blue 蓝色
│ │ ├── default 黑色（默认）
│ │ ├── green 绿色
│ │ ├── orange 橙色
│ │ ├── red 红色
│ │ ├── yellow 黄色
Lib/ 第三方插件
├── jquery jQuery类库（v1.9.1）
├── Hui-iconfont 阿里图标字体库（H-ui定制）
├── jquery.SuperSlide 幻灯片组件
├── Validform 表单验证插件
├── jquery.validation 表单验证插件
├── My97DatePicker 日期插件
├── datatables 表格插件
├── nprogress 进度条插件
├── layer layer弹出层插件
├── laypage laypage 翻页插件
├── jquery.contextmenu 右键菜单插件
├── ueditor 百度编辑器
├── Highcharts 图表插件
├── echarts 百度图标插件
├── datatables 表格排序，检索插件
├── WebUploader 百度文件上传组件
├── lightbox2 图片预览组件
├── html5shiv.js html5插件，让低版本IE支持html5元素
├── DD_belatedPNG_0.0.8a-min.js 解决IE6png透明
├── swfobject.js Flash插件
├── expressInstall.swf 检查flash插件
├── respond.min.js 让IE兼容media
├── colpick.js 颜色插件
└─temp 测试数据、图片

简单介绍一下就是：

• 页面需要的 .css .js 文件在模板中给出的lib文件夹下，管理员和用户两个角色的 .css .js .jpg文件在static中，这部分内容直接导进项目中即可
• http文件对应着不同的页面，比如用户列表，增加用户等页面。

3.导入自己的项目

• http文件，放入jsp文件夹即可，可以改为 .jsp类型，需要哪个页面就添加哪个。

3.试用其中一个登陆模板

模板效果

页面预览

注意

如果运行以后，发现网页的格式并没有变化，可能是静态资源配置的问题，可以参考：https://blog.csdn.net/yuan_exc/article/details/94721123

看到这里点个赞叭