071_CRM项目-处理模态窗口原创

好。嗯，找到咱们这个Java好，CRM下我们先来一个包结构，叫做worker bench w bench啊worker bench好，在这个worker bench下面我们来跟这个setting呢保持一致，是这样吗？好。来点这个do man。啊，再来。呃，Do。Service。再来。晚八点。

Con controller对吧，好。呃，Domain啊，我们现在需要两个啊，一个是市场活动表本身，一张是市场活动备注表。TVT啊TVT好，还得需要一个。T。OK吗？好。Activity。

啊，还得按照咱们这个套来是吧。来，Private string。好，来一套这个赛特啊。好，这两张表结构啊，相对来讲还是挺简单的啊。Remark。Private string。

赛。行，咱们来分析分析啊，这里边儿的这个。字段啊，都有什么。首先ID啊，咱们还是这个主键是这样吗？好主键好O呢叫什么呢，叫做。市场活动的所有者，说白了，这个市场活动他是谁呢？OK吧，好，他是张三的。还是李四的，我们在做市场活动之前，是不是有个用户表啊。还记得吗？用户表是做登录呢，哎，这个owner老师说了，要么是张三的，要么是李四的。那这个owner貌似跟这个user表有一些关联关系。我们来看看这个表结构啊。

来看看这个owner类型是什么？串什么32，说明这是一个UUID啊。对吧，这是一个外键，它关联的是哪个表呢？关联的是TBL。User表。OK吧，好，也就是说将来我这个所有者，我能不能存这个张三李四，把这些文字往里存呢？不能吧，如果这个所有者是张三的话，咱们应该存的是谁呀？哎，咱们是不是应该存的是这个优则表张三的这个ID，什么9FB3这一条啊啊对吧？好这点需要注意了啊好name表示的是咱们市场活动的名称，好start date and date，这是什么？开始日期这是什么呢？结束日期是这样吗？好看一看啊。

Start end，多少位呢？十位的只有年月日就行了，是这样吗？啊，年月日就行了啊。年月日好cost啊，表示的是市场活动的成本啊，啊对于该市场活动的描述，好，Create time create time，这个在我们user表里边也有个体现，对吧，这个叫做创建时间，创建人，这个是修改时间。修改人是这样吧，好，还记不记得这俩时间是多少位来着。19位啊，年月日十分秒好，这个是年月日十分秒OK了，好，我们再来看一看这个mark啊，这个remark相对来讲是非常容易的了啊，嗯，其实有用的这个信息啊，就这一个note content，它叫做什么呢？它叫做备注。

信息，除了他之外，你看看是不是什么，Create time create I time I这是什么，是不是外键呢？它还有一个什么呢。好，是否啊，修改过的标记啊，是否修改过的这个标记，好这两天啊，我们接触不到这张表，OK吧，明天会接触一小部分啊，当咱们做这张表的时候，咱们再来说这个字段，OK吧，其他的没什么好说的啊，行了啊，接下来是我们的DAO啊。对于咱们这个道层啊，还是得先来一个接口，对吧。啊，这回叫做DA对吧。

好，我们再来一个，还得来一个act t do那个叉ML对吧。粘一个啊。改个名字。It DAO叉ML，好，这里边默认的东西干掉。行，倒面和DAO咱们都加完了啊。来看看主配置文件了啊。主配置文件，咱们以前引了一个setting呢，对不对。这回咱们是不是还得多一个package，应该是一个work问去了，对不对？

Work bench的啊，这个东西其实就是把这个settings改成work bench就行了，对吧。比如说我们现在啊，重来一遍也是一样的啊来。是不是就相当于改个work bench对不对，那下边批量注册的，咱们是不是这回要引的是work bench这个包对不对啊，这个是咱们这个DAO。行。接下来是我们的业务层。业务层啊，先来接口。Activity service。ERVC，然后呢，我们来这个一个子包ipl里边来写实现类。Activity。

Service I m p l。Activity service，那处理市场活动业务是不是肯定得用到市场活动的表啊？我们是不是得引层啊？我相信大家对这个东西应该很熟了啊，Activity DAO。等于什么来着？Circle session get circle session.get map，好，Activity da.class OK，最后我们来搭建。这个啊，控制器，这控制器啊，我直接粘过来一个啊，改吧改吧啊。行，这回是进入到什么市场活动控制器对吧。嗯。

这个是咱们的用户控制器对吧。行，下边咱们再来。市场活动控制器啊。我靠，这个名字没改了是吧。来controller啊。T为好。给他拿过来。好，这回咱们从啊，按照前端那个资源顺这个后端资源对吧，Worker。

