13_尚硅谷_智慧校园_业务开发之获得验证码

好，接下来我们看我们要做的第一个功能啊，就是在这块要完成登录，但是在完成登录的时候呢，我们需要在这登输入一个验证码，可是现在这个验证码呢，不展示就变成一个井号，为什么变成一个井号呢？就是因为它的请求后台资源的时候呢，这个没有请求到，因为后台我们还没有请求，呃，没有写功能嘛，是吧？来我看一下啊，带大家看一下写好的这个长什么样子啊，这块是有验证码的，然后呢，这个验证码呢，一点击它是可以切换的，当我们进入这个页面，它展示验证码和我们点击图片所切换验证码的时候呢，它请求资源其实是一样的，是一个啊，那么他请求资源是谁呢？我怎么看呢？是吧，我们这个时候按一下F12。把这个打开我们浏览器的这个控制台，然后点到网络这个位置哈，一点这个图片，你会发现呢，它产生了一次请求local host的9002啊，当然这是我另一个项目跑起来所占的端口是9002是吧，他请的资源呢，叫做什么叫做get verify code image这样的一个路径啊，这样路径啊，来看这。看一看它完整的路径是这个是请求的是SMS system啊这个啊，前面是这样一个前缀，然后具体的后面是get wiify code啊这个啊，Image这样的一个什么这样的一个UI，后面的这个参数不用管，它是注成一个时间参数不注，呃这这样的话能保证每次点击后面注意不同参数，它一定会发请求，要不然浏览器的不不自动发，这是他请求的一个URL，请求的方式什么呢？是以get方式来进行请求的，注意这是以get方式来进行请求的，那么它请求发送了什么数据吗？没有发送什么数据，响应回来是啥呢？响应回来就是这样一个图片，那那后端接入到的，其实后端就是浏览器给我们响应个什么玩意呢？想应了一个图片的一个100的数据，然后这块呢，直接给我们展示出来了，那接下来呢，我们就来呃，在后端写些一个get I code这样一个controller，然后呢，也是给我们想一个图片啊。

打开我们自己这个项目MY智慧校园，在system control里面SMS system下边我们再写成个什么呀，再写成一个方法，来一个a public VO，嗯，这个呢，我们要用L流打一个什么用用响应对象获取L流打印一个呃这个图片过去，所以这块呢，我们直接写成嗯，我返回值写成what就可以了哈，这个名呢，前端请求这个路径叫做get y code，我直接把这个当成方法名吧，是吧，然后在参数列表里面，嗯，来写成一个参数列表，然后接下来干嘛呢？要干的事情就是来获取图片，第二步就是获取图片上的什么呢？图片嗯上的这个呃，验证码。

验证码，然后之后干嘛呢？之后啊，这个将啊验证码，验证码啊图片响应给什么响应给浏览器，浏览器啊哎中间还缺一步，缺一步啥呢？就是将验证码，将这个验证码文本啊文本放入什么呀，放入赛事域，呃赛事域为什么为下一次，为下一次这个呃验证做准备啊，做准备啊那获取图片我们在这怎么获取图片呢？获取图片我们就可以用这个叫做下面这个工具类了，啊叫什么呢？叫做呃，诶工具类在这呢，U里面叫做create verify code image，用它来获取就可以了，Create create verify code img啊然后点一个叫做get wi code image就是获取这样一个验证码图片了，哎，它是一个叫做buffer image的形式来给我返回的啊，我想。

获取啊，这个验证码上真正真正所展示的那个那个那个呃，那个文字是什么？验证码的文字是什么？我们在用这个create verify code image.get verify code就是上面这个图片，它所生成的那个验证码实际的那个文本，但是它是以差数组形式给我们返回的，我想把它转成字符串，怎么转呢？我们可以这么写，写成一个string new string。New string，然后通过string的构造方法，把一个差数组哎，转换成一个字符串，转成一个字符串之后呢，这个就是我们后端的啊，String very very cold。

嗯，VE Fi code verify code。啊，形成它啊，形成它之后呢，要把这个WiFi code放入session域，为下一次啊这个啊登录的时候呢，它提交信息做做准备，那怎么准备呢，怎么放呢？我们需要在这获取session对象，那怎么获取session对象呢？在这个行材中来一个HTTP，哎，Htp so select request request啊我们需要用request对象来干嘛呢？来获取session.get session拿到session之后啊，Session之后往session里边设置一个ver code set attribute啊，Ver Fi cutd，注，注意这个名字啊，参数名叫它，一会我们从这个S里面取这个参数名也叫它啊逗号，把这个where for code往里一放。

