页面结构
部署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方法,这样就不用多个页面写同样的方法了