1

src/router/index.js

@@ -6,39 +6,32 @@ const router = createRouter({
   routes: [
     {
       path: '/login',
-      name: 'LoginPage',
+      component: () => import('../views/1_login/LoginPage.vue')
-      component: () => import('../views/login/LoginPage.vue')
     },
     {
       path: '/',
-      name: 'LayoutContainer',
+      component: () => import('../views/2_layout/Layout.vue'),
-      component: () => import('../views/layout/LayoutContainer.vue'),
+      redirect: '/homePage',
-      redirect: '/article/channel',
       children: [
         {
-          path: '/article/manage',
+          path: '/homePage',
-          name: 'ArticleManage',
+          component: () => import('../views/3_homePage/HomePage.vue')
-          component: () => import('../views/article/ArticleManage.vue')
         },
         {
-          path: '/article/channel',
+          path: '/hospital',
-          name: 'ArticleChannel',
+          component: () => import('../views/4_hospital/Hospital.vue')
-          component: () => import('../views/article/ArticleChannel.vue')
         },
         {
-          path: '/user/profile',
+          path: '/doctor',
-          name: 'UserProfile',
+          component: () => import('../views/5_doctor/Doctor.vue')
-          component: () => import('../views/user/UserProfile.vue')
         },
         {
-          path: '/user/avatar',
+          path: '/article',
-          name: 'UserAvatar',
+          component: () => import('../views/6_article/Article.vue')
-          component: () => import('../views/user/UserAvatar.vue')
         },
         {
-          path: '/user/password',
+          path: '/userInfo',
-          name: 'UserPassword',
+          component: () => import('../views/7_userInfo/UserInfo.vue')
-          component: () => import('../views/user/UserPassword.vue')
         }
       ]
     }

src/views/1_login/LoginPage.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>

src/views/2_layout/Layout.vue

@@ -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>

src/views/3_homePage/HomePage.vue

@@ -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>

src/views/4_hospital/Hospital.vue

@@ -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>

src/views/5_doctor/Doctor.vue

@@ -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>

src/views/6_article/Article.vue

@@ -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>

src/views/7_userInfo/UserInfo.vue

@@ -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>