Vue修炼手册 Day03

最新推荐文章于 2025-04-14 22:26:17 发布

闪闪Utaha

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量1.5k

点赞数 2

分类专栏： # Vue 文章标签： shiro vue redis java spring boot

本文链接：https://blog.youkuaiyun.com/weixin_44233253/article/details/116422877

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

Vue修炼手册第三章

Vue+ElementUI+SpringBoot的简单登录案例

Vue+ElementUI+SpringBoot的简单登录案例

1 设计登录页面

1.1 创建一个登录页面

<template>
    <!--登陆的容器-->
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/1.jpg" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form class="login_form" :model="loginFormData" :rules="myRules" ref="loginFormRef">
                <el-form-item prop="loginName">
                    <el-input  prefix-icon="el-icon-user" v-model="loginFormData.loginName"  placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginFormData.password"  prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary">登录</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

CSS代码：
这里的Scoped是指当前页面生效，如果想要项目全局CSS生效，那么我们需要书写全局CSS文件并引入，具体实现请接着往下看

<style scoped>
    .login_container{
        background-image:url("../assets/薇尔莉特.jpg");
        background-size:100% 130%;
        height: 100%;
    }

    .login_container{
        background-color: #2b5b6b;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background: rgba(255,255,255,0.8);
        border-radius: 3px;
        /**绝对定位*/
        position: absolute;
        /**左偏移*/
        left: 50%;
        /**上偏移*/
        top: 50%;
        /**减去容器自身的宽高*/
        transform: translate(-50%, -50%);
    }
    .login_box>.avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 5px;
        /**阴影*/
        box-shadow: 0 0 10px #ddd;
        /**绝对定位*/
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: pink;
    }
    .login_box>.avatar_box>img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
    /*表单CSS*/
    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
</style>

此时，我们会发现我们的.login_container高度无效，我们需要在Vue项目下的assets文件夹内创建一个全局的CSS

html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

然后在main.js文件中引入全局CSS

import './assets/css/global.css'

1.2 登录表单校验

对应关系如图所示，我们在绑定完成后，可以在script中书写校验规则。
在这里插入图片描述
Script代码：

<script>
    export default {
        name:"login",
        methods:{
            //重置方法
            resetForm(){
                //表单重置
                this.$refs.loginFormRef.resetFields();
            },
        },
        data() {
            return {
                loginFormData:{
                    loginName: "admin",
                    password: "123456"
                },
                myRules:{
                    loginName:[
                        {required:true,message:"账号不能为空",trigger:"blur"},
                        {min:5,max:16,message: "账号长度必须为5-16",trigger: "blur"}
                    ],
                    password:[
                        {required: true,message:"密码不能为空",trigger:"blur"},
                        {min:6,max:16,message: "密码长度必须为6-16",trigger: "blur"}
                    ]
                }
            };
        },
    }
</script>

2 后台搭建

2.1 创建Maven工程引入依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </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-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.11</version>
        </dependency>
        <!--swagger2的相关依赖-->
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.6</version>
        </dependency>

        <!--shiro的依赖-->
        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-spring-boot-starter</artifactId>
            <version>1.7.1</version>
        </dependency>
    </dependencies>

2.2 使用MybatisPlus的代码生成器

public class CodeGenerator {

    /**
     * <p>
     * 读取控制台内容
     * </p>
     */
    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.setAuthor("Utaha");
        gc.setOpen(false);
        gc.setServiceName("%sService");
        gc.setMapperName("%sDao");
        gc.setSwagger2(true); //实体属性 Swagger2 注解
        mpg.setGlobalConfig(gc);

        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/springboot-vue?serverTimezone=Asia/Shanghai&useUnicode=true&useSSL=false&characterEncoding=utf8");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("root");
        mpg.setDataSource(dsc);

