十八、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

login.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> 修改密码 &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>

18.3 打包部署

修改配置文件config以后可以使用命令reload重新加载，stop可以停止nginx服务