页面切割
div切割，ifram显示
如何分割的呢，在主页面上打开iframe
$(function(){ //页面加载时
window.open("workbench/main/index.do","workareaFrame");
})
注意所有在WEB-INF的页面都会收到保护，因此到达此目录下的页面必须全部通过Controller请求进行跳转页面。
而静态资源不在WEB-INF目录下在，在webapp根目录下的，前端页面不写/,后端页面写/。
模态窗口
模态窗口默认是隐藏的，看不见。
模态窗口本质上就是一个页面上的div，通过设置z-index大小来实现
使用到了bootstrap
模态窗口的显示与隐藏
方式1 通过data-toggle=“modal” （数据开关，一点就隐藏，一点就显示） data-target=“模态窗口的标识id”
方式2 通过js函数控制 ，由bootstarpt框架支持
选择器.modal("show")；显示选中的模态框口
选择器.modal("hide");关闭选中的模态窗口
方式1和方式2只能存一个。
方式3 通过标签的属性data-dismiss=“modal”;添加了dismiss属性的标签点击会自动关闭该标签所在的窗口。
下拉列表选项，动态获取所有者
下拉列表选项显示的是用户名，但是下拉列表实际上存储的是用户的ID，因为用户名称可能重复，但是用户ID不可能重复。
为了保证用户ID不重复，我们自定义了UUID这个工具类
public class UUIDUtil {
public static String getUUID(){
return UUID.randomUUID().toString().replaceAll("-","");
}
}
为了动态获取，我们需要连接数据库查询用户表中的数据，将数据库表中的数据动态显示到前端页面，查询的是多组，userlist，因此我们在前端遍历的时候需要用到jstl标签库中的内容，使用
<select class="form-control" id="edit-marketActivityOwner">
<c:forEach items="${userList}" var="u">
<option value="${u.id}">${u.name}</option>
</c:forEach>
</select>
取值为id,显示为用户名。
在那里获取这个userList，什么时候查询，收集信息呢？
一次请求通常包括 HTTP 请求和响应两个部分。
创建，修改都会弹出模态窗口，但是这个模态窗口是div，始终在原页面的请求页面中，只有点击了保存或者更新按钮后，才会出现新的请求，因此获取的userList可以保存到原页面的请求域中。
在跳转到原页面的时候，就获取userList。
流程图
创建活动的时候看着数据库中的表，看活动表需要哪些参数，比如前端传过来的有所有者，名称，成本，日期，描述，但是没有活动id，没有活动的创建者和创建时间，因此在传过来之后，我们需要在Controller请求中给其他没有赋值的属性赋值，活动ID由UUID工具类来创建唯一不重复的ID,创建时间是当前时间，活动的创建者是当前登录的用户，在登录的时候我们利用Session保存了当前登录的用户，因此我们需要穿一个Session获取当前用户的ID。
表单验证-正则表达式
先获取参数，再进行表单验证
正则表达式
var regExp=/^(([1-9]\d*)|0)$/; //满足正则表达式的变量值
if(!regExp.test(cost)){ //.test（）验证是否满足正则表达式。
alert("成本只能为非负整数");
return;
}
正则看文档。
日历插件
当我们要写一个与业务逻辑无关的代码，而且这个代码很麻烦的时候，我们可以选用插件来完成该代码的实现。
比如 数据库的日期是有格式的，我们不能让用户随便填写日期，因此我们可以选择用日历插件的形式，让用户自己选日期，填写的内容以字符串的形式输出。
所以我们要在日期的标签内设置只可读，readonly
<input type="text" class="form-control mydate" id="create-startTime" readonly>
网上插件一大堆，我们选择选一个好看的、与页面风格相近的插件。
如何使用插件？
在页面中使用插件之前，我们必须先创建一个测试jsp来测试插件，没问题后再在我们的工作页面中使用。
使用插件的三大步骤：
1、导入与插件有关的包
html,js,css->放到jquery里面
下载开发包，拷贝到项目webapp目录下，把开发包引入到jsp文件中：<link> <script>
2、创建一个容器来放插件
插件运行的结果放在容器<input type="text" />或者<div>中 ，readonly 不改可提交 disable 不改不能提交，为了不让用户自己输入，我们设置容器只能选不能改。
3、当容器加载完成之后($(function(){}))，对容器调用工具函数
开源代码的厉害就是我们可以修改源代码。比如让不支持中文的代码支持简体中文
注意导入包的先后顺序，比如该日期插件，现有js,再有bootstrap，再有bs_pagination
测试jsp的内容
<%@page contentType="text/html; charset=utf-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + request.getContextPath() + "/";%>
<html>
<!-- JQUERY -->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<!-- PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<title>演示bs_pagination插件的使用</title>
<script type="text/javascript">
$(function() {
$("#demo_pag1").bs_pagination({
currentPage:1,//当前页号,相当于pageNo
rowsPerPage:10,//每页显示条数,相当于pageSize
totalRows:100,//总条数
totalPages: 10, //总页数,必填参数.
visiblePageLinks:5,//最多可以显示的卡片数
showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo:true,//是否显示记录的信息，默认true--显示
});
});
</script>
</head>
<body>
<!-- Just create a div and give it an ID -->
<div id="demo_pag1"></div>
<h2>演示bs_pagaination插件</h2>
</body>
</html>
测试成功
在 多个标签中有共性的代码的时候，使用类选择器，找到他们的共性类。
在原页面使用，在开始日期和结束日期的标签内定义一个公共class，在js中选择并添加日期选择器。
$(function(){
//日历插件
$(".mydate").datetimepicker({
language:'ch-ZN',
format:'yyyy-mm-dd',
minView:'month',
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后，日否自动关闭日历
todayBtn:true,//设置是否显示"今天"按钮,默认是false
clearBtn:true//设置是否显示"清空"按钮，默认是false
});
<input type="text" class="form-control mydate" id="edit-startTime" value="2020-10-10">
<input type="text" class="form-control mydate" id="edit-endTime" value="2020-10-20">
创建完市场活动清空创建表单中的数据
点击保存之后，如果成功了，模态窗口会关闭，但是关闭仅仅代表隐藏了模态窗口，当我们再次点击创建按钮的时候显示的是之前写好创建表单，影响了我们第二次创建，因此我们在第二次创建也就是点击创建按钮的时候需要清空之前创建的表单数据。
如果清空之前创建的表单数据？
获取表单的dom对象，dom对象有一个reset函数可以清空表单
选择器.get(0).reset();
$("#createActivityForm").get(0).reset();
如何获取表单的dom对象？
选择器.get(0)
选择器[0]
创建完成后刷新市场列表，涉及到分页查询的内容。
详情见下一章详解。