        // 包配置
        PackageConfig pc = new PackageConfig();
        pc.setParent("com.fyk");
        pc.setMapper("dao");
        mpg.setPackageInfo(pc);

        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };
        
        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.setControllerMappingHyphenStyle(true);
        strategy.setTablePrefix(  "acl_");
        mpg.setStrategy(strategy);
        mpg.execute();
    }

}

2.3 书写配置类

①Redis的配置类

@EnableCaching
@Configuration
public class RedisConfig extends CachingConfigurerSupport {
    //比如验证码
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
        RedisTemplate<String, Object> template = new RedisTemplate<>();
        RedisSerializer<String> redisSerializer = new StringRedisSerializer();
        Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);
        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        jackson2JsonRedisSerializer.setObjectMapper(om);
        template.setConnectionFactory(factory);
        //key序列化方式
        template.setKeySerializer(redisSerializer);
        //value序列化
        template.setValueSerializer(jackson2JsonRedisSerializer);
        //value hashmap序列化
        template.setHashValueSerializer(jackson2JsonRedisSerializer);
        return template;
    }

    @Bean
    public CacheManager cacheManager(RedisConnectionFactory factory) {
        RedisSerializer<String> redisSerializer = new StringRedisSerializer();
        Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);
        //解决查询缓存转换异常的问题
        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        jackson2JsonRedisSerializer.setObjectMapper(om);
        // 配置序列化（解决乱码的问题）,过期时间600秒
        RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
                .entryTtl(Duration.ofSeconds(600)) //缓存过期10分钟 ---- 业务需求。
                .serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(redisSerializer))//设置key的序列化方式
                .serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(jackson2JsonRedisSerializer)) //设置value的序列化
                .disableCachingNullValues();
        RedisCacheManager cacheManager = RedisCacheManager.builder(factory)
                .cacheDefaults(config)
                .build();
        return cacheManager;
    }
}

②Swagger2的配置类

@Configuration
public class SwaggerConfig {

    //获取swagger2的实例对象docket
    @Bean
    public Docket getDocket() {
        Docket docket = new Docket(DocumentationType.SWAGGER_2)
                .groupName("QY129")
                .apiInfo(apiInfo())
                .select()//设置哪些包下的类生产api接口文档
                .apis(RequestHandlerSelectors.basePackage("com.fyk.controller"))
                //设置哪些请求路径生产接口文档
                .paths(PathSelectors.any())
                .build();
        return docket;
    }

    private ApiInfo apiInfo() {
        Contact DEFAULT_CONTACT = new Contact("闪闪Utaha", "https://blog.youkuaiyun.com/weixin_44233253", "utah24@163.com");
        ApiInfo apiInfo = new ApiInfo("TenliTenliAPI接口文档", "TenliTenli系统API接口文档", "1.0", "https://blog.youkuaiyun.com/weixin_44233253",
                DEFAULT_CONTACT, "Apache 2.0",
                "http://www.apache.org/licenses/LICENSE-2.0", new
                ArrayList<VendorExtension>());
        return apiInfo;
    }
}

③Shiro配置类

@Configuration
public class ShiroConfig {

    @Bean("securityManager")
    public DefaultWebSecurityManager securityManager(Realm myRealm){
        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
        securityManager.setRealm(myRealm);
        return securityManager;
    }

    @Bean(value = "myRealm")
    public Realm getRealm(CredentialsMatcher credentialsMatcher){
        MyRealm myRealm = new MyRealm();
        myRealm.setCredentialsMatcher(credentialsMatcher);
        return myRealm;
    }

    @Bean(value = "credentialsMatcher")
    public CredentialsMatcher getCredentialsMatcher(){
        HashedCredentialsMatcher credentialsMatcher = new HashedCredentialsMatcher();
        credentialsMatcher.setHashIterations(1024);
        credentialsMatcher.setHashAlgorithmName("MD5");
        return credentialsMatcher;
    }


