project-slwl-admin-vue部署前端

1、部署前端

前面已经完成了验证码功能的开发，下面我们将基于前端页面进行测试，所以需要将前端部署起立，部署前端的步骤：
第一步：拉取【project-slwl-admin-vue】代码，并且创建develop分支。

第二步：修改.env.production.stu文件，设置前后端交互接口改为本机地址和端口：

第三步，提交代码到git中，使用Jenkins进行部署：

访问地址进行测试：http://admin.sl-express.com/

查看发送的请求：

2、实现登录

获取验证码后，用户输入用户名和密码进行登录：

2.1、实现分析

在登录业务功能中，需要对用户输入的用户名、密码以及验证码进行校验，只有全部校验通过后才能是登录成功。
在登录成功后，需要生成用户的登录凭证，也就是token，在项目中，采用jwt的方式生成token。
在后续的请求中，前端需要将token放置到请求头中发送到服务端，服务端需要对token进行校验。

提交的参数：

响应数据结构参考swagger文档：

3.4.2、具体实现

    /**
     * 登录
     *
     * @param login 用户登录信息
     * @return 登录结果
     */
    @Override
    public R<LoginDTO> login(LoginParamDTO login) {
        //1. 校验参数
        if (ObjectUtil.hasEmpty(login.getCode(), login.getKey())) {
            return R.error("验证码不能为空");
        }
        if (ObjectUtil.hasEmpty(login.getAccount(), login.getPassword())) {
            return R.error("用户名、密码不能为空");
        }

        //2. 校验验证码
        String redisKey = CAPTCHA_REDIS_PREFIX + login.getKey();
        String redisValue = this.stringRedisTemplate.opsForValue().get(redisKey);
        if (ObjectUtil.isEmpty(redisValue)) {
            return R.error("验证码已过期");
        }
        //验证码只能使用一次，所以需要将验证码删除
        this.stringRedisTemplate.delete(redisKey);
        boolean verify = new MathGenerator().verify(redisValue, login.getCode());
        if (!verify) {
            return R.error("验证码不正确");
        }

        //3. 校验用户名密码，校验通过生成token
        return this.login(login.getAccount(), login.getPassword());
    }

    /**
     * 登录获取token
     *
     * @param account  账号
     * @param password 密码
     * @return 登录信息
     */
    @Override
    public R<LoginDTO> login(String account, String password) {
        //说明：由于后台系统的账号在后面会由【权限管家】系统中管理，由于【权限管家】目前还没学习，所以这里的登录先做【模拟实现】
        if (!(StrUtil.equals(account, "shenlingadmin") && StrUtil.equals(password, "123456"))) {
            return R.error("用户名或密码错误");
        }

        LoginDTO loginDTO = new LoginDTO();

        //设置token
        Token token = new Token();
        token.setToken("eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxMDI0NzA1NzA5MjU1NzczMzQ1IiwiYWNjb3VudCI6InNoZW5saW5nYWRtaW4iLCJuYW1lIjoi56We6aKG566h55CG5ZGYIiwib3JnaWQiOjEwMjQ3MDQ4NDQ0ODY3NTY2NDEsInN0YXRpb25pZCI6MTAyNDcwNTQ4OTQzNjQ5NDcyMSwiYWRtaW5pc3RyYXRvciI6ZmFsc2UsImV4cCI6MTY4MDc5NjE5OX0.W4RrB4p5YmjgEcdyGbbL4UrdWFirFbUu_e8Pgwxgr6vBVnj5z40JcFG4X3nIbrIXcSXUldi6oEuNfqAtZ9dUUw");
        token.setExpire(9999);
        loginDTO.setToken(token);

        //设置用户信息
        UserDTO userDTO = new UserDTO();
        userDTO.setAccount(account);
        userDTO.setName("神领管理员");
        //其它属性暂时不设置
        loginDTO.setUser(userDTO);

        return R.success(loginDTO);

    }

在Controller中调用：

    /**
     * 管理端登录
     *
     * @param login 登录信息
     * @return 用户信息
     */
    @PostMapping(value = "/login")
    @ApiOperation(value = "登录", notes = "登录")
    public R<LoginDTO> login(@RequestBody LoginParamDTO login) {
        return this.authService.login(login);
    }

2.2、测试

基于swagger接口进行测试：


基于前端测试：

说明：
基于前端测试目前只能测试登录接口，在登录成功后还无法正常进入后台首页，原因是在com.sl.ms.web.manager.config.ManagerWebConfig中配置了com.sl.transport.common.interceptor.UserInterceptor拦截器，这个拦截器是对请求是否来源于网关的校验，而目前我们还没有网关，所以暂时先不测试成功跳转首页。