【SaaS-Export项目】 - 05 部署项目UI界面，将AdminLTE页面部署到项目中，iframe来装载内容区域（iframe实现页面嵌套）

心已赠人 2022-11-20 08:14 98阅读 0赞

## 部署export项目的UI ##

步骤：  
（1）将前面的AdminLTE的项目页面的内容复制到webapp下  
`（如果页面杂乱，一定是css没有引入有问题 点击有问题，是js引入有问题 图片显示不正常，是img引入有问题）`  
将模板导入，测试运行结果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]

（2）将主页面里面的页面拆分拉出来，为了以后能够修改更方便。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]

（2）设置项目路径$\{path\} 重新部署，并将通用的css、js抽出来放到上一层的base.jsp中，使用的时候导入就行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]

（3）通过控制器请求转发来访问WEB-INF下的主页面

@Controller
    @RequestMapping("/home")
    public class HomeController { 
        //访问WEB-INF下的页面不能直接通过重定向url，只能通过请求转发啊
        //主要是负责打开页面的，没有逻辑 跳转到主页
        @RequestMapping(path="/toMain",method = RequestMethod.GET)
        public String toMain(){ 
            return "home/main";
        }
    }

（4）设置打开页面的起始页面为主页面`main.jsp`

<welcome-file-list>
        <welcome-file>home/toMain</welcome-file>
      </welcome-file-list>

## iframe标签的使用 ##

iframe元素会创建包含另外一个文档的内联框架（即行内框架）

<%--以后进行增删改查，就只需要设置一个iframe，
             然后点击怎删改查的时候将信息显示在iframe是上就行--%>
    
            <a href="http://www.baidu.com" target="baidu">读百度主页到f1</a>
            <a href="http://www.iqiyi.com" target="aiqiyi">读iqi主页到f2</a>
    
            <a href="http://www.taobao.com" target="f3">读淘宝主页到f3</a>
            <a href="http://www.tianmao.com" target="f3">读天猫主页到f3</a>
            <br/>
    
            <%-- iframe的name可以被 --%>
            <iframe name="baidu" width="30%" height="50%" style="background-color: blue" ></iframe>
            <iframe name="aiqiyi" width="30%" height="50%" style="background-color: green" ></iframe>
            <iframe name="f3" width="30%" height="50%" style="background-color: aqua" ></iframe>

在页面上放一个iframe标签，并且给iframe标签加上name名字，那么页面上的任何一个a标签，都能通过target属性来设置iframe，如果找到对应name的iframe，那么就显示，不然报404错误

打开页面效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 3]

当你点击对应的a标签，target就去按照name找iframe找到就将a标签打开的页面显示在iframe上  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 4]

> 以后进行增删改查，就只需要设置一个iframe，然后点击怎删改查的时候将信息显示在iframe是上就行。【\*\*\*】  
> 你想让超链接读取到的内容显示在哪，会交给`<a>`超链接标签的target指定的iframe的name，交给对应的iframe来展示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5aada418f90b431887c0bb6c9d775e9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1961e6437f874468bf174022baccb1ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201027171718684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201027192856454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201027192938334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0,size_16,color_FFFFFF,t_70#pic_center