061_CRM项目-登录前端操作2原创

好，我们继续看啊。啊，来处理这个log in点接SP这张页面啊。好，首先我要做的这个第一个需求是什么呢？每一次在我进入到这个logo in.JSP里面的时候啊，我要让这个用户名啊自动获得焦点。你看啊，我现在把这个页面刷一下，刷一下之后大家注意看。这块是不是没有光标啊，我得手动点一下这个光标才在上，是这样吗？好所以说啊，我在页面加载完毕之后啊，我要把这个用户名啊，啊获得一下焦点，好，我现在要为这个用户名来起一个名字。那个就叫log in act可以吧？密码，咱们也顺便起个名字吧，捞个印。

PWD可以吧，好页面加载完毕之后，咱们是不是得写这个接口对吧。这个杰克啊，咱们已经导入成功了啊，这个每一张页面上呢，都已经把这个杰克咱们都已经拿到了，直接使用就行了，OK吧，好到了。Function好，我们在这里边啊，首先啊，要获取到这个用户，拿到这个用户的这个文本框，咱们一定要从这个名字开始取它，对不对，拿到这个input啊。好在页面加载完毕后啊，好让这个用户的这个啊文本框自动获得。焦点。好。

我们来看一个。Login act对吧，点什么同学们fo。See you。是这个吗？行，没事没事啊，我不问你们了啊啊focus啊，自动获得焦点的意思。OK吧，好来，我现在来刷一下啊。刷啊。等会儿啊，我服务器我没关啊。行，重来一次啊。诶啊好使吧，啊好使啊，没有问题啊呃，这个focus获得焦点，那失去焦点这个总得知道吧。这什么？是不是叫L啊，Onl用过吧？哎，那获得焦点什么呢？Focus对吧？行啊，就是为了提升这个用户体验的一些个这个一些个小细节，其实这个在面试中啊，这这种东西东西都不能考你，因为太low了，OK吧，好，那么接下来我们来看啊，通过点击这个登录按钮，咱们要执行一个相应的登录操作，是这样吗？我们来找一找这个按钮啊，注意力集中啊。

来找一找这个按钮登录是在这儿呢啊，比如说来个123啊，咱们来看看是不是它。刷新一下没问题吧，好是他好，那大家注意看啊，我现在需要为这个登录的按钮啊，是不是应该绑一个事件，我要去验登录啊，对不对，但是你现在看一看，我们现在这个type里边是不是有个submit。有个summit相当于什么？是不是我得提交表单，只要我点summit提交表单，Action，是不是我得走到这个work bench，也就是说我工作台下的这个初始页，欢迎页。

你看啊，我一点他。是不是肯定就进来了，好，但是我不想进来，我要在进进到他之前，我是不是还得去医院登录呢。对不对，怎么办呢？我把这个直接干掉行吗？这个去掉大家注意啊，这个去掉不行啊，不行，咱们来试一下啊，啊，这可不行。没事啊，刚才CSM没加载过来，咱们这个版本这个火狐啊，这个反应稍微慢一点不要紧啊，你们在你们那个机器里面不会发生这种情况啊，来点一下登录啊，你看看。是不是还能登进来啊，好，也就是说啊，我们现在是在form表单当中，你这个button即使不加type等于submit，但是你写在表单中，它type也默认等于submit，它默认的行为就是提交表单，谁让你写在我form标签堆里。

哎，我可不可以这么认为呢？我把它写在放标签都外面是不是就行了。可以到外边可以了。来试一试啊，你看咱们试一试啊，点登录这回注意好使了，我想要我想要的就是让他啥也不发生对不对，但是人家前端人员啊，给你好不容易把这个样式给你调调整好了，你看看现在是不是所有东西全歪了。是这样吗？所以说啊，嗯，尽量啊，不要去改动它的这个位置，OK吧，好。好给它恢复过来，所以说啊，我们在这里边啊，需要给它做一个标识，叫做什么呢？Button啊这块啊是一定一定要注意了啊，这太危险了啊啊。注意啊，这个按钮啊，写在放表单中。