Bench下的子模块是activity下的啊，咱们来个叉叉叉行吧，Activity下的啊，好，那这个咱们也得改一改啊。登录就咱们就先给干掉啊。这我就直接转过来了。这个错误集中的这个点在哪儿呢？集中在这儿，好多同学犯这个毛病啊，这个杠没有加。然后到时候你这个请求这句话能打印出来。但是if和和这个这个这个这个这个ES啊，这俩东西一比啊，怎么比就比比对不上，你这个杠没加OK吧，啊这个需要大家看一看啊，这杠必须得加OK吧行。

啊，这个后端资源和前端资源啊，咱们都搭建完了，好那么我们接下来继续往下看啊，那么对于这个市场活动而言呢？那大家注意了啊，我们需要展现这个新增市场活动的这个啊，Model表示什么呢？模态窗口啊，那么这个模态窗口的这个展现呢？好，我们刚才做了一些个简单的介绍啊，好，是属于我们增加用户体验的啊这么一个操作，好从我们的worker be activity看来，是不是只有一个列表页，一个详细信息页是吧？所以说我们的这个列表页列表相关的操作以及添加和修改页相关的操作是不是都放在这张页面上了，只不过你的添加操作和修改操作是以模态窗口的形式来呈现的，OK。

啊好，我们现在啊，来看一看同学们啊。首先我们会观察到第一个这个大的这个div，大家注意这div老大了，看看啊。我点一下啊，看看下边还哪个div变蓝了，是不是它呀，这整个这个大的div看到没？它不是说在我们这个页面上展现出来的，而是什么呢？通过你触发创建这个按钮才会展现这个div OK吧，这是我们创建市场活动的模态窗口，OK吧，那下面这个呢，这个div呢，跟它很相似啊。是我们修改市场活动的模态窗口，OK吧，好，我们现在把这个起开啊，来试一下。

嗯，来市场活动啊，市场活动。嗯。好，咱们来看看啊，呃，点击这个创建是不是它弹出来对不对。点击修改，它弹出来正好对应了咱们那两个大的div，两个大盒子对吧？好，但是这两个大盒子展现它是有条件的，好那么大家注意啊，这种东西叫做什么呢？叫做模态窗口，也叫做什么呢？模态框就是窗户框的框，Alert弹框的框，OK吧，模态框，那么这个模态框最大的好处是什么呢？它最大的好处是当我们的这个表单呢。啊，它的这个数据量啊，可填写项比较少的时候，我们没有必要啊去非得给它跳转到一张页面上，而是使用这种模态窗口的形式，它既快速又方便，而且呢，从视觉来观察，也能够有效的提升我们用户的视觉体验，为什么？这是不是相当于是一种动画效果？

是这样吗？背景是不是变暗了，它是不是出来了，OK吧，好，所以说啊，呃，加入这个模态窗口机之后啊，使得我们这个项目啊略显高端一些，对不对？那么除了我们这个boowap之外，市面上其他所有的主流的这个啊，前端UI框架其实呢，都给我们提供了这种什么呢？模态窗口的机制它不是boot独有的。能理解吧，好，所有的这个啊前台UI，比如说你以后入职之后啊，在企业里边有可能你项目组用e zi也有这个东西，OK吧，好。那接下来啊，咱们继续看啊，我们来看看这个创建按钮找一下啊创建按钮。找一找。

大家注意啊，这个创建按钮啊，在这儿呢，看到没。创架点在这儿，好，咱们来分析一下谁呢？分析一下这两项啊，分析下这两项。点击创建按钮啊，好，观察这个啊两个。啊，属性和属性值好，其中一个叫做data to model，好这句话啊，表示的是什么呢？表示啊。好，出发。该按钮。按钮好，将要打开一个什么呢模态。

窗口OK吧，我要打开一个模态窗口，那下面这个就很明显了，他给他我们很面熟，他给的是不是目标的意思好。它所表示的是。啊，我要打开哪个模态窗口，是这样吗？因为在我们现在index.jsp里边有两个模态串号，一个是做添加的，一个是做修改，对吧？好，那么我们通过什么呢？通过以这个井号什么呢。ID的形式啊，找到。改窗口，来看看，找一找啊，Activity model，我是不是要打开这个模态窗口啊？好，来看看同学们。是不是就他。没错吧，哎，我要打开这个div，那下边这个div叫啥呢？叫做edit activity model，是这样吗？好，那么我们现在啊，是通过这个属性和属性值的方式来打开的模态窗口啊。

好。现在啊，我们是以这个啊，属性和属性值的方式啊好。写在了这个button元素中啊，用来打开模态窗口，好，但是这样做是有问题的啊。好，它问题在哪呢？好，如果啊，如果我想要在点击这个按钮的同时啊，除了打开这个模态窗口，我想触发一些其他的事情。

