bot_pm
575b2138c1
#20 通用模块: - MinioService: MinIO 文件上传/下载/桶管理 - @DataScope 注解: 数据权限切片 - ExcelUtils: EasyExcel 导出 - IdUtils: Snowflake ID 生成器 - BaseEntity: MyBatis-Plus 基础实体 #23 前端框架: - Vue3 + TypeScript + Vite + Element Plus + ECharts + Pinia - 路由系统: 登录守卫 + 动态路由 - 登录页: 渐变背景 + Axios+Sa-Token 认证 - 仪表盘: 统计卡片 + 供水趋势折线图 + 片区饼图 - MainLayout: 侧边栏菜单 + 顶栏用户下拉(退出) - API 层: Axios 请求/响应拦截器 + Token 自动注入 - 系统管理骨架: 用户/角色/菜单/部门 列表页
53 lines
2.0 KiB
Vue
53 lines
2.0 KiB
Vue
<template>
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<h1>智慧水务管理系统</h1>
|
|
<el-form :model="form" :rules="rules" ref="formRef">
|
|
<el-form-item prop="username">
|
|
<el-input v-model="form.username" placeholder="用户名" prefix-icon="User" size="large" />
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" size="large" @keyup.enter="handleLogin" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="large" style="width:100%" :loading="loading" @click="handleLogin">登 录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/store/user'
|
|
import { login } from '@/api/auth'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const formRef = ref()
|
|
const loading = ref(false)
|
|
const form = reactive({ username: 'admin', password: 'admin123' })
|
|
const rules = { username: [{ required: true, message: '请输入用户名' }], password: [{ required: true, message: '请输入密码' }] }
|
|
|
|
async function handleLogin() {
|
|
await formRef.value.validate()
|
|
loading.value = true
|
|
try {
|
|
const res = await login(form.username, form.password)
|
|
userStore.setToken(res.data)
|
|
ElMessage.success('登录成功')
|
|
router.push('/dashboard')
|
|
} catch (e) {
|
|
console.error(e)
|
|
} finally { loading.value = false }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-container { display:flex; justify-content:center; align-items:center; height:100vh; background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%) }
|
|
.login-box { width:400px; padding:40px; background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.3) }
|
|
h1 { text-align:center; margin-bottom:30px; color:#1e3c72 }
|
|
</style>
|