放表单中啊，默认的。行为啊，就是提交表单OK吗？好，那么我们一定啊，一定要将这个按钮啊的类型设置为。Button，也就是说tap等于button之后表示的是我，就是一个普普通通的按钮，我不给你提交表单，OK吧，好，一定设置为button啊，那么按钮。所处罚的行为，处罚的行为。当然是由我们自己来决定啊，对不对啊，应该是由我们自己啊，手动啊写这个JS代码来决定，OK吧，好，所以说呢，我在这儿啊，应该给这个按钮，是不是应该起一个名字啊。

来一个ID，等于比如说叫submit b TN行吧，好，我现在要为这个BTN啊，来绑一个事件执行登录操作啊。啊，未登录按钮绑定事件啊，执行登录操作好。来这个some b填对不对，做一个点击点click function，好，在这里边我们用一个alert去做替代啊。执行。验证登录的这个操作是这样吗？刷，咱们再来看看啊。这浏览器我准备重安一个了。越来越卡，来执行验证登录操作，是这样吗？好，接下来一个需求啊，大家注意，我们刚才是不是点击登录按钮能登录啊。

我现在想要在这张页面上。敲回车也能登录，其实这种需求我们也会这个经常见到，是这样吗？诶你输完账号密码之后啊，咱们之间啊，敲个回车咱就登录了，OK吧，好诶那这个敲回车，那大家想一想怎么玩，我在敲回车，我绑的是谁呢？我是不是在这张页面上敲回车啊。所以说我现在应该给谁绑敲回车事件呢？是不是应该给这个窗口绑事件呢？对吧，好，所以说我现在来一个啊。为。当前什么这个啊，登录页窗口。啊，绑定。什么敲回车事件吗？没有这么高级的事件，我们只能绑定所谓的什么敲键盘事件，是这样吗？啊，绑定敲键盘事件啊。

OK吧，好，来一个win。懂，是这样吗？敲键盘怎么说？等是这个吧，同学们来一个function啊ET，那大家注意这个evet这个参数啊表示啊好。啊，这个参数啊，可以取得什么呢？取得啊我们啊敲的是什么呢？哪个键OK吧，好呃，比如说我们现在来一个ET点咱们来一个K。扣啊好，那大家注意看啊，咱们这个K扣的呀，你看他给你来了一个这个横线表示什么意思呢？哎，是不是已经过时了，对不对，它有更好的方式去替代，OK吧，但是对于我们现在原生GS来讲的话，我指的是原生呢，OK吧，好，我们一直使用的仍然是这种形式，它是最好用的，OK吧，所以说你仍然是放心使用就可以了，OK吧，好，我们现在来看一看啊。

啊，我现在敲个回车啊，不是不是敲回车啊，比如我敲个一。哎，是不是这个码值是49啊二呢，五十三五十一，我敲个AA是多少。65。B66C67是这样吗？敲回车了啊走多少13，那咱们是不是得判断一下对吧，怎么着如果。咱们的点K扣等于。13这是不是说明敲的是回车键呢，对不对，如果啊，取得的键位的。

码值为13表示啊，这个敲的是回车键，回车键的话，我们是不是要执行这个验证登录的这么一个操作呀，对吧。行。诶，看没看到同学们每一次刷新的时候。哎，这个账号啊，是不是把这个默认的一些个这个字母啊，你以前填过的数给你保留住了。这不是我们想要的，所以说每一款浏览器对于这些个啊小功能点的知识其实都是不一样的，OK吧，你不能赌用户用的是哪款浏览器嘛，所以说这种问题咱们是不是肯定得给他解决了。每一次刷的时候，咱们是不是应该把这个账号里边东西给清空，对不对。所以说啊，咱们在。

页面加载完毕后啊，将这个啊，用户文本框中的内容啊清空啊。老回in act，第2V还是HTML。是吧？咱们要玩的什么？是不是这个input的文本框表单元素的Y60啊，咱们玩的可不是标签对中的内容啊，点什么同学们。IVL啊，没悬念啊，好，里边填个什么。里边你啥也不填，它出取值啊，咱们得填点东西啊，填个什么不空串就行了，用一个空串出代替原原有的所有的内容对不对，好，我们现在再来试一试啊，好来刷新一下啊。

