SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口

雨点打透心脏的1/2处 2022-12-25 05:58 231阅读 0赞

> [SpringBoot+Vue+Mybatis-plus 博客：个人博客介绍及效果展示][SpringBoot_Vue_Mybatis-plus]  
> [SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口][SpringBoot_Vue_Mybatis-plus 1]  
> [SpringBoot+Vue+Mybatis-plus 博客（二）：完成登录的前后端对接、完善左侧菜单栏][SpringBoot_Vue_Mybatis-plus 2]  
> [SpringBoot+Vue+Mybatis-plus 博客（三）：完成搜索及博客列表展示功能前后端][SpringBoot_Vue_Mybatis-plus 3]  
> [SpringBoot+Vue+Mybatis-plus 博客（四）：完成发布文章、编辑文章、删除文章及查询文章功能][SpringBoot_Vue_Mybatis-plus 4]  
> [SpringBoot+Vue+Mybatis-plus 博客（五）：完成分类管理和标签管理前后端对接][SpringBoot_Vue_Mybatis-plus 5]  
> [SpringBoot+Vue+Mybatis-plus 博客（六）：完成评论管理前后端交互][SpringBoot_Vue_Mybatis-plus 6]  
> [SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接][SpringBoot_Vue_Mybatis-plus 7]

### 目录 ###

*  一、搭建前端
 *   *  1、更换npm镜像
     *  2、使用vue-cli3脚手架构建项目
     *  3、创建项目
     *  4、启动项目
     *  5、目录结构
     *  6、用VSCode打开项目
 *  二、登录页面
 *   *  1、使用Element ui
     *  2、整理app.vue
     *  3、删掉一些没有用到的组件
     *  4、新建Login.vue组件
     *  5、在router/index.js引入组件并配置路由
     *  6、启动项目
 *  三、搭建后端
 *   *  1、新建数据库（blog）
     *  2、新建一个普通springboot项目，pom.xml如下
     *  3、修改配置文件
     *  4、开启mapper接口扫描，添加分页插件
     *  5、代码生成
     *  6、启动main方法
     *  7、生成的目录结构
     *  8、测试
     *  9、集成Swagger接口文档
     *  10、统一结果封装
 *  四、完成后端登录接口
 *   *  1、添加springsecurity依赖
     *  2、在TUser实体类里面实现UserDetails接口并重写它的方法
     *  3、创建一个CustomUserServiceImpl类
     *  4、在TUserMapper接口中添加loadUserByUsername方法
     *  5、在TUserMapper.xml中编写sql语句
     *  6、创建一个SecurityConfig类
     *  7、创建LoginController
     *  8、修改TUserController
     *  8、启动项目

# 一、搭建前端 #

## 1、更换npm镜像 ##

打开系统命令窗口，输入：

npm config set registry https://registry.npm.taobao.org

## 2、使用vue-cli3脚手架构建项目 ##

npm install -g @vue/cli

查看是否安装成功：

vue --version

## 3、创建项目 ##

在本地目录输入cmd，待会创建项目成功后会在这里生成文件夹  
![在这里插入图片描述][20201130204223712.png]  
输入命令：

vue create vueblog

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

## 4、启动项目 ##

cd vueblog
    npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]  
启动成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]  
访问 http://localhost:8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]

## 5、目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

## 6、用VSCode打开项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]

# 二、登录页面 #

## 1、使用Element ui ##

官网：[https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

安装：`npm i element-ui -S`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]

在main.js中引入并使用

import ElementUI from 'element-ui';  //引入Element ui
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI); //使用 ElementUI

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]

## 2、整理app.vue ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]

## 3、删掉一些没有用到的组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]

## 4、新建Login.vue组件 ##

