This commit is contained in:
parent
b07157ad4d
commit
5aa0643b94
|
|
@ -6,39 +6,32 @@ const router = createRouter({
|
|||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'LoginPage',
|
||||
component: () => import('../views/login/LoginPage.vue')
|
||||
component: () => import('../views/1_login/LoginPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'LayoutContainer',
|
||||
component: () => import('../views/layout/LayoutContainer.vue'),
|
||||
redirect: '/article/channel',
|
||||
component: () => import('../views/2_layout/Layout.vue'),
|
||||
redirect: '/homePage',
|
||||
children: [
|
||||
{
|
||||
path: '/article/manage',
|
||||
name: 'ArticleManage',
|
||||
component: () => import('../views/article/ArticleManage.vue')
|
||||
path: '/homePage',
|
||||
component: () => import('../views/3_homePage/HomePage.vue')
|
||||
},
|
||||
{
|
||||
path: '/article/channel',
|
||||
name: 'ArticleChannel',
|
||||
component: () => import('../views/article/ArticleChannel.vue')
|
||||
path: '/hospital',
|
||||
component: () => import('../views/4_hospital/Hospital.vue')
|
||||
},
|
||||
{
|
||||
path: '/user/profile',
|
||||
name: 'UserProfile',
|
||||
component: () => import('../views/user/UserProfile.vue')
|
||||
path: '/doctor',
|
||||
component: () => import('../views/5_doctor/Doctor.vue')
|
||||
},
|
||||
{
|
||||
path: '/user/avatar',
|
||||
name: 'UserAvatar',
|
||||
component: () => import('../views/user/UserAvatar.vue')
|
||||
path: '/article',
|
||||
component: () => import('../views/6_article/Article.vue')
|
||||
},
|
||||
{
|
||||
path: '/user/password',
|
||||
name: 'UserPassword',
|
||||
component: () => import('../views/user/UserPassword.vue')
|
||||
path: '/userInfo',
|
||||
component: () => import('../views/7_userInfo/UserInfo.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
<script setup>
|
||||
import { userLoginService, userGetVerificationService } from '@/api/user'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, useTemplateRef } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores'
|
||||
|
||||
const form = useTemplateRef('form')
|
||||
|
||||
// 整个表单用于提交的form数据对象
|
||||
const formModle = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
captchaKey: '',
|
||||
captchaCode: ''
|
||||
})
|
||||
|
||||
let src = ref('')
|
||||
onMounted(async () => {
|
||||
const init = await userGetVerificationService()
|
||||
formModle.value.captchaKey = init.data.data.key
|
||||
src.value = init.data.data.image
|
||||
})
|
||||
|
||||
const rules = ref({
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 1, max: 10, message: '用户名必须是 5-10 位字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^\S{6,15}$/,
|
||||
message: '密码必须是 6-15 位的非空字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
captchaCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// 登录
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const login = async () => {
|
||||
await form.value.validate()
|
||||
const res = await userLoginService(formModle.value)
|
||||
// 保存token
|
||||
userStore.setToken(res.data.data)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const getVerification = async () => {
|
||||
const update = await userGetVerificationService()
|
||||
formModle.value.captchaKey = update.data.data.key
|
||||
src.value = update.data.data.image
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="form">
|
||||
<div class="logo"></div>
|
||||
<el-form :model="formModle" :rules="rules" ref="form" size="large" class="forms">
|
||||
<el-form-item>
|
||||
<h1 style="margin-bottom: 8px">欢迎来到后台管理！</h1>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="formModle.username"
|
||||
:prefix-icon="User"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="formModle.password"
|
||||
:prefix-icon="Lock"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captchaCode" class="verification">
|
||||
<el-input
|
||||
v-model="formModle.captchaCode"
|
||||
:prefix-icon="Lock"
|
||||
type="captchaCode"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
</el-input>
|
||||
<img @click="getVerification" :src="src" alt="" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="login"
|
||||
class="button"
|
||||
type="primary"
|
||||
auto-insert-space
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
background: url('@/assets/login_bg.png') no-repeat center / cover;
|
||||
border-radius: 0 20px 20px 0;
|
||||
.form {
|
||||
width: 420px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 20px 8px #ccc;
|
||||
user-select: none; // 禁止用户选择页面上的文本
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
margin-top: 16px;
|
||||
opacity: 0.8;
|
||||
background: url('@/assets/logo.png') center / cover;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.forms {
|
||||
width: 75%;
|
||||
box-sizing: border-box;
|
||||
:deep(.el-form-item__content) {
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
img {
|
||||
cursor: pointer;
|
||||
border: #ccc 1px solid;
|
||||
border-radius: 4px;
|
||||
margin-left: 6px;
|
||||
height: 38px;
|
||||
width: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<script setup>
|
||||
import {
|
||||
Management,
|
||||
Promotion,
|
||||
UserFilled,
|
||||
Avatar,
|
||||
CirclePlusFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import avatar from '@/assets/default.png'
|
||||
import { useUserStore } from '@/stores'
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 获取用户信息
|
||||
onMounted(() => {
|
||||
userStore.getUser()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="layout-container">
|
||||
<el-aside width="200px">
|
||||
<div class="el-aside__logo"></div>
|
||||
<el-menu
|
||||
class="el-menu"
|
||||
active-text-color="#409EFF"
|
||||
background-color="#444"
|
||||
:default-active="$route.path"
|
||||
text-color="#fff"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="/homePage">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<span>首页</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/hospital">
|
||||
<el-icon><CirclePlusFilled /></el-icon>
|
||||
<span>医院管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/doctor">
|
||||
<el-icon><Avatar /></el-icon>
|
||||
<span>医生管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/article">
|
||||
<el-icon><Management /></el-icon>
|
||||
<span>医说管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/userInfo">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>用户信息管理</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div>
|
||||
后台管理员：<strong>{{ userStore.user.name }}</strong>
|
||||
</div>
|
||||
<el-avatar :src="userStore.user.avatarUrl || avatar" />
|
||||
</el-header>
|
||||
<el-main>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="scale" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
.el-aside {
|
||||
background-color: #444;
|
||||
&__logo {
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
background: url('@/assets/logo.png') no-repeat center / 80px auto;
|
||||
}
|
||||
:deep().el-menu {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-header {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.el-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
// 路由动画效果
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-container title="首页">
|
||||
<template #extra>
|
||||
<el-button type="primary">添加分类</el-button>
|
||||
</template>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const hospital = ref([
|
||||
{
|
||||
id:1,
|
||||
name:'12',
|
||||
alias:'123',
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-container title="医院管理">
|
||||
<template #extra>
|
||||
<el-button type="primary">添加分类</el-button>
|
||||
</template>
|
||||
<el-table :data="hospital" stripe>
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="name" label="分类名称"></el-table-column>
|
||||
<el-table-column prop="alias" label="分类别名"></el-table-column>
|
||||
<el-table-column prop="operate" label="操作">
|
||||
<template #default="{row}">
|
||||
<el-button type="primary" size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="没有数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const cate_data = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-container title="医生管理">
|
||||
<template #extra>
|
||||
<el-button type="primary">添加分类</el-button>
|
||||
</template>
|
||||
<el-table :data="cate_data">
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
|
||||
<el-table-column prop="cate_alias" label="分类别名"></el-table-column>
|
||||
<el-table-column prop="operate" label="操作"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="没有数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const cate_data = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-container title="医说管理">
|
||||
<template #extra>
|
||||
<el-button type="primary">添加分类</el-button>
|
||||
</template>
|
||||
<el-table :data="cate_data">
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
|
||||
<el-table-column prop="cate_alias" label="分类别名"></el-table-column>
|
||||
<el-table-column prop="operate" label="操作"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="没有数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const cate_data = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-container title="用户信息管理">
|
||||
<template #extra>
|
||||
<el-button type="primary">添加分类</el-button>
|
||||
</template>
|
||||
<el-table :data="cate_data">
|
||||
<el-table-column prop="id" label="序号"></el-table-column>
|
||||
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
|
||||
<el-table-column prop="cate_alias" label="分类别名"></el-table-column>
|
||||
<el-table-column prop="operate" label="操作"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="没有数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
Reference in New Issue