没事存多刷几次啊。好了啊啊，多刷几次啊，他就不给你走缓存了，OK吧，这是我们最终所呈现出来的一种结果，OK吧，好。好的，接下来大家注意啊，注意对刚才那个问题啊，同学注意啊，如果你以后做的这个程序啊，从浏览器看到的结果啊，跟你敲的这个啊，哎，和你预想的这个结果不太一样，有可能我指的是有可能啊，对于你们现在来讲的话。基本上全是代码的原因，OK吧，但是啊啊，很多情况下啊，它不是代码原因，而是什么呢？环境造成这个环境在于服务器的环境以及浏览器的环境，OK吧，首先你得确保这个浏览器啊，浏览器走的不是缓存，OK吧，再有一个得确保你的这个他CAD服务器中的这个环境，它也是干净整洁的，OK吧，所以说我才会要求大家这个开的服务器才不要用以前的嘛，因为以前的这个他开的服务器里边是不是都有我们测试的这些项目啊，对不对，都有啊，以前的项目残留对不对，所以说咱们现在做这个CRM项目啊。

啊，老师重新集成了一款这个他不开的服务器，还记得吧，哎，环境也得干净啊行啊以后啊，咱每一次刷的时候啊，这个东器啊用户名它就清空了，OK吧，好，那么大家现在注意看这么一个问题，我在这儿是不是有个执行验证登录的操作。我在这儿也有一个执行验证登录的操作，如果你验证登录的操作，这个代码量很少。而且以后咱们也不扩充了，咱们是不是在这儿写一遍，在这儿写一遍它没什么，是这样吗？那现在最重要的是什么呢？我们验证登录的操作以后，有可能是要经过维护的，而且这个代码量有可能是不确定是有有可能是很大的，是这样吧，好，所以说相当于什么呢？你28行写了一遍这个登录的流程，你41行是不是又写了一遍登录的流程。

啊，重复的代码可以出现，但是重复的代码结构是绝对不允许出出出现第二次的，是这样吗？怎么办？咱们是不是把这个验证登录操作给封装成一个方法。调方法就行了，对不对，好，所以说啊，我们现在要来一个方法，好，那这个方法大家注意看啊，我要写在这个Dollar function的里面呢，还是写在Dollar function的外面呢。好的。Function，我现在来一个就叫login行吧，好，来一个。登录操作好，那大家注意看我在这一块是不是直接调这个方法就行了。来个什么呢，个印就行了是吧，上面。是不是重复调方法就行了，也是调一个老合一，你看啊，代码写一遍，方法重复调两遍，是这样吧。

试一试啊。嗯。我已经受不了这个浏览器了。我用那个。用这个啊。但是以后咱们开发说实话，火狐对于咱们这个开发的这个插件，这个扩充啊，其实扩充是最好的知道吧。行登录操作啊，我现在敲个回车啊，是不是也是登录操作好。今天是咋的？这所有浏览器都给我犯毛病了呢？好了，你看你每一次多刷几次才能把你最新的代码刷出来，看到没？

行，暂时我先开这两个啊，然后火狐我看一会儿我下课的时候重新安一个啊。行，我现在啊，比如说拿这个谷歌啊，咱们现在测，我现在敲回车是也是登录啊，对吧，那接下来我们分析的一个问题是这样的，大家注意啊，刚才大家这个异口同声的说，咱们这个这个方式方法是写在这个到乐方式的外面，对不对？好，我现在来问大家，我写在这个到方式的里面行不行。能用不？能用。来试试啊，我在这里边跟刚才区分开，我加个123行吧啊，加个123啊。好的家注意是不是有个123呢，哎，有123也好使，对不对。是多了一个123对不对，好，但是大家注意啊，这也是我们啊最常犯的一个毛病，就是说以后在企业里边做开发就卷了这个方式啊，就写在哪都行，OK吧，但是大家注意啊，现在啊这个function里边它不会接触到太多什么呢？我们这个前端的这个不这个框架样式相关的这个操作OK吧，但是呢，将来如果你页面中的动态元素多了，而且动态赋予的这个样式多了。