<template>
        <div>
            
            
            
            <el-form :rules="rules" :model="loginForm" class="loginContainer" ref="loginForm">
                <h3 class="loginTitle">系统登录</h3>
                
                <el-form-item prop="username">
                    
                    <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-checkbox class="loginRember" v-model="checked">记住我</el-checkbox>
                <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
            </el-form>
        </div>
    </template>
     
    <script>
        export default { 
            name: "Login",
            data(){ 
                return{ 
                    loginForm:{ 
                      username:"admin",
                      password:"123"
                    },
                    checked:true,
                    rules:{ 
                        //required:true:用户名必填 如果没填就弹出““””“"请输入用户名",trigger:blur 触发的方式是blur
                        username:[{ required:true,message:"用户名不能为空",trigger:"blur"}],
                        password:[{ required:true,message:"密码不能为空",trigger:"blur"}],
                    }
                }
            },
            methods:{ 
                submitLogin(){ 
                    this.$refs.loginForm.validate((validate) =>{   // Element自带的校验
                        if(validate){ 
                            alert("submit!");
                        }else { 
                            this.$message.error("请输入所有字段");
                            return false;
                        }
                    })
                }
            }
     
        }
    </script>
     
    <style scoped>
        .loginContainer{ 
            border-radius: 15px;
            background-clip:padding-box;
            margin: 180px auto;
            width: 350px;
            padding: 15px 35px 15px 35px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }
        .loginTitle{ 
            margin: 15px auto 20px auto;
            text-align: center;
            color: #505458;
        }
        .loginRember{ 
            text-align: left;
            margin: 0 0 25px 0;
        }
    </style>

## 5、在router/index.js引入组件并配置路由 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]

## 6、启动项目 ##

npm run serve

访问http://localhost:8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]

# 三、搭建后端 #

## 1、新建数据库（blog） ##

![在这里插入图片描述][2020113022004851.png]  
数据库脚本：

## 2、新建一个普通springboot项目，pom.xml如下 ##

<dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.2.0</version>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-freemarker</artifactId>
            </dependency>
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-generator</artifactId>
                <version>3.2.0</version>
            </dependency>
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
                <version>2.9.2</version>
            </dependency>
    
            
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
                <version>2.9.2</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <scope>runtime</scope>
                <optional>true</optional>
            </dependency>
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>

> pom中导入mybatis plus的jar包，因为后面会涉及到代码生成，所以还需要导入页面模板引擎，这里用的是freemarker。

## 3、修改配置文件 ##

