Web编程入门 AdminLTE框架的使用

时间:2024-05-22 17:19:06

本学期老师布置了使用B/S架构设计开发一个仓库管理系统的任务,这就考到我了,以前从来没搞过web编程这一块,没办法只有自学几天简单的html,js,php,来完成老师的任务,这里给万一有同样苦恼的小伙伴介绍一个开发框架,可以方便自己的开发过程。

首先AdminLTE是一个完全响应管理模板,主要基于Bootstrap和JQuery,里面集成的界面模板与控件非常丰富。有完整的侧边栏,以下介绍一下自己所使用到的模块部分:

Web编程入门 AdminLTE框架的使用

 

(1)侧边栏

Web编程入门 AdminLTE框架的使用

侧边栏的起点如图:在上方可以更改自己为自己的软件系统名,下方为用户名,可以根据需求动态更改。

Web编程入门 AdminLTE框架的使用

当选定了某个页面后,在当前页面需要设置三个地方来保证这个页面所属的侧边栏位置处有一个**效果:

Web编程入门 AdminLTE框架的使用

如果想要在原有的框架的基础上进行页面的增删,那么也需要对应的把所有的页面都更改,这里我认为是一个非常麻烦的工作,因为当页面过多,一旦对一个页面进行删除或者增加,就需要重构整个项目,当然这个问题还有待探究,我想是否有一个动态添加的方式,可以为当前页面动态设置侧边栏,来解决这个问题,我在开发中因为页面比较少,所以还是直接使用的统一侧边栏的方式。

 

(2)DataTables 

数据表格中已经内置了表格显示行数控制,按照不同标签排序,搜索表格中的元素等等功能,因此如果开发过程中有什么统计数据需要表格显示无疑是非常方便的,这里实现了一个仓库的显示。

Web编程入门 AdminLTE框架的使用

 

(3)jsGrid

jsGrid表格设置起来很方便,只要将参数正确赋值后,进行如下设置即可,这里我将jsGrid表作为了一个任务分配表,显示员工分配的货物分拣任务:

Web编程入门 AdminLTE框架的使用

Web编程入门 AdminLTE框架的使用

 

(4)ChartJS

ChartJS可以用来实现物品的盘点可视化,将员工统计的仓库中的真实数据反映在表格中,可以根据树状图看到期望值与实际值的差距,也可以根据饼图看到整个仓库的概况。

Web编程入门 AdminLTE框架的使用

 

(5)Projects

Projects页面把员工任务与进度可视化,可以用来作为一个任务分配模块的主页面,然后根据View,Edit按钮跳转到其他界面中对于其他详细数据进行操作。

Web编程入门 AdminLTE框架的使用

 

这里介绍一下大致在开发过程中使用到的模板中的内容,接下来会介绍一下作为一个初学者在开发过程遇到的问题和个人的一些处理方案。

相关文章