页面切割

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,//当前页号,相当于pageNorowsPerPage:10,//每页显示条数,相当于pageSizetotalRows: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,//设置是否显示"今天"按钮,默认是falseclearBtn: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]

创建完成后刷新市场列表，涉及到分页查询的内容。
详情见下一章详解。

crm day03 创建市场活动相关推荐

CRM项目开发【实操篇----市场活动模块】
CRM项目开发[实操篇----市场活动模块] 前言:本项目来源于B站动力节点视频,CRM项目开发使用的后端技术栈主要是SSM框架,不涉及boot,老师讲的非常细致,推荐关于流程图部分,由于是老师创 ...
Salesforce市场活动及其渠道归因
Salesforce 客户关系管理(CRM)软件非常受业务人员的欢迎. Salesforce的软件即服务(SaaS)平台为企业提供了销售自动化,case管理和任务管理的功能,使客户能够跟踪自己的cas ...
用 MQL5 创建交易活动控制板
简介效率在一个工作环境中至关重要,尤其是在交易者的工作中,其中速度和准确性扮演着重要的角色.在准备工作客户端的同时,每个人都会让他的工作空间尽可能舒适,从而尽可能快地进行分析并进入市场.但是事实的真 ...
十五、市场活动：excel导入
功能需求 ①用户在市场活动主页面,点击"导入"按钮,弹出导入市场活动的模态窗口; ②用户在导入市场活动的模态窗口选择要上传的文件,点击"导入"按钮,完成导入市场 ...
安卓应用安全指南 4.1.3 创建/使用活动高级话题
4.1.3 创建/使用活动高级话题原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙协议:CC BY-NC-SA ...
安卓应用安全指南 4.1.2 创建/使用活动规则书
4.1.2 创建/使用活动规则书原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙协议:CC BY-NC-SA ...
安卓应用安全指南 4.1.1 创建/使用活动示例代码
4.1.1 创建/使用活动示例代码原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙协议:CC BY-NC-SA ...
用户产生内容(UGC)和用户创建市场(UGM)
原创不易,麻烦点个关注,点个赞,谢谢各位. UGC User Generated Content,用户产生内容,即用户将自己原创的内容通过互联网平台进行展示,博客 (和播客).视频分享.社区网络都是主 ...
微会动平台免费开放多种活动场景现场抽奖功能产品助力企业市场活动
信息化.数字化科技技术正在促使会议.展会等市场品牌营销活动进行着变革与升级,数据精细化运营管理带动营销增长已然成为当前活动产业发展的态势.微信作为热门的社交信息平台,也是移动端的一大入口,正在演变成为 ...

crm day03 创建市场活动