我这里改为yml格式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/blog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
        username: root
        password: xxxx
    mybatis-plus:
      mapper-locations: classpath*:/mapper/**Mapper.xml server: port: 8082

> 这里除了配置数据库的信息，还配置了myabtis plus的mapper的xml文件的扫描路径。

## 4、开启mapper接口扫描，添加分页插件 ##

新建config包，然后在包下新建MybatisPlusConfig类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]

@Configuration
    @EnableTransactionManagement
    @MapperScan("com.xlblog.blog.mapper")
    public class MybatisPlusConfig { 
        @Bean
        public PaginationInterceptor paginationInterceptor() { 
            PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
            return paginationInterceptor;
        }
    }

## 5、代码生成 ##

新建CodeGenerator类：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]

package com.xlblog.blog;
    
    import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
    import com.baomidou.mybatisplus.core.toolkit.StringPool;
    import com.baomidou.mybatisplus.core.toolkit.StringUtils;
    import com.baomidou.mybatisplus.generator.AutoGenerator;
    import com.baomidou.mybatisplus.generator.InjectionConfig;
    import com.baomidou.mybatisplus.generator.config.*;
    import com.baomidou.mybatisplus.generator.config.po.TableInfo;
    import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
    import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Scanner;
    
    // 演示例子，执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
    public class CodeGenerator { 
    
        /** * <p> * 读取控制台内容 * </p> */
        public static String scanner(String tip) { 
            Scanner scanner = new Scanner(System.in);
            StringBuilder help = new StringBuilder();
            help.append("请输入" + tip + "：");
            System.out.println(help.toString());
            if (scanner.hasNext()) { 
                String ipt = scanner.next();
                if (StringUtils.isNotEmpty(ipt)) { 
                    return ipt;
                }
            }
            throw new MybatisPlusException("请输入正确的" + tip + "！");
        }
    
        public static void main(String[] args) { 
            // 代码生成器
            AutoGenerator mpg = new AutoGenerator();
    
            // 全局配置
            GlobalConfig gc = new GlobalConfig();
            String projectPath = System.getProperty("user.dir");
            gc.setOutputDir(projectPath + "/src/main/java");
    // gc.setOutputDir("D:\\test");
            gc.setAuthor("关注公众号：小L星光");
            gc.setOpen(false);
            gc.setSwagger2(true); //实体属性 Swagger2 注解
            gc.setServiceName("%sService");
            mpg.setGlobalConfig(gc);
    
            // 数据源配置
            DataSourceConfig dsc = new DataSourceConfig();
            dsc.setUrl("jdbc:mysql://localhost:3306/blog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC");
            // dsc.setSchemaName("public");
            dsc.setDriverName("com.mysql.cj.jdbc.Driver");
            dsc.setUsername("root");
            dsc.setPassword("123456");
            mpg.setDataSource(dsc);
    
            // 包配置
            PackageConfig pc = new PackageConfig();
            pc.setModuleName(null);
            pc.setParent("com.xlblog.blog");
            mpg.setPackageInfo(pc);
    
            // 自定义配置
            InjectionConfig cfg = new InjectionConfig() { 
                @Override
                public void initMap() { 
                    // to do nothing
                }
            };
    
            // 如果模板引擎是 freemarker
            String templatePath = "/templates/mapper.xml.ftl";
            // 如果模板引擎是 velocity
            // String templatePath = "/templates/mapper.xml.vm";
    
            // 自定义输出配置
            List<FileOutConfig> focList = new ArrayList<>();
            // 自定义配置会被优先输出
            focList.add(new FileOutConfig(templatePath) { 
                @Override
                public String outputFile(TableInfo tableInfo) { 
                    // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                    return projectPath + "/src/main/resources/mapper/"
                            + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
                }
            });
    
            cfg.setFileOutConfigList(focList);
            mpg.setCfg(cfg);
    
            // 配置模板
            TemplateConfig templateConfig = new TemplateConfig();
    
            templateConfig.setXml(null);
            mpg.setTemplate(templateConfig);
    
            // 策略配置
            StrategyConfig strategy = new StrategyConfig();
            strategy.setNaming(NamingStrategy.underline_to_camel);
            strategy.setColumnNaming(NamingStrategy.underline_to_camel);
            strategy.setEntityLombokModel(true);
            strategy.setRestControllerStyle(true);
            strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
            strategy.setControllerMappingHyphenStyle(true);
            strategy.setTablePrefix("m_");
            mpg.setStrategy(strategy);
            mpg.setTemplateEngine(new FreemarkerTemplateEngine());
            mpg.execute();
        }
    }

需要修改的地方：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 19]

## 6、启动main方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 20]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 21]

## 7、生成的目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 22]  
把其他表也生成一下：

t_blog,t_blog_tags,t_comment,t_contact,t_links,t_role,t_tag,t_traffic,t_type,t_user_role

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 23]

## 8、测试 ##

在UserController测试

@RestController
    @RequestMapping("/t-user")
    public class TUserController { 
        @Autowired
        TUserService tUserService;
        @GetMapping("/{id}")
        public Object test(@PathVariable("id") Long id) { 
            return tUserService.getById(id);
        }
    }

访问：http://localhost:8082/t-user/1  
查出数据，整合成功！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 24]

## 9、集成Swagger接口文档 ##

导入依赖（前面的pom文件已经导入，这里就不用再导入了，贴出来看看）：

<dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
                <version>2.9.2</version>
            </dependency>
    
            
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
                <version>2.9.2</version>
            </dependency>