你把这个function写在这个Dollar function的这个里面，它就不好使了，OK吧，好，所以说啊，从现在就应该养成好习惯啊，就是你你们刚才所说的是什么呢？把它一定要写在什么。咱们这个Dollar function的这个外面，OK吧，写在它的外面，至于动态生成的元素，以及为动态生成的元素所赋予样式，我们以前都没有接触过，是这样吗？啊，现在也就听老师说的这么一个概念，但是呢，我们现在需要记得不是这个概念，而是这个结果，也就是说现在从现在开始我们就应该养成这个好习惯，它一定要写在什么呀，Dollar function的。

外面能理解吧，说白了就是这个东西你写在里边，现在行，但是以后就不行了。能理解吧，好，但是你写在外面啊，咱们现在养成好习惯，它一直都是好使的，OK吧，好注意啊，咱们普通的啊。啊，自定义的function方法啊，Fun方法啊。一定要写在咱们这个Dollar。Function的外面啊。行。好了，那接下来咱们来开始做这个啊，去验证登录这么一个操作啊，那首先呢，我们先来看一看这个错误消息的这个位置，老师提供这个位置啊，叫这个便看到没，里边这个消息message要简称MSG了，OK吧，来个123，咱们看看这个位置啊对不对。

好，注意看这个123这个位置是不对的，OK啊好给它标一个红色吧，啊来一个。Red红色。可以啊。行。那么我们现在第一个需求是什么呢？咱们得去啊，首先先验证什么呢？验证账号密码啊，不能为空，也就是说这俩东西必须都得填OK吧，如果其中有一项为空，咱们需要这个给用户做一个提示，OK吧，好，所以说首先啊，我们先要取得这个啊，账号密码啊，VR咱们来一个log in act，等于咱们log in act点。

是VL啊，哎。然后再来一个那个。是PWD啊对吧。好，但是大家注意啊，就有一些用户啊，给你这么玩你看啊。这相当于什么？我敲了几个空格，那如果从我们现在这种判断来讲的话，是不是相当于什么，它是不为空呢？三个空格在三个字符串的位置对不对？三个字符的位置OK吗？好，但是啊，对于真正的这个使用来讲的话，它是不是就是空的，所以说我们是不是应该把这个左右空格都给它去掉呢？怎么去除空格，调一个点什么方法？是不是应该调一个点tri方法？OK吧，但是啊，我们以后最常使用的是使用这种Dollar tri的方式，注意看了啊。

将。这个啊，文本中的左右。啊，空格去掉啊，好使，用什么呢？咱们这个dollar.tri中间是你的文本啊，OK吧，按照这个公式来套，怎么写，同学们。到了。点CH对吧，括号是不把这个这个文本给它括起来就行了，对吧，哎，到点tri。好，那么我们现在来做一个判断啊，如果log in act等于。

孔在GS里边，怎么这么判断呢？你去掉左右空格之后，它如果是一个空串的话，它是不是真就是空了。对吧，好或者。老。PWD等于空，咱们是不是得是或者的这个关系，谁不填都不行啊。是这样吗？好，我们现在给这个MG提供一个消息啊，来糟井号MSG.vl还是HTML。这回是什么HTL，我要往哪呢？MSG的这个什么奔标签，对里边是不是放内容啊，就跟我们刚才放一二三一样，是这样吗？好点HTML给用户一个提示嘛，对不对，好咱们来一个啊，账号密码啊。哎，不能为空，是这样吗？好的。

来试试看啊，做个登录是账号密码不能为空啊行没啥问题啊好，如果这个if服他没走说明什么呢。好。是不是说明账号密码他都填了，如果都填了的话，咱们下边是不是应该去验证这个登录了，对不对？好，这回咱们这个验证登录是不是应该走后台去验证啊。为什么要走后台呢？是不是应该接触到数据库了，你账号密码不能为空啊，既然你都填了，我是不是就得拿着你的这个填写好的账号密码到数据库表中去验这个账号密码是否正确，是这样吗？好，所以说啊，我们现在需要做的是。