好，这些准备完之后呢，最终呢，终于要将这个图片，这个数据啊，这个img啊，这个buff的img响应一个浏览器了，怎么响应呢？我们需要用到一个呃，Response，就像http light response response，拿到response之后呢，用这个response.get什么呢？Get一个嗯，Get一个output。Get一个output，这是一个输出流，哎，这是一个输出流，那么接下来就要就要把这个图片通过这个输出流呢，给它发送过去，那怎么发送呢？呃，用这个verify verify code image啊这样的这个对象。玩code的image这个对象它有一个，诶不是用这个方案，这个我们有这样一个Java里面有这样一个工具类，一个什么工具类，叫做ii image IO的一个工具类，在Java X包下面啊这种工具类呢，可以直接帮助我们去将将什么将这图片，呃，通过这个数数就给它写出去了，在这块怎么写呢？嗯，I'mg IO调这个write方法就可以了，在这write方法里面我们该写什么呢？来前面写的是我这个生成的这个图片，WiFi code image，嗯，后面呢，我们可以指定一下这个图片的格式，例如告诉它是一个哎，JPEGJPEG啊这样一个图片格式啊，后面放的是啥呢？放，再再往后放，就放的是这个输出流，就是我们上面这个output stream outook stream，那这个io.right方法就会把这个图片以这个格式通过这个IO流响应个浏览器了，这是这上面这个response不是的响应对象嘛，对吧，这个IO流呢，可以直接在这块用response在这块直接这么get也行啊，就没有必要单独再搞一个参数过来了。

啊，刚刚参数过来了啊，它有异常，有异常怎么办呢？嗯，把它来CTRL啊，X加CTRL加alt加T啊在这块A怎么没有呢？CTRLV啊把这个个选中，选TRL啊，CTRL加alt加T，然后在这给它来try catch一下啊OK，这就搞定了，这就搞定了，搞定之后呢，我们前端请求这个URL啊，这个ul在请求之中啊再来看一看，嗯，这个怎么长成这个样子了，前面这个SMS和system这一段已经匹配上了，这里。

匹配到了这里，那你还得想办法让这一段，让这段硬性路径匹配到什么呢？匹配到我们，哎这个处理器方法上，那怎么匹配呢？在上面加上一个什么呢？加上一个叫做at request mapping，哎，然后写成一个UI形它就可以了，下面这块呢，加一个斜线啊，加个斜线啊，这应该就可以了，这应该就也就没有问题了啊，但是没有问题的话呢，你想我们前面这个请求它是一个什么，它是一个盖的请求，这个盖的请求也可能也是前前后前后端约定好的，我这块用一个盖的请求来请求你别的方式，你你不要你这个不要，不要让他用别的方式来请求哈，如果我这块用request mapping的话呢，就是什么请求方式都行了，我可以写成一个什么，写成一个叫做get mapping呃，这样的话呢，这个以这个呃，这个资源这个接口就只能以get的方式来进行请求了啊来进行求了哈，那接下来我们测试一下，看一看，把这个方法写好之后来我们在这块呢，重启一下项目。

重启一下我们自己这个9001这个项目，看一看这个验证码是不是就能够获得了啊。来报错了，报什么错？No qualify ban of com，点艾特硅谷什么什么me。嗯，Is valuable is bucket at least one b which qualify as outwear candidate dependcs，什么什么东西报了一个异常，来我给大家解释一下这异常，处理一下这个异常，这个异常提示我们是什么意思呢？就是呃，没有找到这个admin map啊，这个我们的容器中没有一个可用的admin map，它期待的至少应该有一个，但是呢，呃，这个一个都没有是吧？因为在某些环节呢，它是要被自动注入的，为什么找不到呢？这应该跟我们这个麦费有关系哈，你可能会说那我这块看我这个map啊，这个map这块我们不是加上这个艾reporter一个主解吗？但是加它，其加上它其实是为了让我们的项目的其他位置别爆红，对吧？但是别爆红只是idea上，它这个可能是错误的一个提示，怕idea提示太严格了，在别的位置爆红而已是吧，但是如果说你想要真正的让这些map生效的话呢，在这个麦fig这块来指定啊，这块有个map sky，这个map sc呢，要扫描到我所有的map才可以，而扫描所有map的时候，他扫的是com点，艾特硅谷点，智慧校园啊点。

这个智慧校园这个包明显跟我们这个MY智慧校园这个包不一致啊，所以就没有扫到这些map，所以把这个得给它改一下啊，MY智慧校园就可以了啊，这也是一个注意的一个事项。哎，搞定之后回头再来启动，我启动这个项目，看看是一个什么效果啊，在这块再来启动一下。好，这回启动呢，就没有报错，没有报错，再打开我们这个项目啊，我们当前这个项目的，哎呃，端口号是9001，然后我再请求一下9601，来一回车搜来，你看这个时候图片就有了，而且一点击这个图片是可以更换的，哎，所以整个呢在呃这个。

呃，获取验证码图片这个功能我们就完成了，呃，这个感觉呢，跟我跟之前开发项目的感觉是不太一样的，只要前后端约约定好什么呢？约定好这个接口来看这个看system ctrl啊看这只要前后端约定好，我要请求这个路径来获取一个验验证码图片，那我们在后端只要按照这个路径去准备好验证码图片这个方法去给他实现就OK了，前端怎么用啊，我们不用管，后端呢，他也不会去考虑啊，这个运输路径对应的是什么代码，他也不会管，后面是不是Java代码还是什么代码，还是什么还是什么语言写的，呃，后台服务都没有关系。啊，只要这个URL啊，UI对应上了就OK，功能上的数据啊，能够匹配的上啊就OK，好，这是一个验证码功能实现就搞定了。