新建SwaggerConfig 配置类：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 25]

package com.xlblog.blog.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import springfox.documentation.builders.RequestHandlerSelectors;
    import springfox.documentation.service.ApiInfo;
    import springfox.documentation.service.Contact;
    import springfox.documentation.spi.DocumentationType;
    import springfox.documentation.spring.web.plugins.Docket;
    import springfox.documentation.swagger2.annotations.EnableSwagger2;
    
    import java.util.ArrayList;
    
    @Configuration
    @EnableSwagger2  //开启swagger2
    public class SwaggerConfig { 
    
        //配置了Swagger的Docker的Bean实例
        @Bean
        public Docket docket(){ 
            return new Docket(DocumentationType.SWAGGER_2)
                    .apiInfo(apiInfo())
                    .enable(true) //配置是否启用Swagger，如果是false，在浏览器将无法访问
                    .select()// 通过.select()方法，去配置扫描接口,RequestHandlerSelectors配置如何扫描接口
                    .apis(RequestHandlerSelectors.basePackage("com.xlblog.blog.controller"))
                    .build();
        }
    
        //配置swagger信息 apiInfo
        private ApiInfo apiInfo(){ 
            //作者信息
            Contact DEFAULT_CONTACT = new Contact("xl", "http://baidu.com", "xxx@qq.com");
    
            return new ApiInfo(
                    "api文档",
                    "api描述信息",
                    "v1.0",
                    "http://localhost:8082",
                    DEFAULT_CONTACT,
                    "Apache 2.0",
                    "http://www.apache.org/licenses/LICENSE-2.0",
                    new ArrayList());
    
        }
    }

启动项目后，测试访问：http://localhost:8082/swagger-ui.html

显示下图，则说明集成成功！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 26]

## 10、统一结果封装 ##

这里用到了一个Result的类，这个用于异步统一返回的结果封装。一般来说，结果里面有几个要素必要的：

*  是否成功，可用code表示（如200表示成功，400表示异常）
 *  结果消息
 *  结果数据

在utils包下新建Result类:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 27]

package com.xlblog.blog.utils;
    
    import lombok.Data;
    
    import java.io.Serializable;
    
    @Data
    public class Result implements Serializable { 
        private String code;
        private String msg;
        private Object data;
        public static Result succ(Object data) { 
            Result m = new Result();
            m.setCode("0");
            m.setData(data);
            m.setMsg("操作成功");
            return m;
        }
        public static Result succ(String mess, Object data) { 
            Result m = new Result();
            m.setCode("0");
            m.setData(data);
            m.setMsg(mess);
            return m;
        }
        public static Result fail(String mess) { 
            Result m = new Result();
            m.setCode("-1");
            m.setData(null);
            m.setMsg(mess);
            return m;
        }
        public static Result fail(String mess, Object data) { 
            Result m = new Result();
            m.setCode("-1");
            m.setData(data);
            m.setMsg(mess);
            return m;
        }
    }

# 四、完成后端登录接口 #

## 1、添加springsecurity依赖 ##

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-security</artifactId>
            </dependency>

## 2、在TUser实体类里面实现UserDetails接口并重写它的方法 ##

用Spring Security自定义登录接口的话就需要让TUser类实现UserDetails，如下所示：

UserDetails

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 28]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 29]

