saas-export项目之前端AdminLTE

曾经终败给现在 2022-12-17 12:54 31阅读 0赞

## 前端最终效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]  
（该模板已经上传到我博客，有需要的可以去下载）

## AdminLTE介绍 ##

*  （1）AdminLTE是什么？  
    AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
 *  （2）AdminLTE有什么特点？  
    》》提供一系列响应的、可重复使用的组件， 并内置了`多个模板页面`  
    》》自适应多种屏幕分辨率，`兼容PC和移动端`  
    》》`快速的创建`一个响应式的Html5网站  
    》》AdminLTE 不但美观， 而且可以`免去写很大CSS与JS的工作量`

# AdminLTE入门程序 #

*  （1）官方原版  
    https://adminlte.io/  
    https://github.com/ColorlibHQ/AdminLTE
 *  （2）汉化版  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][20201023142353376.png_pic_center]  
    ![在这里插入图片描述][20201023142402903.png_pic_center]

# AdminLTE入门程序 #

*  （1）创建项目，引入css/js等静态资源
 *  （2）创建index.jsp
 *  （3）复制模板文件代码到 index.jsp  
    all-admin-datalist.html
 *  （4）使用项目路径$\{path\}替换掉 …/  
    …/plugins $\{path\}/plugins  
    …/css $\{path\}/css  
    …/img $\{path\}/img

## pom.xml ##

<dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
          <version>2.5</version>
          <scope>provided</scope>
        </dependency>
        <dependency>
          <groupId>javax.servlet.jsp</groupId>
          <artifactId>jsp-api</artifactId>
          <version>2.0</version>
          <scope>provided</scope>
        </dependency>
        <dependency>
          <groupId>jstl</groupId>
          <artifactId>jstl</artifactId>
          <version>1.2</version>
        </dependency>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center 1]

## 对左侧菜单进行删除与修改 ##

*  （1）为了`页面维护`方便 将【菜单内容】移到`left_menu.jsp`中，再使用include引入当前页面
 *  （2）创建【企业管理】菜单

## index.jsp ##

<jsp:include page="left_menu.jsp"/>

## left\_menu.jsp ##

![在这里插入图片描述][20201023145139787.png_pic_center]

*  保留一个li标签，并删除，只留两个子项。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/a1bd32de66d34d5eb29a58904a87ce3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/ca539c73990a4a699bc359af85fd87dc.png
[20201023142353376.png_pic_center]: /images/20221122/dd3cd7620a774cdf88c420aadeb25524.png
[20201023142402903.png_pic_center]: /images/20221122/2c02d7c9802649fcbea60ed00e832ac5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2MjEzOTg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/62cfb24cf7f2478ca16f4bb8a8ff5937.png
[20201023145139787.png_pic_center]: /images/20221122/6ca9c8d2a945409c86afd3db84eac1e2.png