十八、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 requestlogin.js
import request from '@/utils/request';
// 登录
export const loginApi = (data) => request.post('/login', data);login/index.vue
<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> 修改密码
|
</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>
18.3 打包部署
修改配置文件config以后可以使用命令reload重新加载，stop可以停止nginx服务
浙公网安备 33010602011771号