十八、Javaweb-day18-前端实战-登录-EW帮帮网

十八、Javaweb-day18-前端实战-登录

十八、Javaweb-day18-前端实战-登录

黑马在线讲义：https://heuqqdmbyk.feishu.cn/wiki/SE5owqapKiXSySkrHduchs4ynac

十八、Javaweb-day18-前端实战-登录

18.1 登录

在这里插入图片描述
查看接口文档：

主要代码如下：

import axios from 'axios';
import router from '../router';
import { ElMessage } from 'element-plus';

const request = axios.create({
  baseURL: '/api',
  timeout: 600000
})

//axios的响应 response 拦截器
request.interceptors.response.use(
  (response) => { //成功回调
    return response.data
  },
  (error) => { //失败回调
    if (error.response.status == 401) { // ===为全等（比较类型和值）  ==有隐式类型转换
      // 提示信息
      ElMessage.error('登录超时，请重新登录');
      // 跳转到登录页面
      router.push('/login');
    }
    return Promise.reject(error)
  }
)

//axios的请求 request 拦截器 -- 获取localStorage中的token,在请求头中增加token请求头
request.interceptors.request.use(
  (config) => { // 成功回调
    // console.log(config);
    const loginUser = JSON.parse(localStorage.getItem('loginUser'));
    if (loginUser && loginUser.token) {
      config.headers.token = loginUser.token;
    }
    return config;
    
  },
  (error) => { // 失败回调
    return Promise.reject(error);
  }
)

export default request

import request from '@/utils/request';

// 登录
export const loginApi = (data) => request.post('/login', data);

<script setup>
import { ref } from 'vue';
import { loginApi } from '@/api/login';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';


const loginForm = ref({ username: '', password: '' });
// 调用useRouter()函数，就可以拿到router实例
const router = useRouter();

// 登录
const login = async () => {
  const result = await loginApi(loginForm.value);
  if (result.code) { // 成功
    // 1. 提示信息
    ElMessage.success('登录成功');

    // 2. 存储当前登录员工的信息 -- JSON.stringify将对象转成字符串
    localStorage.setItem('loginUser', JSON.stringify(result.data));

    // 3. 跳转页面到首页
    router.push('/index');
  } else { // 失败
    ElMessage.error(result.msg);
  }
}

// 重置
const clear = () => {
  loginForm.value = { username: '', password: ''};
}

</script>

<template>
  <div id="container">
    <div class="login-form">
      <el-form label-width="80px">
        <p class="title">Tlias智能学习辅助系统</p>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="button" type="primary" @click="login">登 录</el-button>
          <el-button class="button" type="info" @click="clear">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
#container {
  padding: 10%;
  height: 410px;
  background-image: url('../../assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.login-form {
  max-width: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}

.title {
  font-size: 30px;
  font-family: '楷体';
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.button {
  margin-top: 30px;
  width: 120px;
}
</style>

18.2 退出

在这里插入图片描述
layout/index.vue

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';


// 当前登录员工
const loginName = ref('');
const router = useRouter();

// 钩子函数
onMounted (() => {
  const loginUser = JSON.parse(localStorage.getItem('loginUser'));
  if (loginUser && loginUser.name) {
    loginName.value = loginUser.name;
  }
})


// 退出登录
const logout = () => {
    ElMessageBox.confirm(
    '您确认退出登录吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => { // 确认
    ElMessage.success('退出成功');
    localStorage.removeItem('loginUser');
    // 跳转页面-登录
    router.push('/login');
  }).catch(() => { // 取消
    ElMessage.info("您已取消退出");
  })
}

</script>

<template>

  <div class="common-layout">
    <el-container>
      <!-- Header 区域 -->
      <el-header class="header">
        <span class="title">Tlias智能学习辅助系统</span>
        <span class="right_tool">
          <a href="">
            <el-icon>
              <EditPen />
            </el-icon> 修改密码 &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
          </a>
          <a href="javascript:;" @click="logout">
            <el-icon>
              <SwitchButton />
            </el-icon> 退出登录 【{{loginName}}】
          </a>
        </span>
      </el-header>

      <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px" class="aside">
          <!-- 左侧菜单栏 -->
           <el-menu router>
                <!-- 首页菜单 -->
                <el-menu-item index="/index">
                <el-icon><Promotion /></el-icon> 首页
                </el-menu-item>
                
                <!-- 班级管理菜单 -->
                <el-sub-menu index="/manage">
                <template #title>
                    <el-icon><Menu /></el-icon> 班级学员管理
                </template>
                <el-menu-item index="/clazz">
                    <el-icon><HomeFilled /></el-icon>班级管理
                </el-menu-item>
                <el-menu-item index="/stu">
                    <el-icon><UserFilled /></el-icon>学员管理
                </el-menu-item>
                </el-sub-menu>
                
                <!-- 系统信息管理 -->
                <el-sub-menu index="/system">
                <template #title>
                    <el-icon><Tools /></el-icon>系统信息管理
                </template>
                <el-menu-item index="/dept">
                    <el-icon><HelpFilled /></el-icon>部门管理
                </el-menu-item>
                <el-menu-item index="/emp">
                    <el-icon><Avatar /></el-icon>员工管理
                </el-menu-item>
                </el-sub-menu>
                
                <!-- 数据统计管理 -->
                <el-sub-menu index="/report">
                <template #title>
                    <el-icon><Histogram /></el-icon>数据统计管理
                </template>
                <el-menu-item index="/empReport">
                    <el-icon><InfoFilled /></el-icon>员工信息统计
                </el-menu-item>
                <el-menu-item index="/stuReport">
                    <el-icon><Share /></el-icon>学员信息统计
                </el-menu-item>
                <el-menu-item index="/log">
                    <el-icon><Document /></el-icon>日志信息统计
                </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>


</template>

<style scoped>
.header {
  background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
}

.title {
  color: white;
  font-size: 40px;
  font-family: 楷体;
  line-height: 60px;
  font-weight: bolder;
}

.right_tool{
  float: right;
  line-height: 60px;
}

a {
  color: white;
  text-decoration: none;
}

.aside {
  width: 220px;
  border-right: 1px solid #ccc;
  height: 730px;
}
</style>