咱们现在是不是把这两个属性和属性值写死在这里边了，它是不是表示的就是打开模态窗口啊，我别的事是不是就干不干不了了，OK吧，好，那问题在于啊。在于好，没有办法对。按钮的功能啊啊。进行扩充。扩充好老师，你要扩充啥扩充啥，一会儿再说，比如说呢，我现在想要在打开模态窗口之前弹一个ALERT123，你能弹吗？现在。老师，你谈额，那是123干嘛？我乐意谈，反正一会咱们肯定得干点事，是这样吗？我现在就拿这个A123来举个例子，我现在想要在打开这个摩特窗口之前弹出一个呃二三，弹不了吧。

谈不了，为什么就这俩东西写死在这个button里边呢？你只要点button，是不是这俩东西就生效啊？对不对，好，所以啊，所以。好，我们未来的实际项目开发啊，开发好，对于触发这个模态窗口的操作啊，一定不要写死在这个啊，元素当中好，应该有。啊，我们自己啊自己啊写这个啊，JS代码来操控啊操控好。那所以说啊这两句哦，二号不说要给他干嘛呢，同学们。我要给你干掉，然后我要给你起个什么呢？起个名字是这样吗？ID，然后我通过这个ID，这个名字，我来给你绑一个事件，通过绑事件，我是不是可以写GS代码来打开你的模态窗口。

那在打开你的模态窗口，哪怕是之前还是之后，我是不是可以随便弹额呢？等于二三，因为这个代码是我写的。是这样吗？好，那么现在这个ID应该起成什么名字啊？这个不要乱起啊，咱们来进行一个相应的约定啊，嗯，我看在哪玩呢？在这里边啊，记录一下，在公司里边啊，这个肯定都是给你约定好的啊，你按照这个公司这个规则来就行了啊，那对于咱们这个上课，你就按照老师的规则来就行了，每个公司都不一样啊，比如说咱们约定几个关键字啊，Ad或者是。Create save edit update以及。Get行吧，简单一点，嗯，还有一些特殊操作吧，特殊操作好上面这个ad和这个create表示什么意思呢？比如说。

跳转到添加页或者是什么呢？或者打开。添加操作的模态窗口可以吧，好，ADD或者是啊都可以，那这个save咱们约定成什么呢，执行。添加操作可以吧，跳转到添加页和执行添加操作是不是两回事啊好，那下面这个edit咱们给它来个什么呢？跳转到修改页或者什么呢。打开修改操作的模态窗口可以吧，好，下边这个什么呢？Update执行修改操作。那这个get是什么呢？执行查询操作，其实这个查询操作我写的就是简单一些啊，那将来在公司里边有可能给你约定的关键字是什么开头的呢？是比如说find开头的，或者是select开头的，或者是Cory这个开头的啊等等等啊，OK吧，好，特殊操作啊，咱们特殊对待，比如说我们之前一个特殊操作是叫登录，是叫log呢，我不在上述关键字的范围之内，OK吧，好。

行，那现在我来给这个创建按钮起个名字。我干嘛，我我我点他的目的是干嘛，哎，是不是打开。添加操作的模态窗口啊，这是我的目的啊，好，那这个关键字咱们应该用哪个呢？ADOK吧，咱ad来个BTN，那做约定最大的好处是什么啊，也就是说我们将来我们自己写的文件永远不是自己去使用。

是这样吧，约定好了之后啊，将来你同事在看你源码或者是接着开发的时候啊，全公司上下用的这个约定的这个名字都是一样的，那么他不用去啊特意的去解读你的这个源码，能理解吧？啊根据名字人家就知道这个按钮是干嘛的，OK吧，好，我们现在来为创建按钮来绑一个事件啊，同学们啊。来为创建按钮绑定事件，目的是什么呢？打开添加操作的模态窗口，是这样吧。 ABtn.click click function，好操作模态窗口啊，超级方便啊好操作模态窗口的方式啊好首先啊，先要找到什么呢？找到我们需要操作的模态。

窗口的接口RY对象，OK吧，然后调用啊一个方法啊，叫modal方法，OK吧，为该方法传递参数啊，这个参数有两种取值，分别是受以及hi。De，这个受表示什么呢？打开模态窗口啊，这个head表示什么呢？关闭模态窗口，如果要是硬反应的话，是不是就是展现模态窗口，这是什么？隐藏模态窗口是这样吗？非常简单啊，那我们现在首先按照这个公式来啊。操作模态窗口的这个解扣对象，我们现在要操作哪个模态窗口是不是他呀。

好拿到啊。是不是呀，调什么方法点moda。L，咱们要干嘛，是不是瘦啊，行，搞定啊，搞定之后咱们来看一看效果啊。选活动创建也好使，对不对，但是现在呢，我在打开模态窗口之前想干嘛，我乐一个123，我是不想干嘛干嘛呀。哎，因为我们现在是在代码区啊，对吧？好，那现在咱们再来看看呗，点创建走一个弹个123之后怎样确定再弹模特窗口是这样吗？啊所以说以后啊，尤其是按钮啊这种组件啊，啊，他所有的这个行为的处罚应该都是由我们自己去决定的，OK吧，好。