package com.xlblog.blog.entity;
    
    import java.time.LocalDateTime;
    import java.io.Serializable;
    import java.util.Collection;
    
    import io.swagger.annotations.ApiModel;
    import io.swagger.annotations.ApiModelProperty;
    import jdk.jfr.Enabled;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    import org.springframework.security.core.GrantedAuthority;
    import org.springframework.security.core.userdetails.UserDetails;
    
    /** * <p> * * </p> * * @author 关注公众号：小L星光 * @since 2020-11-30 */
    @Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    @ApiModel(value="TUser对象", description="")
    public class TUser implements Serializable,UserDetails { 
    
        private static final long serialVersionUID = 1L;
    
        @ApiModelProperty(value = "用户id")
        private Long id;
    
        @ApiModelProperty(value = "头像")
        private String avatar;
    
        @ApiModelProperty(value = "创建时间")
        private LocalDateTime createTime;
    
        @ApiModelProperty(value = "邮箱")
        private String email;
    
        @ApiModelProperty(value = "昵称")
        private String nickname;
    
        @ApiModelProperty(value = "密码")
        private String password;
    
        @ApiModelProperty(value = "角色")
        private Integer type;
    
        @ApiModelProperty(value = "更新时间")
        private LocalDateTime updateTime;
    
        @ApiModelProperty(value = "用户名")
        private String username;
    
    
        @Override
        public Collection<? extends GrantedAuthority> getAuthorities() { 
            return null;
        }
        @Override
        public boolean isAccountNonExpired() { 
            return true;
        }
        @Override
        public boolean isAccountNonLocked() { 
            return true;
        }
        @Override
        public boolean isCredentialsNonExpired() { 
            return true;
        }
        @Override
        public boolean isEnabled() { 
            return true;
        }
    }

## 3、创建一个CustomUserServiceImpl类 ##

在CustomUserServiceImpl类中实现UserDetailsService类，并重写了该类的loadUserByUsername方法，把TUserMapper用 @Autowired 注解注入进来

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 30]

@Service
    public class CustomUserServiceImpl implements UserDetailsService { 
        @Resource
        TUserMapper tUserMapper;
    
        @Override
        public UserDetails loadUserByUsername(String s) throws UsernameNotFoundException { 
            TUser tUser = tUserMapper.loadUserByUsername(s);
            if (s == null){   //如果用户名不存在，就抛出下面的信息
                throw new UsernameNotFoundException("用户名不存在！");
            }
            //用户存在的话就返回hr对象
            return tUser;
        }
    }

## 4、在TUserMapper接口中添加loadUserByUsername方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 31]

TUser loadUserByUsername(String username);

## 5、在TUserMapper.xml中编写sql语句 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 32]

<resultMap id="BaseResultMap" type="com.xlblog.blog.entity.TUser" >
            <id column="id" property="id"  />
            <result column="avatar" property="avatar" />
            <result column="createTime" property="createTime" />
            <result column="email" property="email"  />
            <result column="nickname" property="nickname"  />
            <result column="password" property="password"  />
            <result column="type" property="type"  />
            <result column="updateTime" property="updateTime"  />
            <result column="username" property="username"  />
        </resultMap>
    
       
        <select id="loadUserByUsername" resultMap="BaseResultMap">
            select * from t_user where t_user=#{ username}
       </select>

## 6、创建一个SecurityConfig类 ##

重新创建一个config包，并创建一个SecurityConfig类，该类继承了WebSecurityConfigurerAdapter

