saas-export项目-页面结构

BingTaiLi

于 2020-11-13 15:10:23 发布

阅读量165

点赞数

分类专栏：学习笔记教学文章标签： java web jsp css html

本文链接：https://blog.csdn.net/BingTaiLi/article/details/109675346

版权

教学同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

学习笔记

10 篇文章 0 订阅

订阅专栏

页面结构

部署saas-export项目的UI

将资料里面的内容复制到webapp下面
将资源的路径修改为项目路径${path}

在页面上方加入路径：

<% pageContext.setAttribute("path",request.getContextPath());%>

将资源路径替换

WEB-INF下的内容不能直接访问，使用控制器方法访问

如果页面杂乱，一定是css引入有问题，如果点击有问题，一定是js有问题，如果图片显示不正常，一定是img有问题

main页面分析

在这里插入图片描述

页面结构

header footer left_menu
内容区域使用iframe标签，进行动态替换页面
使用include标签将页面结合在一起

iframe标签

a标签读取href的内容
target将内容给iframe
iframe显示内容

示例
iframe使用

WEB-INF/pages/demo01_iframe.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" target="f1">百度</a>
<a href="http://www.qq.com" target="f2">QQ</a>
<iframe name="f1" style="background: red"></iframe>
<iframe name="f2" style="background: blue"></iframe>
</body>
</html>

访问方法
访问效果

web.xml设置主页

web.xml配置自动打卡页面

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

jsp代码重用
我们发现多个页面都需要引入以下的资源

于是我们将多次重复使用的jsp代码写入一个基本jsp中（该jsp只有这些代码，没有其他的了），

在需要使用上述资源是，使用include标签引入该jsp

WEB-INF/pages/base.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<% pageContext.setAttribute("path",request.getContextPath());%>
<link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${path}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${path}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="${path}/plugins/iCheck/square/blue.css">
<link rel="stylesheet" href="${path}/plugins/morris/morris.css">
<link rel="stylesheet" href="${path}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="${path}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="${path}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="${path}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="${path}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet" href="${path}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet" href="${path}/plugins/select2/select2.css">
<link rel="stylesheet" href="${path}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet" href="${path}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="${path}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="${path}/css/style.css">
<link rel="stylesheet" href="${path}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet" href="${path}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-slider/slider.css">
<link rel="stylesheet" href="${path}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="${path}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${path}/css/style.css">
<script src="${path}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${path}/plugins/common.js"></script>

引入base.jsp代码

<%@include file="../base.jsp"%>

webapp/plugins/common.js
这个文件是不存在的，由我们自己创建，用来写多个页面需要使用到的js方法，这样就不用多个页面写同样的方法了

BingTaiLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
saas-export项目-页面结构

页面结构部署saas-export项目的UI将资料里面的内容复制到webapp下面将资源的路径修改为项目路径${path}在页面上方加入路径：<% pageContext.setAttribute("path",request.getContextPath());%>将资源路径替换WEB-INF下的内容不能直接访问，使用控制器方法访问如果页面杂乱，一定是css引入有问题，如果点击有问题，一定是js有问题，如果图片显示不正常，一定是img有问题main
复制链接

扫一扫

专栏目录