crm day03 创建市场活动

news/2024/3/29 1:30:30/文章来源:https://blog.csdn.net/Wolf__king/article/details/130297968

页面切割

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]

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_103393.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode38. 外观数列

一、题目描述&#xff1a; 给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) “…

2023年4月份上新的视频领域分割模型设计系列论文(附下载链接)

来源&#xff1a;投稿 作者&#xff1a;王老师 编辑&#xff1a;学姐 论文1 论文标题&#xff1a; Boosting Video Object Segmentation via Space-time Correspondence Learning 论文链接&#xff1a; https://arxiv.org/pdf/2304.06211v1.pdf代码链接&#xff1a;暂未开源 …

PSO算法、MATLAB代码实现以及测试效果

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 PSO算法原理进化操作算法流程图matlab代码实现main函数部分适应度函数部分PSO算法主体测试结果 (F1~F6) PSO算法原理 粒子群优化( Particle Swarm Optimization&am…

Java+GeoTools实现WKT数据根据EPSG编码进行坐标系转换

场景 JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示&#xff1a; JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示_霸道流氓气质的博客-CSDN博客 在上面实现Java中集成Geotools之后&#xff0c;需求是将WKT数据转换成其他坐标系的W…

银河麒麟(桌面版和服务器版)之远程桌面安装

一、前言 在信创方案中经常介绍支持麒麟系统&#xff0c;实际上麒麟分为银河麒麟和中标麒麟&#xff0c;银河麒麟又分为服务器版和桌面版&#xff0c;服务器器版一般用于应用系统部署&#xff0c;桌面版一般用于日常办公。银河麒麟操作系统作为国产操作系统&#xff0c;是目前国…

力扣---LeetCode21. 合并两个有序链表(链表经典题)

文章目录 前言21. 合并两个有序链表链接&#xff1a;方法一&#xff1a;取小尾插1.1代码&#xff1a;1.2 流程图&#xff1a;1.3 注意&#xff1a; 方法二&#xff1a;带哨兵位2.1代码&#xff1a;2.2流程图&#xff1a; 总结 前言 焦虑不会消除明天的悲伤 只会让你今天的力量…

openEuler Developer Day 2023成功召开!发布嵌入式商业版本及多项成果

【中国&#xff0c;上海&#xff0c;2023年4月21日】openEuler Developer Day 2023于4月20-21日在线上和线下同步举办。本次大会由开放原子开源基金会指导&#xff0c;中国软件行业协会、openEuler社区、边缘计算产业联盟共同主办&#xff0c;以“万涓汇流&#xff0c;奔涌向前…

QGIS数据可视化学习笔记02——CSV数据和表连接

在其他的GIS软件中&#xff0c;表的连接操作是十分常用的操作&#xff0c;在QGIS中也是一样的&#xff0c;接下来我们介绍QGIS中属性表之间的连接以及如何添加CSV数据到属性表中。 1、表的连接 &emsp如关系型数据库一样&#xff0c;两表连接的前提是&#xff0c;两个表中都…

荔枝派Zero(全志V3S)开启alsa,测试codec

文章目录 前言一、ALSA 简介二、ALSA 框架三、buildroot 配置四、烧录到 SD 卡五、测试1、查看 CODEC 设备2、alsa-utils 使用①、查看设备②、调节音量③、查看控制器④、录音测试⑤、播放测试 前言 默认 dts 中使能了 codec 需要使用的话&#xff0c;在 buildroot 中勾选 a…

Linux离线状态下安装cuda、cudnn、cudatoolkit

目录 1. 下载与安装说明2. CUDA安装3. cuDNN安装4. cudatoolkit安装5. 测试安装成功 1. 下载与安装说明 工具包下载地址 CUDA历史版本下载地址&#xff1a;https://developer.nvidia.com/cuda-toolkit-archivecuDNN历史版本下载地址&#xff1a;https://developer.nvidia.com/r…

pdf怎么删除其中一页?

pdf怎么删除其中一页&#xff1f;大家都应该知道&#xff0c;PDF是一种实用性非常强且非常便携文件格式&#xff0c;许多用户对其非常熟悉。不管是工作还是学习中&#xff0c;都会下载或者使用到pdf文件。pdf文件具有非常好的兼容性&#xff0c;F可以将各种图片、文字内容整合在…

界面开发框架Qt新手入门 - 自定义排序/筛选模型示例(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 自定义排序/筛选模型…

记一次某应用虚拟化系统远程代码执行

漏洞简介 微步在线漏洞团队通过“X漏洞奖励计划”获取到瑞友天翼应用虚拟化系统远程代码执行漏洞情报(0day)&#xff0c;攻击者可以通过该漏洞执行任意代码&#xff0c;导致系统被攻击与控制。瑞友天翼应用虚拟化系统是基于服务器计算架构的应用虚拟化平台&#xff0c;它将用户…

原理这就是索引下推呀

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 索引下推是之前面试的时候遇到的一个面试题&#xff0c;当时没有答上来&#xff0c;今天来学习一下。 介绍索引下推之前先看一下MySQL基…

【AI炼丹术】写深度学习代码的一些心得体会

写深度学习代码的一些心得体会 体会1体会2体会3总结内容来源 一般情况下&#xff0c;拿到一批数据之后&#xff0c;首先会根据任务先用领域内经典的Model作为baseline跑通&#xff0c;然后再在这个框架内加入自己设计的Model&#xff0c;微调代码以及修改一些超参数即可。总体流…

汇编语言(第3版) - 学习笔记 - 实验8 分析一个奇怪的程序

实验8 分析一个奇怪的程序 题目解析顺序执行查看反汇编测试一下 题目 分析下面的程序&#xff0c;在运行前思考:这个程序可以正确返回吗? 运行后再思考:为什么是这种结果? 通过这个程序加深对相关内容的理解。 assume cs:codesg codesg segmentmov ax, 4c00h int 21h …

JavaWeb-Tomcat

目录 1.什么是Tomcat 2.Tomcat 概述 3.Tomcat基本使用 1.什么是Tomcat Tomcat官网&#xff1a;Apache Tomcat - Welcome! 【摘自百度百科】 Tomcat是Apache 软件基金会&#xff08;Apache Software Foundation&#xff09;的Jakarta 项目中的一个核心项目&#xff0c;由Apac…

MySQL: 数据类型之整数型、浮点数、时间日期

目录 前言&#xff1a; 数据类型&#xff1a; 整数型&#xff1a; 浮点数与定点数&#xff1a; 浮点数&#xff1a; 定点数&#xff1a; 日期与时间&#xff1a; DATATIME: DATE&#xff1a; TIMESTAMP: ​编辑 YEAR: TIME: 前言&#xff1a; 前面的几篇写了如何创…

2023年主流的选择仍是Feign, http客户端Feign还能再战

&#x1f473;我亲爱的各位大佬们好&#x1f618;&#x1f618;&#x1f618; ♨️本篇文章记录的为 微服务组件之http客户端Feign 相关内容&#xff0c;适合在学Java的小白,帮助新手快速上手,也适合复习中&#xff0c;面试中的大佬&#x1f649;&#x1f649;&#x1f649;。 …

音视频开发面试题大盘点:掌握这些基础知识,你就能轻松应对面试

前言 音视频开发作为一种高技术含量的领域&#xff0c;随着人们对数字媒体的需求不断增加&#xff0c;其前景非常广阔。预计在2023年&#xff0c;音视频开发领域仍将继续保持快速发展的态势&#xff0c;尤其是在移动互联网、物联网、虚拟现实、增强现实等领域。 根据BOSS招聘…