package com.xlblog.blog.config;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.xlblog.blog.entity.TUser;
    import com.xlblog.blog.service.impl.CustomUserServiceImpl;
    import com.xlblog.blog.utils.RespBean;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.authentication.BadCredentialsException;
    import org.springframework.security.authentication.CredentialsExpiredException;
    import org.springframework.security.authentication.DisabledException;
    import org.springframework.security.authentication.LockedException;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.core.Authentication;
    import org.springframework.security.core.AuthenticationException;
    import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    import org.springframework.security.crypto.password.PasswordEncoder;
    import org.springframework.security.web.authentication.AuthenticationFailureHandler;
    import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
    import org.springframework.security.web.authentication.logout.LogoutSuccessHandler;
    
    import javax.annotation.Resource;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @Configuration
    public class SecurityConfig extends WebSecurityConfigurerAdapter { 
    
        @Resource
        CustomUserServiceImpl customUserService;
        @Bean
        PasswordEncoder passwordEncoder(){ 
            return new BCryptPasswordEncoder();
        }
    
        //要有一个configure方法吧hrService整进来
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception{ 
            auth.userDetailsService(customUserService);
        }
    
        @Override
        protected void configure(HttpSecurity http) throws Exception { 
            http.authorizeRequests()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .usernameParameter("username")
                    .passwordParameter("password")
                    .loginProcessingUrl("/doLogin")
                    .loginPage("/login")
                    .successHandler(new AuthenticationSuccessHandler() { 
                        @Override
                        public void onAuthenticationSuccess(HttpServletRequest req, HttpServletResponse resp, Authentication authentication) throws IOException, ServletException { 
                            //如果登录成功就返回一段json
                            resp.setContentType("application/json;charset=utf-8");
                            //这是往出写的
                            PrintWriter out = resp.getWriter();
                            //登录成功的hr对象
                            TUser user = (TUser)authentication.getPrincipal();
                            //为了安全，这里返回给前端时将密码设置为null
                            user.setPassword(null);
                            RespBean ok = RespBean.ok("登录成功！",user);
                            //把Hr写成字符串
                            String s = new ObjectMapper().writeValueAsString(ok);
                            //把字符串写出去
                            out.write(s);
                            out.flush();
                            out.close();
                        }
                    })
                    .failureHandler(new AuthenticationFailureHandler() { 
                        @Override
                        public void onAuthenticationFailure(HttpServletRequest req, HttpServletResponse resp,
                                                            AuthenticationException exception) throws IOException, ServletException { 
                            //如果登录失败也返回一段json
                            resp.setContentType("application/json;charset=utf-8");
                            //设置状态码
                            //resp.setStatus(401);
                            
                            //这是往出写的
                            PrintWriter out = resp.getWriter();
                            RespBean respBean = RespBean.error("登录失败！");
                            if(exception instanceof LockedException){ 
                                respBean.setMsg("账户被锁定，请联系管理员！");
                            }else if (exception instanceof CredentialsExpiredException){ 
                                respBean.setMsg("密码过期，请联系管理员！");
                            }else if (exception instanceof DisabledException){ 
                                respBean.setMsg("账户被禁用，请联系管理员！");
                            }else if (exception instanceof BadCredentialsException){ 
                                respBean.setMsg("用户名或者密码输入错误，请重新输入！");
                            }
                            out.write(new ObjectMapper().writeValueAsString(respBean));
                            out.flush();
                            out.close();
    
                        }
                    })
                    .permitAll()
                    .and()
                    .logout()
                    .logoutSuccessHandler(new LogoutSuccessHandler() { 
                        @Override
                        public void onLogoutSuccess(HttpServletRequest req, HttpServletResponse resp,
                                                    Authentication authentication) throws IOException, ServletException { 
                            resp.setContentType("application/json;charset=utf-8");
                            PrintWriter out = resp.getWriter();
                            out.write(new ObjectMapper().writeValueAsString(RespBean.ok("注销成功！")));
                            out.flush();
                            out.close();
                        }
                    })
                    .permitAll()
                    .and()
                    .csrf().disable();
        }
    }

## 7、创建LoginController ##

未登录时访问除登录的路由，到来到这里 然后提示未登录。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 33]

@RestController
    public class LoginController { 
        @GetMapping("/login")
        public RespBean login(){ 
            return RespBean.error("尚未登录，请先登录！");
        }
    }

## 8、修改TUserController ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 34]

@GetMapping("/hello")
        public RespBean test() { 
            return RespBean.ok("hello");
        }

## 8、启动项目 ##

未登录时访问：http://localhost:8082/hello  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 35]  
登录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 36]  
登录后再访问 /hello

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 37]

--------------------

关注【小L星光】回复 “博客” 即可获整个项目源码 ~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 38]

