登录综合案例01,前端使用vue+elementui+axios 后端 springboot+mybatis-plus+swagger2

Posted 2021-05-07 奔跑的小峥

登录综合案例01,前端使用vue+elementui+axios 后端 springboot+mybatis-plus+swagger2

• 前端使用vue+elementui+axios
• • 进入可视化界面创建新项目
  • 开始工作
  • 新建login.vue的js
• 设计登录页面
• 登陆时的表单校验
• • 表单校验的代码
  • 校验的代码
• 重置表单
• 登陆后台接口
• 前端调用后端接口
• • 完成在密码框回车即登录
• 完善登陆功能
• • 添加RedisConfig 配置类，自定义序列化方式
  • 后端LoginController接口方法改动
  • 后端UserServiceImpl方法改动
  • 前台登录的方法改动
• 路由守卫（只放行login）
• • 在main.js中添加路由守卫的代码：
• 设置请求头的值----请求拦截器
• 引入shiro安全框架
• • 测试接口的swagger2路径
• 登录成功页面的布局
• • 退出的js方法
  • 解决浏览器回退按钮清空token
  • UserServiceImpl退出代码

前端使用vue+elementui+axios

进入可视化界面创建新项目

开始工作

注意：
（1） App.vue中必须要加路由渲染

（2）在index.js中配置login.vue的路径

 {
    path: '/login',
    name: 'Login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  }

新建login.vue的js

export default 只能导出一个默认模块

<script>
    export default {
        name: "login"
    }
</script>

注意：如果从git上下载项目，就要执行以下命令

设计登录页面

（1）login.vue组件页面

<template>
<!--    登录的容器-->
    <div class="login_container">
登录页面
    </div>
</template>

（2） 设置登陆界面的css样式

<style scoped>
.login_container{
    background-color: #e2a5b9;
    height: 100%;
}
</style>

（3）发现.login_container高度无效。 在assets下创建一个全局的css

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

（4）注意：一定要把全局css导入main.js 使用需要的插件，作用：加载公共组件

//导入全局css
import './assets/css/global.css'

（5）登陆框和登陆框的头像设计布局

<template>
    <!--    登录的容器-->
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/dog.png" alt="">
            </div>
            <!-- 登录表单 -->

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

（6）css样式

<style scoped>

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

   .login_box {
        width: 450px;
        height: 300px;
        background: #fff;
        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;
     }

</style>

（7）设计表单输入框

<template>
    <!--    登录的容器-->
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/dog.png" alt="">
            </div>
            <!-- 登录表单 -->
            <div style="margin: 20px;"></div>
            <el-form class="login_form"  >
                <el-form-item >
                    <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="loginFormData.loginName" ></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginFormData.password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" >提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>

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

（8）表单的css

    /*表单的设计*/
    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }

登陆时的表单校验

（1）在表单元素上添加 :rules=“myRules”
（2）在data中定义校验规则:
data(){
return {
myRules:{
}
}
}

（3）在表单元素上使用指定的校验规则

注意：如果vue表单输入的有数据,但是提示不能为空，检查以下
第一个地方是el-form标签是否绑定了值，也就是:model=""
第二个地方是el-form标签是否绑定了表单验证规则，也就是:rules=""
第三个地方是el-form-item标签是否有prop，并且prop的值是否和rules的值对应
注意：如果表单输入不上值，一定要把表单中的:model属性改为v-model

表单校验的代码

 <!-- 登录表单   -->
            <div style="margin: 20px;"></div>
<!--            添加校验规则第一步添加:rules="loginRules"  表单的校验规则-->
            <el-form class="login_form" :model="loginFormData" :rules="LoginRules">
<!--                第二步加上prop这个属性 表示使用表单中的那个校验规则-->
                <el-form-item  prop="loginName">
<!--                第三步注意prop的属性值是否与每个输入框里面的v-model的属性是否对照-->
                    <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="loginFormData.loginName" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginFormData.password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" >提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>

校验的代码

<script>
    export default {
        name: "login",
        data(){
            return {
                loginFormData:{
                    loginName:"",
                    password:"",
                },
                //定义登录的校验规则
                LoginRules:{
                    loginName:[
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { min: 6, max: 8, message: '长度在 6到 8 个字符', trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>

重置表单

（1）为表单添加一个属性 ref=“名称”

（2）重置的语句 loginFormRef是指ref的值
this.$refs.loginFormRef.resetFields();
重置的方法：

       methods: {
            //重置方法
            loginReset() {
                console.log(this);
                this.$refs.loginFormRef.resetFields();
            },
       }

登陆后台接口

（1）依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zz</groupId>
    <artifactId>springboot-vue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-vue</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <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>
<!--        mybatis-plus/依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>
<!--        mybatis-plus-generator代码生成器-->
        <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.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.11</version>
        </dependency>
<!--        druid数据源-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.21</version>
        </dependency>
<!--        swagger2-->
        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.9.1.RELEASE</version>
        </dependency>
<!--        swagger  好看的ui-->
        <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登录综合案例02,退出完善，菜单权限，以及遇到的一些问题，前端使用vue+elementui+axios 后端 springboot+mybatis-plus+swagger2，

 Vue-05-笔记
 前端vue实现登录前，记住密码功能案例存储cookies与base64加密版
 前端Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转路由守卫退出
 前端Vue+Element UI案例：通用后台管理系统-项目总结
 Vue.js高效前端开发 • Vue列表渲染