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

2022-07-28,,,,

部署export项目的UI

步骤:
(1)将前面的AdminLTE的项目页面的内容复制到webapp下
(如果页面杂乱,一定是css没有引入有问题 点击有问题,是js引入有问题 图片显示不正常,是img引入有问题)
将模板导入,测试运行结果。

(2)将主页面里面的页面拆分拉出来,为了以后能够修改更方便。

(2)设置项目路径${path} 重新部署,并将通用的css、js抽出来放到上一层的base.jsp中,使用的时候导入就行。

(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错误

打开页面效果

当你点击对应的a标签,target就去按照name找iframe找到就将a标签打开的页面显示在iframe上

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

本文地址:https://blog.csdn.net/qq_40542534/article/details/109315140

《【SaaS-Export项目】 - 05 部署项目UI界面,将AdminLTE页面部署到项目中,iframe来装载内容区域(iframe实现页面嵌套).doc》

下载本文的Word格式文档,以方便收藏与打印。