Vue新手实战2+Swagger配置

1.登录界面

在ElementUI网页中复制表单之后，就进行表单验证和验证码的加载，首先得安装axios插件，更好的对前后端进行操作。

npm -i axios --save

在每次网页加载时都需要从后端获取验证码，所以在created函数中写加载验证码的操作用来随机生成验证码。

getSrc(){
                let _this = this;
                this.$axios.get("http://localhost:8087/user/getImg?time="+Math.random()).then(res=>{
                    console.log(res.data);
                    this.url = res.data;
                })
            }

在后端只需要引入VerifyCode工具类在com.sunset.system.utils包下面，然后获取验证码就ok啦！

  @GetMapping("/getImg")
    public String getImg(HttpServletRequest request) throws IOException
    {
        String code = VerifyCodeUtils.generateVerifyCode(4);
        request.getServletContext().setAttribute("code",code);
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        VerifyCodeUtils.outputImage(100,30,byteArrayOutputStream,code);
        return "data:image/png;base64," + Base64Utils.encodeToString(byteArrayOutputStream.toByteArray());
    }

此步骤先生成一个4位的验证码，然后将验证码放入servletContext中并且将验证码转化为Base64编码，在转化时需要加入前缀data:image/png;base64,才能保证正确的将字符串传递到前端。还有两个项目在交互时需要加上@CrossOrigin注解用于接受跨域请求。
同时在前端将字符串赋值给url即可在前端看到验证码。

2.表单验证

我想做一个验证，当用户什么都不输入则需要提示为空，但是因为粗心，在标签写了两个ref=“” 导致前端一直报错，以后应该注意一下这类问题。
使用axios进行前后端交互的时候一定一定要注意里面的url的书写是否正确，还有post和get方法的使用，这里参考如下博客：
axios使用

3.启用SwaggerUI2

首先在com.sunset.system新建包config，然后建立Java类 SwaggerConfiguration，输入如下代码：

@Configuration
@EnableSwagger2
public class SwaggerConfiguration {
    @Bean
    public Docket createRestApi(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.xxxxx.system.controller"))
                .paths(PathSelectors.any())
                .build();
    }
    private ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("xxxxxx")
                .description("xxxxxxx")
                .termsOfServiceUrl("http://www.baidu.com")
                .contact(new Contact("sunset","http://www.baidu.com","abc@qq.com"))
                .version("1.0")
                .build();
    }
}

在主启动类上加上EnableSwagger注解即可。每次在后端调试时就可以用
调试后端程序