    @Bean("shiroFilter")
    public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager){
        ShiroFilterFactoryBean shiroFilterFactoryBean=new ShiroFilterFactoryBean();
        shiroFilterFactoryBean.setSecurityManager(securityManager);
        Map<String,String> map=new HashMap<>();
        map.put("/sys/login","anon"); //anon表示放行
        map.put("/doc.html","anon"); //anon表示放行
        map.put("/webjars/**","anon"); //anon表示放行
        map.put("/swagger-resources/**","anon"); //anon表示放行
        map.put("/sys/login/logout","anon"); //anon表示放行
        map.put("/v2/**","anon"); //anon表示放行
        map.put("/**","authc"); //默认从session获取登陆者的信息。
        shiroFilterFactoryBean.setFilterChainDefinitionMap(map);
        return shiroFilterFactoryBean;
    }


    @Bean//注册filter组件
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean<Filter> filterRegistrationBean = new FilterRegistrationBean<>();
        filterRegistrationBean.setName("shiroFilter");
        filterRegistrationBean.setFilter(new DelegatingFilterProxy());
        filterRegistrationBean.addUrlPatterns("/*");

        return filterRegistrationBean;
    }

/*    public static void main(String[] args){
        String s = UUID.randomUUID().toString().replace("-", "");
        System.out.println(s);
        Md5Hash hash = new Md5Hash("123456", s, 1024);
        System.out.println(hash);
    }*/
}

④Shiro的Realm配置

public class MyRealm extends AuthorizingRealm {
    @Resource
    private UserService userService;
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
        return null;
    }

    /**
     * 登录认证
     * @param authenticationToken
     * @return
     * @throws AuthenticationException
     */
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
        //获取用户的用户名
        String username = authenticationToken.getPrincipal().toString();
        //根据用户名获取用户
        QueryWrapper<User> wrapper=new QueryWrapper<>();
        wrapper.eq("username",username);
        User user = userService.getOne(wrapper);
        if (user!=null){
            ByteSource salt= ByteSource.Util.bytes(user.getSalt());
            SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user, user.getPassword(), salt, this.getName());
            return info;
        }
        return null;
    }
}

2.4 业务层代码

@Service
public class UserServiceImpl extends ServiceImpl<UserDao, User> implements UserService {

    @Resource
    private UserDao userDao;

    @Autowired
    private RedisTemplate redisTemplate;

    @Override
    public CommonResult findByNameAndPassword(LoginVo loginVo) {
        Subject subject = SecurityUtils.getSubject();
        UsernamePasswordToken token = new UsernamePasswordToken(loginVo.getLoginName(), loginVo.getPassword());
        try {
            subject.login(token);
            Object user = subject.getPrincipal();
            //把用户的信息保存在Redis中
            //随机产生一个key
            String key = UUID.randomUUID().toString().replace("-", "");
            redisTemplate.opsForValue().set(key, user, 24, TimeUnit.HOURS);
            return new CommonResult(2000, "登陆成功", key);
        }catch (Exception e){
            e.printStackTrace();
            return new CommonResult(5000, "登陆失败", null);
        }
    }
}

2.5 Controller层代码

@RestController
@RequestMapping("/sys")
@Api(tags = "登录接口Api")
@CrossOrigin //解决前台跨域问题
public class LoginController {

    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public CommonResult login(@RequestBody LoginVo loginVo) {
        CommonResult result = userService.findByNameAndPassword(loginVo);
        return result;
    }
}

3 前台登录完善

3.1 引入axios并挂载到Vue对象中

import axios from 'axios'

//把axios挂载到vue对象
Vue.prototype.$http=axios;

3.2 完善前台登录请求代码

                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>

