feat: 开发中...

2023-04-03 17:24:21 +08:00
parent d1054590cd
commit e2bdd6a674
29 changed files with 386 additions and 218 deletions
--- a/blog-frontend/index.html
+++ b/blog-frontend/index.html
@@ -7,8 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="叁只仓鼠的个人博客">
    <title>网站标题</title>
-    <style id="custom-css">
-    </style>
+    <style id="custom-css"> </style>
 </head>

 <body>
--- a/blog-frontend/src/App.vue
+++ b/blog-frontend/src/App.vue
@@ -4,10 +4,12 @@ import { RouterView } from 'vue-router'
 import HeaderComponent from "@/components/HeaderComponent.vue"
 import FooterComponent from "@/components/FooterComponent.vue"

-import { api, loadGlobalStore, siteSetting } from '@/api';
+import { api, globalStore, siteSetting } from '@/api';

-loadGlobalStore();
+globalStore.load();

+// 获取当前登录的用户信息
+api.updateCurrentUserInfo();
 onMounted(() => {
  api.SettingController.getSettingContent(siteSetting.keys.site.css)
    .then(resp => {
@@ -20,6 +22,7 @@ onMounted(() => {
      }
    })
 })
+
 </script>

 <template>
@@ -41,4 +44,18 @@ onMounted(() => {
  width: 100%;
  height: 100%;
 }
+
+.blog-header {
+  height: auto;
+}
+
+.blog-main {
+  height: auto;
+}
+
+.blog-footer {
+  padding: 0;
+  height: auto;
+  background-color: aqua;
+}
 </style>
--- a/blog-frontend/src/api/api.ts
+++ b/blog-frontend/src/api/api.ts
@@ -1,4 +1,5 @@
 import { UserControllerApiFactory, BlogControllerApiFactory, SettingControllerApiFactory, AttachControllerApiFactory, Configuration } from "@/swagger"
+import { globalStore } from "./global-store"

 export const apiConfig: Configuration = {
    baseOptions: {
@@ -10,5 +11,19 @@ export const api = {
    AttachController: AttachControllerApiFactory(apiConfig),
    UserController: UserControllerApiFactory(apiConfig),
    BlogController: BlogControllerApiFactory(apiConfig),
-    SettingController: SettingControllerApiFactory(apiConfig)
+    SettingController: SettingControllerApiFactory(apiConfig),
+    updateCurrentUserInfo: function () {
+        this.UserController.getCurrentUserInfo()
+            .then(resp => {
+                let vo = resp.data
+                if (vo.code === 200) {
+                    globalStore.currentUserInfo = vo.data
+                    console.log("current user info: ", vo.data)
+                } else {
+                    globalStore.currentUserInfo = undefined
+                    console.warn("ckeck current user info failed!")
+                }
+                globalStore.save()
+            })
+    }
 }
--- a/blog-frontend/src/api/global-store.ts
+++ b/blog-frontend/src/api/global-store.ts
@@ -3,8 +3,22 @@ import { reactive, ref } from "vue"
 import type { UserInfoResponseVO } from "@/swagger"

 export const globalStore = reactive<{
-    currentUserInfo?: UserInfoResponseVO
-}>({})
+    currentUserInfo?: UserInfoResponseVO,
+    load: Function
+    save: Function
+}>({
+    load: function () {
+        this.currentUserInfo = JSON.parse(window.localStorage.getItem("currentUserInfo") || "{}")
+        console.log("local storage user info: ", this.currentUserInfo)
+    },
+    save: function () {
+        if (this.currentUserInfo?.id) {
+            window.localStorage.setItem("currentUserInfo", JSON.stringify(this.currentUserInfo))
+        } else {
+            window.localStorage.removeItem("currentUserInfo")
+        }
+    }
+})

 export const siteSetting = reactive({
    keys: {
@@ -23,16 +37,3 @@ export const siteSetting = reactive({
        text: string
    }>>(),
 })
-
-export function loadGlobalStore() {
-    globalStore.currentUserInfo = JSON.parse(window.localStorage.getItem("currentUserInfo") || "{}")
-    console.log("local storage user info: ", globalStore.currentUserInfo)
-}
-
-export function saveGlobalStore() {
-    if (globalStore.currentUserInfo?.id) {
-        window.localStorage.setItem("currentUserInfo", JSON.stringify(globalStore.currentUserInfo))
-    } else {
-        window.localStorage.removeItem("currentUserInfo")
-    }
-}
--- a/blog-frontend/src/assets/main.css
+++ b/blog-frontend/src/assets/main.css
@@ -5,9 +5,6 @@ body,
 #app {
  width: 100%;
  height: 100%;
-}
-
-#app {
  margin: 0;
  padding: 0;
 }
--- a/blog-frontend/src/components/BlogComponent.vue
+++ b/blog-frontend/src/components/BlogComponent.vue
@@ -1,55 +1,69 @@


 <script setup lang="ts">
-defineProps<{
-    i: number
+import router from '@/router';
+
+import type { BlogInfoResponseVO } from '@/swagger';
+
+const props = defineProps<{
+    blog: BlogInfoResponseVO
 }>()
+
+function showBlog() {
+    router.push("/blog/" + props.blog.id + "/")
+}
+
+function showCreator() {
+    console.log("showCreator")
+}
+
+function showUpdater() {
+    console.log("showUpdater")
+}
 </script>

 <template>
-    <el-card class="box-card">
+    <el-card class="blog-card">
        <template #header>
-            <div class="card-header">
-                <p class="">{{ '博客文章 ' + i }}</p>
-                <p class="text-center">
-                    <el-avatar :size="24" src="/favicon.ico" /> {{ '叁只仓鼠 发表于：2023年3月' + i +
-                        '日16:00:00' }}
+            <div class="blog-card-header">
+                <p @click="showBlog">{{ blog.title }}</p>
+                <p @click="showCreator">
+                    <el-avatar :size="24" src="/favicon.ico" />
+                    {{ blog.creator?.nickname + ' 发表于：' + blog.updateTime?.toLocaleString() }}
                </p>
            </div>
        </template>
-        <div>
-            <p v-for="o in 4" :key="o" class="text item">{{ '博客文章 ' + i + ' 第 ' + o + ' 行内容' }}</p>
-        </div>
-        <div>
-            <p class="text-center">
-                <el-avatar :size="24" src="/favicon.ico" /> {{ '叁只仓鼠 最后修改于：2023年3月' + i +
-                    '日16:00:00' }}
+        <div class="blog-card-content" v-html="blog.content"> </div>
+        <div class="blog-card-footer">
+            <p @click="showUpdater">
+                <el-avatar :size="24" src="/favicon.ico" />
+                {{ blog.updater?.nickname + ' 最后修改于：' + blog.updateTime?.toLocaleString() }}
            </p>
        </div>
    </el-card>
 </template>

 <style scoped>
-.card-header {
+.blog-card {
+    width: 100%;
+    cursor: pointer;
+}
+
+.blog-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

-.text-center * {
-    text-align: center;
-    vertical-align: center;
+.blog-card-header :hover {
+    text-decoration: underline;
 }

-.text {
-    font-size: 14px;
+.blog-card-footer :hover {
+    text-decoration: underline;
 }

 .item {
    margin-bottom: 18px;
 }
-
-.box-card {
-    width: 100%;
-}
 </style>
--- a/blog-frontend/src/components/FooterComponent.vue
+++ b/blog-frontend/src/components/FooterComponent.vue
@@ -17,20 +17,28 @@ onMounted(() => {
 </script>

 <template>
-    <p>
+    <p class="footer-text">
        <a href="https://cn.vuejs.org/">Vue3</a>
        |
+        <a href="https://router.vuejs.org/zh/">Vue Router</a>
+        |
        <a href="https://element-plus.gitee.io/zh-CN/">Element UI Plus</a>
        |
        <a href="/swagger-ui/index.html">Swagger</a>
        |
-        <a href="https://editor.swagger.io/">Editor</a>
+        <a href="https://editor.swagger.io/">Swagger Editor</a>
+    </p>
+    <p class="footer-text">{{ siteSetting.footer }}</p>
+    <p class="footer-text">
+        <a
+            href="https://wakatime.com/badge/user/c10390d9-fe36-43e9-b9c9-26fa3c018b61/project/3d0e9b5e-f213-478b-ae46-f4e70196bfe4"><img
+                src="https://wakatime.com/badge/user/c10390d9-fe36-43e9-b9c9-26fa3c018b61/project/3d0e9b5e-f213-478b-ae46-f4e70196bfe4.svg"
+                alt="wakatime"></a>
    </p>
-    <p>{{ siteSetting.footer }}</p>
 </template>

 <style scoped>
-p {
+.footer-text {
    text-align: center;
 }
 </style>
--- a/blog-frontend/src/components/HeaderComponent.vue
+++ b/blog-frontend/src/components/HeaderComponent.vue
@@ -2,15 +2,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';

-import { RouterLink } from 'vue-router'
-import { UserInfoResponseVORoleEnum } from "@/swagger";
-import { api, globalStore, siteSetting } from "@/api"
-import { updateCurrentUserInfo } from '@/utils';
+import { UserInfoResponseVORoleEnum, api, globalStore, siteSetting } from "@/api"
 import router from '@/router';

-const currentUserInfo = globalStore.currentUserInfo
-const navigationMenu = siteSetting.customNavigationMenu
-
 const menuIndex = ref<string>(document.location.pathname)

 onMounted(() => {
@@ -24,14 +18,21 @@ onMounted(() => {
                document.title = title
            }
        })
-    if (currentUserInfo?.id) {
-        // 获取当前登录的用户信息
-        updateCurrentUserInfo();
-    }
 })

 function onSelectMenu(index: string) {
-    router.push(index)
+    switch (index) {
+        case '/logout': {
+            globalStore.currentUserInfo = undefined
+            globalStore.save()
+            router.push("/")
+            menuIndex.value = "/"
+            break;
+        }
+        default: {
+            router.push(index)
+        }
+    }
 }
 </script>

@@ -43,21 +44,24 @@ function onSelectMenu(index: string) {
        <el-menu-item index="/tags">
            标签
        </el-menu-item>
-        <el-menu-item v-for="customMenu in navigationMenu" :index="customMenu.text">
+        <el-menu-item v-for="customMenu in siteSetting.navigation" :index="customMenu.text">
            {{ customMenu.text }}
        </el-menu-item>

        <div class="flex-grow" />

-        <el-menu-item index="/login" v-if="!currentUserInfo?.id">
+        <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
            登录
        </el-menu-item>
-        <el-menu-item index="/register" v-if="!currentUserInfo?.id">
+        <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
            注册
        </el-menu-item>
-        <el-menu-item index="/manage" v-if="currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN">
+        <el-menu-item index="/manage" v-if="globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN">
            管理面板
        </el-menu-item>
+        <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
+            注销
+        </el-menu-item>
    </el-menu>
 </template>

--- a/blog-frontend/src/main.ts
+++ b/blog-frontend/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'

 import './assets/main.css'
+import 'element-plus/dist/index.css'

 const app = createApp(App)

--- a/blog-frontend/src/router/index.ts
+++ b/blog-frontend/src/router/index.ts
@@ -13,11 +13,6 @@ const router = createRouter({
      name: 'register',
      component: () => import('@/views/RegisterView.vue')
    },
-    {
-      path: '/tags',
-      name: 'tags',
-      component: () => import('@/views/TagsView.vue')
-    },
    {
      path: '/login',
      name: 'login',
@@ -27,7 +22,17 @@ const router = createRouter({
      path: '/manage',
      name: 'manage',
      component: () => import('@/views/ManagePaneView.vue')
-    }
+    },
+    {
+      path: '/tags',
+      name: 'tags',
+      component: () => import('@/views/TagsView.vue')
+    },
+    {
+      path: '/blog/:id/',
+      name: 'blog',
+      component: () => import('@/views/BlogReadView.vue')
+    },
  ]
 })

--- a/blog-frontend/src/utils/index.ts
+++ b/blog-frontend/src/utils/index.ts
@@ -1,16 +0,0 @@
-import { api, globalStore, saveGlobalStore } from "@/api";
-
-export function updateCurrentUserInfo() {
-    api.UserController.getCurrentUserInfo()
-        .then(resp => {
-            let vo = resp.data
-            if (vo.code === 200) {
-                globalStore.currentUserInfo = vo.data
-                console.log("current user info: ", vo.data)
-            } else {
-                globalStore.currentUserInfo = undefined
-                console.warn("ckeck current user info failed!")
-            }
-            saveGlobalStore()
-        })
-}
--- a/blog-frontend/src/views/AboutView.vue
+++ b/blog-frontend/src/views/AboutView.vue
@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import router from '@/router';
+
+import type { BlogInfoResponseVO } from '@/swagger';
+import { api } from '@/api';
+
+const blogInfo = ref<BlogInfoResponseVO>()
+
+onMounted(() => {
+    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
+    if (blogID) {
+        api.BlogController.getBlogInfo(parseInt(blogID))
+            .then(resp => {
+                const vo = resp.data
+                blogInfo.value = vo.data || {}
+            })
+    }
+})
+</script>
+
+<template>
+    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+    <div class="blog-content" v-html="blogInfo?.content"></div>
+</template>
+
+<style scoped>
+.blog-title {
+    text-align: center;
+}
+
+.blog-content {}
+</style>
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import router from '@/router';
+
+import type { BlogInfoResponseVO } from '@/swagger';
+import { api } from '@/api';
+
+const blogInfo = ref<BlogInfoResponseVO>()
+
+onMounted(() => {
+    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
+    if (blogID) {
+        api.BlogController.getBlogInfo(parseInt(blogID))
+            .then(resp => {
+                const vo = resp.data
+                blogInfo.value = vo.data || {}
+            })
+    }
+})
+</script>
+
+<template>
+    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+    <div class="blog-content" v-html="blogInfo?.content"></div>
+</template>
+
+<style scoped>
+.blog-title {
+    text-align: center;
+}
+
+.blog-content {}
+</style>
--- a/blog-frontend/src/views/HomeView.vue
+++ b/blog-frontend/src/views/HomeView.vue
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>
--- a/blog-frontend/src/views/IndexView.vue
+++ b/blog-frontend/src/views/IndexView.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import BlogComponent from '@/components/BlogComponent.vue';
+import { api, type BlogInfoResponseVO } from '@/api';

-const count = ref(3)
-const load = () => {
-    count.value += 2
+let page = 0
+const blogs = reactive<Array<BlogInfoResponseVO>>([])
+function load() {
+    api.BlogController.getBlogInfoList(page, 5)
+        .then(resp => {
+            const vo = resp.data
+            for (let item of vo.data ?? []) {
+                item.createTime = new Date(item?.createTime ?? 0)
+                item.updateTime = new Date(item?.updateTime ?? 0)
+                blogs.push(item)
+            }
+        })
+    page = page + 1;
 }
 </script>

 <template>
    <el-scrollbar style="overflow: auto">
        <ul class="infinite-list" v-infinite-scroll="load">
-            <li v-for=" i in count" :key="i" class="infinite-list-item">
-                <BlogComponent :i="i"></BlogComponent>
+            <li v-for=" blog in blogs" :key="blog.id" class="infinite-list-item">
+                <BlogComponent :blog="blog"></BlogComponent>
            </li>
        </ul>
    </el-scrollbar>
--- a/blog-frontend/src/views/LoginView.vue
+++ b/blog-frontend/src/views/LoginView.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
+import router from '@/router';
+
+import { ElMessage } from 'element-plus';
+
 import { api } from '@/api';
-import { updateCurrentUserInfo } from '@/utils';

 const form = reactive({
    email: '',
@@ -13,32 +16,38 @@ const onSubmit = () => {
        .then(resp => {
            let vo = resp.data;
            if (vo.code === 200) {
-                console.log('login success!')
+                ElMessage({
+                    message: vo.msg,
+                    type: 'success'
+                })
+                console.log('login success: ', vo.msg)
+                api.updateCurrentUserInfo();
+                router.push("/")
            } else {
-                console.log(vo.msg)
-                console.log('login failed!')
+                ElMessage({
+                    message: vo.msg,
+                    type: 'warning'
+                })
+                console.log('login failed: ', vo.msg)
            }
-            updateCurrentUserInfo();
        })
 }
 </script>

 <template>
-    <div class="login-div">
-        <el-card>
-            <el-form :model="form" label-width="60px">
-                <el-form-item label="邮箱">
-                    <el-input v-model="form.email" />
-                </el-form-item>
-                <el-form-item label="密码">
-                    <el-input v-model="form.password" type="password" show-password />
-                </el-form-item>
-                <el-form-item>
-                    <el-button class="login-button" type="primary" @click="onSubmit">登录</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-    </div>
+    <el-card class="login-card">
+        <el-form :model="form" label-width="60px">
+            <el-form-item label="邮箱">
+                <el-input v-model="form.email" />
+            </el-form-item>
+            <el-form-item label="密码">
+                <el-input v-model="form.password" type="password" show-password />
+            </el-form-item>
+            <el-form-item>
+                <el-button class="login-button" type="primary" @click="onSubmit">登录</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
 </template>

 <style scoped>
@@ -46,7 +55,7 @@ const onSubmit = () => {
    height: 100%;
 }

-.el-card {
+.login-card {
    width: 480px;
    margin: 0 auto;
 }
--- a/blog-frontend/src/views/RegisterView.vue
+++ b/blog-frontend/src/views/RegisterView.vue
@@ -1,11 +1,65 @@
 <script setup lang="ts">
+import { reactive } from 'vue';
+import { api } from '@/api';

+const form = reactive<{
+    email: string,
+    nickname: string,
+    password: string
+}>({
+    email: '',
+    nickname: '',
+    password: ''
+})
+
+const onSubmit = () => {
+    api.UserController.register(form)
+        .then(resp => {
+            let vo = resp.data;
+            if (vo.code === 200) {
+                console.log('register success!')
+            } else {
+                console.warn('register failed: ', vo.msg)
+                return
+            }
+            api.updateCurrentUserInfo();
+        })
+}
 </script>

 <template>
-    <div>
-
+    <div class="register-div">
+        <el-card>
+            <el-form :model="form" label-width="60px">
+                <el-form-item label="邮箱">
+                    <el-input v-model="form.email" />
+                </el-form-item>
+                <el-form-item label="昵称">
+                    <el-input v-model="form.nickname" />
+                </el-form-item>
+                <el-form-item label="密码">
+                    <el-input v-model="form.password" type="password" show-password />
+                </el-form-item>
+                <el-form-item>
+                    <el-button class="register-button" type="primary" @click="onSubmit">注册</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
    </div>
 </template>

-<style scoped></style>
+<style scoped>
+.register-div {
+    height: 100%;
+}
+
+.el-card {
+    width: 480px;
+    margin: 0 auto;
+}
+
+.register-button {
+    margin: 0 auto;
+    width: 80%;
+}
+</style>
--- a/blog-frontend/vite.config.ts
+++ b/blog-frontend/vite.config.ts
@@ -9,13 +9,15 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(),
-  AutoImport({
-    resolvers: [ElementPlusResolver()],
-  }),
-  Components({
-    resolvers: [ElementPlusResolver()],
-  })],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    })
+  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))