<
template>
<div class="login
-container">
<div class="login
-box">
<h2>高校教材管理系统</h2>
<form @submit.prevent="handleLogin">
<input v
-model.number="userId" type="number" placeholder="请输入账号（工号/学号）" required />
<input v
-model="password" type="password" placeholder="请输入密码" required />
<button type="submit" :disabled="loading">
{{ loading ? '登录中...' : '登录' }}
</button>
</form>
</div>
</div>
</
template>
<script setup>
import { ref } from '
vue'
import { useRouter } from '
vue-router'
import axios from 'axios'
const userId = ref(0)
const password = ref('')
const router = useRouter()
const loading = ref(false)
const handleLogin = async () => {
if (loading.value) return
loading.value = true
try {
const res = await axios.post('http://localhost:8080/api/auth/login', {
userId: userId.value,
phone: password.value
})
console.log('登录
返回：', res.data) // 调试时查看 role 是否为预期值
if (res.data.success) {
localStorage.setItem('user', JSON.stringify(res.data))
const role = res.data.role
if (['
admin', '
Admin', '管理员'].includes(role)) {
router.push('/
admin/textbook')
} else {
router.push('/user/query')
}
} else {
alert('账号
或密码错误')
}
} catch (err) {
alert('连接服务器失败，请检查后端是否启动')
} finally {
loading.value = false
}
}
</script>
<style scoped>
.login
-container {
display: flex;
justify
-content: center;
align
-items: center;
height: 100vh;
background: #f0f2f
5;
}
.login
-box {
width: 400px;
padding:
50px;
background: white;
border
-radius: 10px;
box
-shadow: 0 4px 20px rgba(0,0,0,0.1);
text
-align: center;
}
h2 {
margin
-bottom: 30px;
color: #1890ff;
font
-size: 24px;
}
input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border
-radius: 6px;
font
-size: 14px;
box
-sizing: border
-box;
}
button {
width: 100%;
padding: 12px;
background
-color: #1890ff;
color: white;
border: none;
border
-radius: 6px;
font
-size: 16px;
cursor: pointer;
margin
-top: 10px;
}
button:hover:not(:disabled) {
background
-color: #40a9ff;
}
button:disabled {
background
-color: #ccc;
cursor: not
-allowed;
}
</style>
当使用vue-admin-template并开启history模式时，刷新页面可能出现404或空白。这通常由于后台服务器如nginx或apache未配置支持。为解决此问题，需更新后台服务器配置，或者若后端不支持，可选择禁用history模式。
扫一扫
2196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
