登录功能的实现

一、后端的代码实现逻辑

验证码部分：

        CaptchaController：

                1.判断是否打开验证开关，如果没有打开则返回空字符串

                2..若验证开关打开，则生成uuid，创建key对象和image对象

                3. 生成验证码 

                        captchaType：验证码的表达式，如1+1=？@2

                         capStr被@分割，如：1+1=？

                         code 如：2

                4.把验证码写入redis缓存数据库中

                5.转换信息流，生成jpg对象，和uuid封装到ajax中发到前端

登录部分：            

        SysLoginController

                获取@RequestBody，即前端的username,password,code,uuid

                调用service层获取令牌，封装到ajax中返回到前台

        SysLoginService .login   

                1.验证是否打开验证开关

                2.校验验证码是否正确

                3..验证用户名密码是否正确

                        如果不正确会抛出异常

                4.记录登陆成功的日志，并异步执行一个insert语句（具体原理日后补充）            

                5.获取用户信息

                6.日志记录该用户最近的登录信息，如ip，电脑系统等信息

                7.向controller返回token。

          SysLoginService .validateCaptcha

                //校验验证码

                1.  根据字符串+uuid的key，从redis中读取缓存

                2.从redis中删除该验证码的数据缓存

                3.判断验证码是否为空，null则抛出异常并记录日志信息

                4.判断验证码是否正确，false则跑出异常并记录日志信息

        二、前段代码实现

                login.vue

                        1.自动触发create方法，create调用getCode和getCookie方法

                        2.getcode方法调用getCodeImg方法

                        3.getCodeImg方法：调用request方法，根据对应的url和method跟后台连接

                        4.返回到getCode中，把获得的gif图片显示到前端中,把uuid存储在form中

                        5.getCookie方法，查询cookies中的信息，如果没有则获取input中的值，

                        6.点击登录按钮触发handleLoginf方法,根据loading的状态判断是否正在登陆，根据是否       选中记住密码决定是否向cookies中写入账号名与密码信息，

                        7.跳转到Login方法 ,获取form表单传来的值，并创建Promise对象，执行login.js中的login方法，将4个变量封装到data中，传到/login中。