[SpringBoot_Vue_Mybatis-plus]: https://blog.csdn.net/m0_45234510/article/details/114599074
[SpringBoot_Vue_Mybatis-plus 1]: https://blog.csdn.net/m0_45234510/article/details/110405346
[SpringBoot_Vue_Mybatis-plus 2]: https://blog.csdn.net/m0_45234510/article/details/110494715
[SpringBoot_Vue_Mybatis-plus 3]: https://blog.csdn.net/m0_45234510/article/details/110932322
[SpringBoot_Vue_Mybatis-plus 4]: https://blog.csdn.net/m0_45234510/article/details/111075386
[SpringBoot_Vue_Mybatis-plus 5]: https://blog.csdn.net/m0_45234510/article/details/112315926
[SpringBoot_Vue_Mybatis-plus 6]: https://blog.csdn.net/m0_45234510/article/details/114150638
[SpringBoot_Vue_Mybatis-plus 7]: https://blog.csdn.net/m0_45234510/article/details/114155484
[20201130204223712.png]: /images/20221120/5234e3ec2089445c88d3b65022cb19ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221120/b057c55e527144cd90f0217550bed6e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221120/8d2b376eff8443b7933bc9be783dd4d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221120/05c315dc668543bc81c320b5b90cc7c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221120/d7091169e45e4042917abd35868504b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221120/3cd69348a8e644c6a636a111c306ff35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20221120/50a7e9d673a24e4482f7b6982facd289.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20221120/4e46b378eef64b4d85c99e8aa8ae65b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20221120/215173901fac434798ab1c032415f356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20221120/59b10372e9f3488fba835771017f6d19.png
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20221120/cd920d7c064b4753a47429db7988f4db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20221120/dc2021a07da8456aad8b687169bedd78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20221120/04ea5f7432f047d9b3bb0ccc08ecc82a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20221120/1584700123e2488fbd151a0aa3a98342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20221120/9104fba0de87430eb4f248176f3ff597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20221120/aa4fd28384314dd4ae27c673ae1bae1b.png
[2020113022004851.png]: /images/20221120/724bfd188ca64c4897b594522fc00a13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]: /images/20221120/d9b1bcb466344019b39011c22382e830.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]: /images/20221120/823b28adb8944b93b90c7653179e9eb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]: /images/20221120/cd278f66105f4ad38bd30133d38a7386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 18]: /images/20221120/8615ecb882da44108a1690c71203554a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 19]: /images/20221120/c7a319bad71b401a9295a0e807a2cf60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 20]: /images/20221120/43bb1797f5314484a9e268ef403b88a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 21]: /images/20221120/964b57a173bd4bfa960656980c4a85d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 22]: /images/20221120/ade74e0fef0b4f39b41b0bde7b66cbde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 23]: /images/20221120/b59437aa11304814baa01d6ec6d45157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 24]: /images/20221120/73e4d1812b5643048a48e2f9c467c238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 25]: /images/20221120/b282d413dacf45ea9de9a175fde0fe27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 26]: /images/20221120/bfa9b206e8514fc3b0c413d0ed22e2af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 27]: /images/20221120/4bac211765b64b778ef644a2fe8bc78d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 28]: /images/20221120/8605fd2fa3124f8d8b9745215c3841f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 29]: /images/20221120/d7e0a3b1c70b4258bf2ef2d5a2644d9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 30]: /images/20221120/4ebe69a0247446969160437b46dd55b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 31]: /images/20221120/1cf08e780c3747a880b29e69e906e224.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 32]: /images/20221120/d9661c80eefc43b4bf8ab9789254fc85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 33]: /images/20221120/70ba9807dcb14285820e3198bda51683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 34]: /images/20221120/775a056d1103481dbf9ff521bce8a04c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 35]: /images/20221120/6c9977d2b85c4a9f893d0596b2906787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 36]: /images/20221120/90ef0a3a30b74de9bc05b8c75033e0f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 37]: /images/20221120/9a86b56f95f146b097097e62639104fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 38]: /images/20221120/a8fc4795222f472bb4dc83657cc1dfcf.png