Script代码：

            login() {
                var that = this;
                this.$refs.loginFormRef.validate((valid) => {
                    if (valid) {
                        this.$http.post("http://localhost:8081/sys/login", this.loginFormData).then(function (resp) {
                            if (resp.data.code === 2000) {
                                that.$message.success(resp.data.msg);
                                //把用户的key保存起来  sessionStorage 会话级别 | localStorage 本地保存
                                sessionStorage.setItem("token",resp.data.result);

                                that.$router.push("/home")
                            } else {
                                that.$message.error(resp.data.msg);
                            }
                        })
                    }
                });
            }

3.3 前台登录表单重置完善

            //重置方法
            resetForm(){
                //表单重置
                this.$refs.loginFormRef.resetFields();
            },

3.4 路由守卫（前台拦截器）

在这里插入图片描述
main.js中添加：

//to路由跳转的路径
//from从哪跳转来的
//next执行
router.beforeEach((to,from,next)=>{
  var path = to.path;
  if (path==="/login"){
    return next();
  }
  //判断是否携带token值
  var token = sessionStorage.getItem("token");
  if (token){
    return next();
  }
  return next("/login");
})

3.5 设置请求头的值（请求拦截器）

main.js中添加：

//axios请求拦截器
axios.interceptors.request.use(config=>{
       var token = sessionStorage.getItem("token");
       if(token){
           config.headers.token=token;
       }
       return config;
});

4 登录完毕主页编写

前台代码：

<template>
    <el-container class="home-container">
        <!-- 头部区域 -->
        <el-header>
            <div>
                <img src="../assets/preview.jpg" height="60px" width="60px"/>
                <span>TenliTenli中心</span>
            </div>
             <!-- 实现退出功能 -->
            <el-button type="info" @click="logout"> 退出 </el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <!-- 侧边栏菜单 -->
                <el-menu
                        background-color="deeppink"
                        text-color="black"
                        active-text-color="skyblue">
                    <!-- 一级菜单 -->
                    <el-submenu index="1">
                        <!-- 一级菜单模板 -->
                        <template slot="title">
                            <!-- 图标 -->
                            <i class="el-icon-location"></i>
                            <!-- 文本 -->
                            <span>导航一</span>
                        </template>
                        <!-- 二级子菜单 -->
                        <el-menu-item index="1-4-1">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                                <!-- 图标 -->
                                <i class="el-icon-location"></i>
                                <!-- 文本 -->
                                <span>子菜单一</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主体结构 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

CSS：

<style scoped >
    .home-container {
        height: 100%;
    }
    .el-header{
        background-color:pink;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: black;
        font-size: 20px;
    }
    .el-header>div{
        display: flex;
        align-items: center;
    }
    .el-header>div>span{
        margin-left: 15px;
    }
    element.style{
        background-color: green !important;
    }
    .el-aside{
        background-color:deeppink;
    }
    .el-aside .el-menu{
        border-right: none;
    }
    .el-main{
        background-color:#eaedf1;
    }
    .toggle-button{
        display: flex;
        justify-content: center;
        color: white;
    }
</style>

Script代码：

<script>
    export default {
        name: "home",
        methods:{
            logout(){
                var that=this;
                this.$http.get("http://localhost:8081/sys/logout").then(function(resp){
                    sessionStorage.clear();
                    that.$router.push("/login")
                });

            }
        }
    }
</script>

后台接口代码

WebUtil:

public class WebUtil {

    /** 获取request对象 **/
    public static HttpServletRequest getRequest(){
        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        if (requestAttributes == null){
            return null;
        }
        return ((ServletRequestAttributes)requestAttributes).getRequest();
    }
    /** 获取response对象 **/
    public static HttpServletResponse getResponse(){
        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        if (requestAttributes == null){
            return null;
        }
        return ((ServletRequestAttributes)requestAttributes).getResponse();
    }
}

Controller:

    @GetMapping("/logout")
    public CommonResult logout(){
        //获取request对象。
        HttpServletRequest request = WebUtil.getRequest();
        String token = request.getHeader("token");
        redisTemplate.delete(token);
        return new CommonResult(2000,"退出成功",null);
    }

在这里插入图片描述