feat: 开发中...

blog-backend/src/main/java/cn/hamster3/application/blog/controller/BlogController.java

@@ -1,6 +1,7 @@
 package cn.hamster3.application.blog.controller;
 
 import cn.hamster3.application.blog.service.IBlogService;
+import cn.hamster3.application.blog.vo.PageableVO;
 import cn.hamster3.application.blog.vo.ResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogUpdateRequireVO;
@@ -13,8 +14,6 @@ import org.springframework.data.domain.PageRequest;
 import org.springframework.http.MediaType;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
-
 @Tag(name = "BlogController", description = "博文相关接口")
 @RestController
 @RequestMapping(value = "/api/v1/blog", produces = MediaType.APPLICATION_JSON_VALUE)
@@ -36,7 +35,7 @@ public class BlogController {
 
     @GetMapping("/")
     @Operation(summary = "获取博文列表")
-    public ResponseVO<List<BlogInfoResponseVO>> getBlogInfoList(
+    public ResponseVO<PageableVO<BlogInfoResponseVO>> getBlogInfoList(
             @Parameter(description = "页码", example = "0") int page,
             @Parameter(description = "大小", example = "10") int size
     ) {

blog-backend/src/main/java/cn/hamster3/application/blog/service/IBlogService.java

@@ -1,19 +1,18 @@
 package cn.hamster3.application.blog.service;
 
+import cn.hamster3.application.blog.vo.PageableVO;
 import cn.hamster3.application.blog.vo.ResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogUpdateRequireVO;
 import org.jetbrains.annotations.NotNull;
 import org.springframework.data.domain.PageRequest;
 
-import java.util.List;
-
 public interface IBlogService {
     @NotNull ResponseVO<Long> createBlog(@NotNull BlogUpdateRequireVO requireVO);
 
     @NotNull ResponseVO<BlogInfoResponseVO> getBlogInfo(@NotNull Long blogID);
 
-    @NotNull ResponseVO<List<BlogInfoResponseVO>> getBlogInfoList(@NotNull PageRequest page);
+    @NotNull ResponseVO<PageableVO<BlogInfoResponseVO>> getBlogInfoList(@NotNull PageRequest page);
 
     @NotNull ResponseVO<Void> updateBlog(@NotNull Long blogID, @NotNull BlogUpdateRequireVO requireVO);
 

blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/BlogService.java

@@ -8,6 +8,7 @@ import cn.hamster3.application.blog.entity.mapper.BlogMapper;
 import cn.hamster3.application.blog.entity.repo.BlogRepository;
 import cn.hamster3.application.blog.service.IBlogService;
 import cn.hamster3.application.blog.util.BlogUtils;
+import cn.hamster3.application.blog.vo.PageableVO;
 import cn.hamster3.application.blog.vo.ResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogUpdateRequireVO;
@@ -17,8 +18,6 @@ import org.jetbrains.annotations.NotNull;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.stereotype.Service;
 
-import java.util.List;
-
 @Slf4j
 @Service
 public class BlogService implements IBlogService {
@@ -50,12 +49,8 @@ public class BlogService implements IBlogService {
     }
 
     @Override
-    public @NotNull ResponseVO<List<BlogInfoResponseVO>> getBlogInfoList(@NotNull PageRequest page) {
+    public @NotNull ResponseVO<PageableVO<BlogInfoResponseVO>> getBlogInfoList(@NotNull PageRequest page) {
-        return ResponseVO.success(
+        return PageableVO.success(blogRepo.findAll(page).map(o -> blogMapper.entityToInfoVO(o)));
-                blogRepo.findAll(page).stream()
-                        .map(o -> blogMapper.entityToInfoVO(o))
-                        .toList()
-        );
     }
 
     @Override

blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java

@@ -10,11 +10,26 @@ import java.util.List;
 @Data
 @AllArgsConstructor
 public class PageableVO<T> {
-    private int page;
+    /**
-    private int size;
+     * 当前查询页码
+     */
+    private int pageNumber;
+    /**
+     * 当前查询页面大小
+     */
+    private int pageSize;
+    /**
+     * 总元素数量
+     */
     private long totalElements;
+    /**
+     * 总页码
+     */
     private int totalPage;
-    private List<T> data;
+    /**
+     * 当前查询内容
+     */
+    private List<T> elements;
 
     @NotNull
     public static <T> ResponseVO<PageableVO<T>> success(@NotNull Page<T> page) {

blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java

@@ -15,7 +15,7 @@ public class ResponseVO<T> {
     @Nullable
     private String msg;
     @Nullable
-    private T data;
+    private T content;
 
     @NotNull
     public static ResponseVO<Void> success() {

blog-frontend/index.html

@@ -1,18 +1,16 @@
 <!DOCTYPE html>
 <html>
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico" />
-    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="叁只仓鼠的个人博客" />
-    <meta name="description" content="叁只仓鼠的个人博客">
     <title>网站标题</title>
-    <style id="custom-css"> </style>
+    <style id="custom-css"></style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-</body>
+  </body>
-
 </html>

blog-frontend/package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.3.4",
     "element-plus": "^2.2.32",
     "vue": "^3.2.45",

blog-frontend/src/App.vue

@@ -1,61 +1,63 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted } from "vue";
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
-import HeaderComponent from "@/components/HeaderComponent.vue"
+import HeaderComponent from "@/components/HeaderComponent.vue";
-import FooterComponent from "@/components/FooterComponent.vue"
+import FooterComponent from "@/components/FooterComponent.vue";
 
-import { api, globalStore, siteSetting } from '@/api';
+import { api, globalStore, siteSetting } from "@/api";
 
 globalStore.load();
 
 // 获取当前登录的用户信息
 api.updateCurrentUserInfo();
 onMounted(() => {
-  api.SettingController.getSettingContent(siteSetting.keys.site.css)
+  api.SettingController.getSettingContent(siteSetting.keys.site.css).then(
-    .then(resp => {
+    (resp) => {
-      const vo = resp.data
+      const vo = resp.data;
       if (vo.code === 200) {
-        const cssText = vo.data ?? ""
+        const cssText = vo.content ?? "";
-        let cssElement = document.getElementById("custom-css")
+        let cssElement = document.getElementById("custom-css");
-        siteSetting.css = cssText
+        siteSetting.css = cssText;
-        if (cssElement != null) cssElement.innerText = cssText
+        if (cssElement != null) cssElement.innerText = cssText;
       }
-    })
+    }
-})
+  );
-
+});
 </script>
 
 <template>
-  <el-container class="blog-container">
+  <el-container class="app-container">
-    <el-header class="blog-header">
+    <el-header class="app-header">
       <HeaderComponent />
     </el-header>
-    <el-main class="blog-main">
+    <el-main class="app-main">
       <RouterView />
     </el-main>
-    <el-footer class="blog-footer">
+    <el-footer class="app-footer">
       <FooterComponent />
     </el-footer>
   </el-container>
 </template>
 
 <style scoped>
-.blog-container {
+.app-container {
   width: 100%;
   height: 100%;
 }
 
-.blog-header {
+.app-header {
-  height: auto;
+  margin: 0;
 }
 
-.blog-main {
+.app-main {
-  height: auto;
-}
-
-.blog-footer {
   padding: 0;
-  height: auto;
+  margin: 0;
-  background-color: aqua;
+  width: 100%;
+}
+
+.app-footer {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: aqua;
 }
 </style>

blog-frontend/src/api/api.ts

@@ -1,29 +1,34 @@
-import { UserControllerApiFactory, BlogControllerApiFactory, SettingControllerApiFactory, AttachControllerApiFactory, Configuration } from "@/swagger"
+import {
-import { globalStore } from "./global-store"
+  UserControllerApiFactory,
+  BlogControllerApiFactory,
+  SettingControllerApiFactory,
+  AttachControllerApiFactory,
+  Configuration,
+} from "@/swagger";
+import { globalStore } from "./global-store";
 
 export const apiConfig: Configuration = {
-    baseOptions: {
+  baseOptions: {
-        withCredentials: true
+    withCredentials: true,
-    }
+  },
-}
+};
 
 export const api = {
-    AttachController: AttachControllerApiFactory(apiConfig),
+  AttachController: AttachControllerApiFactory(apiConfig),
-    UserController: UserControllerApiFactory(apiConfig),
+  UserController: UserControllerApiFactory(apiConfig),
-    BlogController: BlogControllerApiFactory(apiConfig),
+  BlogController: BlogControllerApiFactory(apiConfig),
-    SettingController: SettingControllerApiFactory(apiConfig),
+  SettingController: SettingControllerApiFactory(apiConfig),
-    updateCurrentUserInfo: function () {
+  updateCurrentUserInfo: function () {
-        this.UserController.getCurrentUserInfo()
+    this.UserController.getCurrentUserInfo().then((resp) => {
-            .then(resp => {
+      let vo = resp.data;
-                let vo = resp.data
+      if (vo.code === 200) {
-                if (vo.code === 200) {
+        globalStore.currentUserInfo = vo.content;
-                    globalStore.currentUserInfo = vo.data
+        console.log("current user info: ", vo.content);
-                    console.log("current user info: ", vo.data)
+      } else {
-                } else {
+        globalStore.currentUserInfo = undefined;
-                    globalStore.currentUserInfo = undefined
+        console.warn("ckeck current user info failed!");
-                    console.warn("ckeck current user info failed!")
+      }
-                }
+      globalStore.save();
-                globalStore.save()
+    });
-            })
+  },
-    }
+};
-}

blog-frontend/src/api/global-store.ts

@@ -1,39 +1,32 @@
-import { reactive, ref } from "vue"
+import { reactive, ref } from "vue";
 
-import type { UserInfoResponseVO } from "@/swagger"
+import type { UserInfoResponseVO } from "@/swagger";
 
 export const globalStore = reactive<{
-    currentUserInfo?: UserInfoResponseVO,
+  currentUserInfo?: UserInfoResponseVO;
-    load: Function
+  load: Function;
-    save: Function
+  save: Function;
 }>({
-    load: function () {
+  load: function () {},
-        this.currentUserInfo = JSON.parse(window.localStorage.getItem("currentUserInfo") || "{}")
+  save: function () {},
-        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: {
+  keys: {
-        site: {
+    site: {
-            title: "site.title",
+      title: "site.title",
-            navigation: "site.navigation",
+      navigation: "site.navigation",
-            css: "site.css",
+      css: "site.css",
-            footer: "site.footer"
+      footer: "site.footer",
-        }
     },
-    title: "网站标题",
+  },
-    footer: "",
+  title: "网站标题",
-    css: "",
+  footer: "",
-    navigation: ref<Array<{
+  css: "",
-        url: string,
+  navigation: ref<
-        text: string
+    Array<{
-    }>>(),
+      url: string;
-})
+      text: string;
+    }>
+  >(),
+});

blog-frontend/src/api/index.ts

@@ -1,3 +1,3 @@
-export * from "./api.js"
+export * from "./api.js";
-export * from "./global-store.js"
+export * from "./global-store.js";
-export * from "@/swagger"
+export * from "@/swagger";

blog-frontend/src/assets/base.css

@@ -65,8 +65,9 @@ body {
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

blog-frontend/src/assets/main.css

@@ -1,4 +1,4 @@
-@import './base.css';
+@import "./base.css";
 
 html,
 body,

blog-frontend/src/components/BlogComponent.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 function showBlog() {
-    router.push("/blog/" + props.blog.id + "/")
+    router.push("/blog/" + props.blog.id + "/read/")
 }
 
 function showCreator() {

blog-frontend/src/components/FooterComponent.vue

@@ -1,44 +1,41 @@
-
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted } from "vue";
-import { api, siteSetting } from '@/api';
+import { api, siteSetting } from "@/api";
 
 onMounted(() => {
-    // 获取站点页脚
+  // 获取站点页脚
-    api.SettingController.getSettingContent(siteSetting.keys.site.footer)
+  api.SettingController.getSettingContent(siteSetting.keys.site.footer).then(
-        .then(response => {
+    (resp) => {
-            let vo = response.data;
+      let vo = resp.data;
-            if (vo.code === 200) {
+      if (vo.code === 200) {
-                let title = vo.data ?? ""
+        siteSetting.footer = vo.content ?? "";
-                siteSetting.footer = title
+      } else {
-            }
+        console.warn("error on get site footer: " + vo.msg);
-        })
+      }
-})
+    }
+  );
+});
 </script>
 
 <template>
-    <p class="footer-text">
+  <p class="footer-line">
-        <a href="https://cn.vuejs.org/">Vue3</a>
+    <a href="https://cn.vuejs.org/">Vue3</a>
-        |
+    |
-        <a href="https://router.vuejs.org/zh/">Vue Router</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="https://element-plus.gitee.io/zh-CN/">Element UI Plus</a>
-        |
+    |
-        <a href="/swagger-ui/index.html">Swagger</a>
+    <a href="https://www.wangeditor.com/">wangEditor 5</a>
-        |
+    |
-        <a href="https://editor.swagger.io/">Swagger Editor</a>
+    <a href="/swagger-ui/index.html">Swagger</a>
-    </p>
+    |
-    <p class="footer-text">{{ siteSetting.footer }}</p>
+    <a href="https://editor.swagger.io/">Swagger Editor</a>
-    <p class="footer-text">
+  </p>
-        <a
+  <div class="footer-line" v-html="siteSetting.footer"></div>
-            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>
 </template>
 
 <style scoped>
-.footer-text {
+.footer-line {
-    text-align: center;
+  text-align: center;
 }
 </style>

blog-frontend/src/components/HeaderComponent.vue

@@ -1,72 +1,88 @@
-
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
 
-import { UserInfoResponseVORoleEnum, api, globalStore, siteSetting } from "@/api"
+import {
-import router from '@/router';
+  UserInfoResponseVORoleEnum,
+  api,
+  globalStore,
+  siteSetting,
+} from "@/api";
+import router from "@/router";
 
-const menuIndex = ref<string>(document.location.pathname)
+const menuIndex = ref<string>(document.location.pathname);
 
 onMounted(() => {
-    // 获取站点标题
+  // 获取站点标题
-    api.SettingController.getSettingContent(siteSetting.keys.site.title)
+  api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
-        .then(response => {
+    (response) => {
-            let vo = response.data;
+      let vo = response.data;
-            if (vo.code === 200) {
+      if (vo.code === 200) {
-                let title = vo.data ?? "网站标题"
+        let title = vo.content ?? "网站标题";
-                siteSetting.title = title
+        siteSetting.title = title;
-                document.title = title
+        document.title = title;
-            }
+      }
-        })
+    }
-})
+  );
+});
 
 function onSelectMenu(index: string) {
-    switch (index) {
+  switch (index) {
-        case '/logout': {
+    case "/logout": {
-            globalStore.currentUserInfo = undefined
+      globalStore.currentUserInfo = undefined;
-            globalStore.save()
+      globalStore.save();
-            router.push("/")
+      router.push("/");
-            menuIndex.value = "/"
+      menuIndex.value = "/";
-            break;
+      break;
-        }
-        default: {
-            router.push(index)
-        }
     }
+    default: {
+      router.push(index);
+    }
+  }
 }
 </script>
 
 <template>
-    <el-menu :default-active="menuIndex" mode="horizontal" :ellipsis="false" @select="onSelectMenu">
+  <el-menu
-        <el-menu-item index="/">
+    :default-active="menuIndex"
-            {{ siteSetting.title }}
+    mode="horizontal"
-        </el-menu-item>
+    :ellipsis="false"
-        <el-menu-item index="/tags">
+    @select="onSelectMenu"
-            标签
+  >
-        </el-menu-item>
+    <el-menu-item index="/">
-        <el-menu-item v-for="customMenu in siteSetting.navigation" :index="customMenu.text">
+      {{ siteSetting.title }}
-            {{ customMenu.text }}
+    </el-menu-item>
-        </el-menu-item>
+    <el-menu-item index="/tags"> 标签 </el-menu-item>
+    <el-menu-item
+      v-for="customMenu in siteSetting.navigation"
+      :index="customMenu.text"
+    >
+      {{ customMenu.text }}
+    </el-menu-item>
 
-        <div class="flex-grow" />
+    <div class="flex-grow" />
 
-        <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
+    <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
-            登录
+      登录
-        </el-menu-item>
+    </el-menu-item>
-        <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
+    <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
-            注册
+      注册
-        </el-menu-item>
+    </el-menu-item>
-        <el-menu-item index="/manage" v-if="globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN">
+    <el-menu-item
-            管理面板
+      index="/manage"
-        </el-menu-item>
+      v-if="
-        <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
+        globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN
-            注销
+      "
-        </el-menu-item>
+    >
-    </el-menu>
+      管理面板
+    </el-menu-item>
+    <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
+      注销
+    </el-menu-item>
+  </el-menu>
 </template>
 
 <style scoped>
 .flex-grow {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 </style>

blog-frontend/src/components/manage/SiteManageComponent.vue

@@ -1,28 +1,67 @@
-
 <script setup lang="ts">
-import { api, siteSetting } from '@/api';
+import { api, siteSetting } from "@/api";
+import { ElMessage } from "element-plus";
+
 function changeSetting(id: string, content: string) {
-    api.SettingController.updateSetting({ content }, id)
+  api.SettingController.updateSetting({ content }, id).then((resp) => {
+    const vo = resp.data;
+    if (vo.code === 200) {
+      console.log("success change setting '" + id + "' to '" + content + "'");
+      ElMessage({
+        type: "success",
+        message: "更新设置成功！",
+      });
+    } else {
+      ElMessage({
+        type: "error",
+        message: "更新站点设置失败: " + vo.msg,
+      });
+    }
+  });
+}
+function changeFooterHTML(htmlText: string) {
+  siteSetting.footer = htmlText;
+
+  changeSetting(siteSetting.keys.site.footer, htmlText);
 }
 
 function changeCustomCSS(cssText: string) {
-    let cssElement = document.getElementById("custom-css")
+  let cssElement = document.getElementById("custom-css");
-    siteSetting.css = cssText
+  siteSetting.css = cssText;
-    if (cssElement != null) cssElement.innerText = cssText
+  if (cssElement != null) cssElement.innerText = cssText;
-    api.SettingController.updateSetting({ "content": cssText }, siteSetting.keys.site.css)
+  // prettier
+
+  changeSetting(siteSetting.keys.site.css, cssText);
 }
 </script>
+
 <template>
-    <el-input v-model="siteSetting.title" placeholder="网站标题"
+  <el-input
-        @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)" show-word-limit maxlength="10" />
+    v-model="siteSetting.title"
-    <el-input v-model="siteSetting.footer" placeholder="页脚文本（支持HTML）"
+    placeholder="网站标题"
-        @change="changeSetting(siteSetting.keys.site.footer, siteSetting.footer)" show-word-limit maxlength="1024" />
+    @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)"
-    <el-input v-model="siteSetting.css" placeholder="自定义CSS" @change="changeCustomCSS(siteSetting.css)" type="textarea"
+    show-word-limit
-        autosize />
+    maxlength="10"
+  />
+  <el-input
+    type="textarea"
+    show-word-limit
+    maxlength="1024"
+    v-model="siteSetting.footer"
+    placeholder="页脚文本（支持HTML）"
+    @change="changeFooterHTML(siteSetting.footer)"
+  />
+  <el-input
+    type="textarea"
+    autosize
+    v-model="siteSetting.css"
+    placeholder="自定义CSS"
+    @change="changeCustomCSS(siteSetting.css)"
+  />
 </template>
 
 <style scoped>
 .el-input {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 </style>

blog-frontend/src/main.ts

@@ -1,12 +1,12 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import router from "./router";
 
-import './assets/main.css'
+import "./assets/main.css";
-import 'element-plus/dist/index.css'
+import "element-plus/dist/index.css";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

blog-frontend/src/router/index.ts

@@ -29,9 +29,20 @@ const router = createRouter({
       component: () => import('@/views/TagsView.vue')
     },
     {
-      path: '/blog/:id/',
+      path: '/blog/:id',
       name: 'blog',
-      component: () => import('@/views/BlogReadView.vue')
+      children: [
+        {
+          path: 'read',
+          name: 'read',
+          component: () => import('@/views/BlogReadView.vue')
+        },
+        {
+          path: 'edit',
+          name: 'edit',
+          component: () => import('@/views/BlogEditView.vue')
+        }
+      ]
     },
   ]
 })

blog-frontend/src/swagger/apis/blog-controller-api.ts

@@ -18,8 +18,8 @@ import { Configuration } from '../configuration';
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
 import { BlogUpdateRequireVO } from '../models';
 import { ResponseVOBlogInfoResponseVO } from '../models';
-import { ResponseVOListBlogInfoResponseVO } from '../models';
 import { ResponseVOLong } from '../models';
+import { ResponseVOPageableVOBlogInfoResponseVO } from '../models';
 import { ResponseVOVoid } from '../models';
 /**
  * BlogControllerApi - axios parameter creator
@@ -296,7 +296,7 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>>> {
+        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>>> {
             const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).getBlogInfoList(page, size, options);
             return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                 const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -369,7 +369,7 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>> {
+        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>> {
             return BlogControllerApiFp(configuration).getBlogInfoList(page, size, options).then((request) => request(axios, basePath));
         },
         /**
@@ -434,7 +434,7 @@ export class BlogControllerApi extends BaseAPI {
      * @throws {RequiredError}
      * @memberof BlogControllerApi
      */
-    public async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>> {
+    public async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>> {
         return BlogControllerApiFp(this.configuration).getBlogInfoList(page, size, options).then((request) => request(this.axios, this.basePath));
     }
     /**

blog-frontend/src/swagger/apis/user-controller-api.ts

@@ -322,10 +322,10 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        register: async (body: UserCreateRequireVO, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        registerUser: async (body: UserCreateRequireVO, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
             // verify required parameter 'body' is not null or undefined
             if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling register.');
+                throw new RequiredError('body','Required parameter body was null or undefined when calling registerUser.');
             }
             const localVarPath = `/api/v1/user/`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
@@ -511,8 +511,8 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async register(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
+        async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
-            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).register(body, options);
+            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).registerUser(body, options);
             return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                 const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
                 return axios.request(axiosRequestArgs);
@@ -613,8 +613,8 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async register(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
+        async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
-            return UserControllerApiFp(configuration).register(body, options).then((request) => request(axios, basePath));
+            return UserControllerApiFp(configuration).registerUser(body, options).then((request) => request(axios, basePath));
         },
         /**
          * 
@@ -715,8 +715,8 @@ export class UserControllerApi extends BaseAPI {
      * @throws {RequiredError}
      * @memberof UserControllerApi
      */
-    public async register(body: UserCreateRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
+    public async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
-        return UserControllerApiFp(this.configuration).register(body, options).then((request) => request(this.axios, this.basePath));
+        return UserControllerApiFp(this.configuration).registerUser(body, options).then((request) => request(this.axios, this.basePath));
     }
     /**
      * 

blog-frontend/src/swagger/models/attach-entity.ts

@@ -1,57 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface AttachEntity
- */
-export interface AttachEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof AttachEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof AttachEntity
-     */
-    data?: Array<string>;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof AttachEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof AttachEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof AttachEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof AttachEntity
-     */
-    updateTime?: Date;
-}

blog-frontend/src/swagger/models/blog-attach-entity.ts

@@ -1,64 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogEntity } from './blog-entity';
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface BlogAttachEntity
- */
-export interface BlogAttachEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof BlogAttachEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof BlogAttachEntity
-     */
-    data?: Array<string>;
-    /**
-     * 
-     * @type {BlogEntity}
-     * @memberof BlogAttachEntity
-     */
-    blogEntity?: BlogEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogAttachEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogAttachEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogAttachEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogAttachEntity
-     */
-    updateTime?: Date;
-}

blog-frontend/src/swagger/models/blog-entity.ts

@@ -1,100 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogAttachEntity } from './blog-attach-entity';
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface BlogEntity
- */
-export interface BlogEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof BlogEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    title?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    abstracts?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    password?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    content?: string;
-    /**
-     * 
-     * @type {boolean}
-     * @memberof BlogEntity
-     */
-    top?: boolean;
-    /**
-     * 
-     * @type {boolean}
-     * @memberof BlogEntity
-     */
-    publish?: boolean;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof BlogEntity
-     */
-    tags?: Array<string>;
-    /**
-     * 
-     * @type {Array<BlogAttachEntity>}
-     * @memberof BlogEntity
-     */
-    attachEntities?: Array<BlogAttachEntity>;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogEntity
-     */
-    updateTime?: Date;
-}

blog-frontend/src/swagger/models/blog-info-response-vo.ts

@@ -11,8 +11,7 @@
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
-import { BlogAttachEntity } from './blog-attach-entity';
+import { UserInfoResponseVO } from './user-info-response-vo';
-import { UserEntity } from './user-entity';
 /**
  * 
  * @export
@@ -37,12 +36,6 @@ export interface BlogInfoResponseVO {
      * @memberof BlogInfoResponseVO
      */
     abstracts?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogInfoResponseVO
-     */
-    password?: string;
     /**
      * 
      * @type {string}
@@ -69,22 +62,16 @@ export interface BlogInfoResponseVO {
     tags?: Array<string>;
     /**
      * 
-     * @type {Array<BlogAttachEntity>}
+     * @type {UserInfoResponseVO}
      * @memberof BlogInfoResponseVO
      */
-    attachEntities?: Array<BlogAttachEntity>;
+    creator?: UserInfoResponseVO;
     /**
      * 
-     * @type {UserEntity}
+     * @type {UserInfoResponseVO}
      * @memberof BlogInfoResponseVO
      */
-    creator?: UserEntity;
+    updater?: UserInfoResponseVO;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogInfoResponseVO
-     */
-    updater?: UserEntity;
     /**
      * 
      * @type {Date}

blog-frontend/src/swagger/models/index.ts

@@ -1,8 +1,5 @@
 export * from './attach-attach-idbody';
-export * from './attach-entity';
 export * from './attach-info-response-vo';
-export * from './blog-attach-entity';
-export * from './blog-entity';
 export * from './blog-info-response-vo';
 export * from './blog-update-require-vo';
 export * from './pageable-voattach-info-response-vo';
@@ -10,7 +7,6 @@ export * from './pageable-voblog-info-response-vo';
 export * from './pageable-vosetting-info-response-vo';
 export * from './pageable-vouser-info-response-vo';
 export * from './response-voblog-info-response-vo';
-export * from './response-volist-blog-info-response-vo';
 export * from './response-volong';
 export * from './response-vopageable-voattach-info-response-vo';
 export * from './response-vopageable-voblog-info-response-vo';
@@ -23,7 +19,6 @@ export * from './response-vovoid';
 export * from './setting-info-response-vo';
 export * from './setting-update-require-vo';
 export * from './user-create-require-vo';
-export * from './user-entity';
 export * from './user-info-response-vo';
 export * from './user-login-require-vo';
 export * from './user-update-require-vo';

blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts

@@ -47,5 +47,5 @@ export interface PageableVOAttachInfoResponseVO {
      * @type {Array<AttachInfoResponseVO>}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    data?: Array<AttachInfoResponseVO>;
+    elements?: Array<AttachInfoResponseVO>;
 }

blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts

@@ -47,5 +47,5 @@ export interface PageableVOBlogInfoResponseVO {
      * @type {Array<BlogInfoResponseVO>}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    data?: Array<BlogInfoResponseVO>;
+    elements?: Array<BlogInfoResponseVO>;
 }

blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts

@@ -47,5 +47,5 @@ export interface PageableVOSettingInfoResponseVO {
      * @type {Array<SettingInfoResponseVO>}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    data?: Array<SettingInfoResponseVO>;
+    elements?: Array<SettingInfoResponseVO>;
 }

blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts

@@ -47,5 +47,5 @@ export interface PageableVOUserInfoResponseVO {
      * @type {Array<UserInfoResponseVO>}
      * @memberof PageableVOUserInfoResponseVO
      */
-    data?: Array<UserInfoResponseVO>;
+    elements?: Array<UserInfoResponseVO>;
 }

blog-frontend/src/swagger/models/response-voblog-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOBlogInfoResponseVO {
      * @type {BlogInfoResponseVO}
      * @memberof ResponseVOBlogInfoResponseVO
      */
-    data?: BlogInfoResponseVO;
+    content?: BlogInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-volist-blog-info-response-vo.ts

@@ -1,39 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogInfoResponseVO } from './blog-info-response-vo';
-/**
- * 
- * @export
- * @interface ResponseVOListBlogInfoResponseVO
- */
-export interface ResponseVOListBlogInfoResponseVO {
-    /**
-     * 
-     * @type {number}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    code?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    msg?: string;
-    /**
-     * 
-     * @type {Array<BlogInfoResponseVO>}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    data?: Array<BlogInfoResponseVO>;
-}

blog-frontend/src/swagger/models/response-volong.ts

@@ -34,5 +34,5 @@ export interface ResponseVOLong {
      * @type {number}
      * @memberof ResponseVOLong
      */
-    data?: number;
+    content?: number;
 }

blog-frontend/src/swagger/models/response-vopageable-voattach-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOAttachInfoResponseVO {
      * @type {PageableVOAttachInfoResponseVO}
      * @memberof ResponseVOPageableVOAttachInfoResponseVO
      */
-    data?: PageableVOAttachInfoResponseVO;
+    content?: PageableVOAttachInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vopageable-voblog-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOBlogInfoResponseVO {
      * @type {PageableVOBlogInfoResponseVO}
      * @memberof ResponseVOPageableVOBlogInfoResponseVO
      */
-    data?: PageableVOBlogInfoResponseVO;
+    content?: PageableVOBlogInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vopageable-vosetting-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOSettingInfoResponseVO {
      * @type {PageableVOSettingInfoResponseVO}
      * @memberof ResponseVOPageableVOSettingInfoResponseVO
      */
-    data?: PageableVOSettingInfoResponseVO;
+    content?: PageableVOSettingInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vopageable-vouser-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOUserInfoResponseVO {
      * @type {PageableVOUserInfoResponseVO}
      * @memberof ResponseVOPageableVOUserInfoResponseVO
      */
-    data?: PageableVOUserInfoResponseVO;
+    content?: PageableVOUserInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vosetting-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOSettingInfoResponseVO {
      * @type {SettingInfoResponseVO}
      * @memberof ResponseVOSettingInfoResponseVO
      */
-    data?: SettingInfoResponseVO;
+    content?: SettingInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vostring.ts

@@ -34,5 +34,5 @@ export interface ResponseVOString {
      * @type {string}
      * @memberof ResponseVOString
      */
-    data?: string;
+    content?: string;
 }

blog-frontend/src/swagger/models/response-vouser-info-response-vo.ts

@@ -35,5 +35,5 @@ export interface ResponseVOUserInfoResponseVO {
      * @type {UserInfoResponseVO}
      * @memberof ResponseVOUserInfoResponseVO
      */
-    data?: UserInfoResponseVO;
+    content?: UserInfoResponseVO;
 }

blog-frontend/src/swagger/models/response-vovoid.ts

@@ -34,5 +34,5 @@ export interface ResponseVOVoid {
      * @type {any}
      * @memberof ResponseVOVoid
      */
-    data?: any;
+    content?: any;
 }

blog-frontend/src/swagger/models/user-create-require-vo.ts

@@ -34,5 +34,5 @@ export interface UserCreateRequireVO {
      * @type {string}
      * @memberof UserCreateRequireVO
      */
-    password?: string;
+    password: string;
 }

blog-frontend/src/swagger/models/user-entity.ts

@@ -1,87 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { AttachEntity } from './attach-entity';
-import { BlogEntity } from './blog-entity';
-/**
- * 
- * @export
- * @interface UserEntity
- */
-export interface UserEntity {
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    id?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    email: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    nickname: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    password?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    role?: UserEntityRoleEnum;
-    /**
-     * 
-     * @type {Array<BlogEntity>}
-     * @memberof UserEntity
-     */
-    blogEntities?: Array<BlogEntity>;
-    /**
-     * 
-     * @type {Array<AttachEntity>}
-     * @memberof UserEntity
-     */
-    attachEntities?: Array<AttachEntity>;
-    /**
-     * 
-     * @type {Date}
-     * @memberof UserEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof UserEntity
-     */
-    updateTime?: Date;
-}
-
-/**
-    * @export
-    * @enum {string}
-    */
-export enum UserEntityRoleEnum {
-    GUEST = 'GUEST',
-    AUTHOR = 'AUTHOR',
-    ADMIN = 'ADMIN'
-}
-

blog-frontend/src/swagger/models/user-info-response-vo.ts

@@ -11,8 +11,6 @@
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
-import { AttachEntity } from './attach-entity';
-import { BlogEntity } from './blog-entity';
 /**
  * 
  * @export
@@ -43,18 +41,6 @@ export interface UserInfoResponseVO {
      * @memberof UserInfoResponseVO
      */
     role?: UserInfoResponseVORoleEnum;
-    /**
-     * 
-     * @type {Array<BlogEntity>}
-     * @memberof UserInfoResponseVO
-     */
-    blogEntities?: Array<BlogEntity>;
-    /**
-     * 
-     * @type {Array<AttachEntity>}
-     * @memberof UserInfoResponseVO
-     */
-    attachEntities?: Array<AttachEntity>;
     /**
      * 
      * @type {Date}

blog-frontend/src/views/BlogEditView.vue

@@ -1,33 +1,71 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref, shallowRef } from "vue";
-import router from '@/router';
+import { useRoute } from "vue-router";
 
-import type { BlogInfoResponseVO } from '@/swagger';
+import "@wangeditor/editor/dist/css/style.css";
-import { api } from '@/api';
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import type {
+  IDomEditor,
+  IToolbarConfig,
+  IEditorConfig,
+} from "@wangeditor/editor";
 
-const blogInfo = ref<BlogInfoResponseVO>()
+import { api } from "@/api";
+import type { BlogInfoResponseVO } from "@/swagger";
 
-onMounted(() => {
+const editorRef = shallowRef();
-    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
+const toolbarConfig: IToolbarConfig = {};
-    if (blogID) {
+const editorConfig: IEditorConfig = {};
-        api.BlogController.getBlogInfo(parseInt(blogID))
+const content = ref<string>("<p>hello</p>");
-            .then(resp => {
+
-                const vo = resp.data
+const handleCreated = (editor: IDomEditor) => {
-                blogInfo.value = vo.data || {}
+  editorRef.value = editor; // 记录 editor 实例，重要！
-            })
+};
-    }
+const blogInfo = ref<BlogInfoResponseVO>();
-})
+
+const blogID = useRoute().params.id.toString();
+if (blogID) {
+  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+    const vo = resp.data;
+    blogInfo.value = vo.content || {};
+  });
+}
 </script>
 
 <template>
-    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+  <el-form> </el-form>
-    <div class="blog-content" v-html="blogInfo?.content"></div>
+  <Toolbar
+    class="editor-toolbar"
+    :editor="editorRef"
+    :defaultConfig="toolbarConfig"
+    mode="default"
+  />
+  <div class="editor">
+    <Editor
+      v-model="content"
+      :defaultConfig="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+    />
+  </div>
 </template>
 
 <style scoped>
-.blog-title {
+.editor-div {
-    text-align: center;
+  height: 100%;
+  border: 1px solid #ccc;
 }
 
-.blog-content {}
+.editor-toolbar {
+  border-bottom: 1px solid #ccc;
+  height: auto;
+}
+
+.editor-scrollbar {
+  height: 100%;
+}
+
+.editor {
+  height: 80%;
+}
 </style>

blog-frontend/src/views/BlogReadView.vue

@@ -1,33 +1,70 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref } from "vue";
-import router from '@/router';
+import { useRoute } from "vue-router";
 
-import type { BlogInfoResponseVO } from '@/swagger';
+import { api } from "@/api";
-import { api } from '@/api';
+import type { BlogInfoResponseVO } from "@/swagger";
+import router from "@/router";
 
-const blogInfo = ref<BlogInfoResponseVO>()
+const blogInfo = ref<BlogInfoResponseVO>();
 
-onMounted(() => {
+const blogID = useRoute().params.id.toString();
-    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
+if (blogID) {
-    if (blogID) {
+  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
-        api.BlogController.getBlogInfo(parseInt(blogID))
+    const vo = resp.data;
-            .then(resp => {
+    blogInfo.value = vo.content || {};
-                const vo = resp.data
+  });
-                blogInfo.value = vo.data || {}
+}
-            })
+
-    }
+function edit() {
-})
+  router.push("/blog/" + blogID + "/edit/");
+}
 </script>
 
 <template>
-    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+  <el-container class="blog-container">
-    <div class="blog-content" v-html="blogInfo?.content"></div>
+    <el-header class="blog-header">
+      <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+    </el-header>
+    <el-container>
+      <el-aside width="200px" class="blog-aside">
+        <el-button type="primary" @click="edit">编辑</el-button>
+      </el-aside>
+      <el-container>
+        <el-main v-html="blogInfo?.content"> </el-main>
+      </el-container>
+    </el-container>
+  </el-container>
 </template>
 
 <style scoped>
-.blog-title {
+.blog-container {
-    text-align: center;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
 }
 
-.blog-content {}
+.blog-header {
+  background-color: aqua;
+  height: auto;
+  padding: 5px 0 5px 0;
+}
+
+.blog-title {
+  text-align: center;
+  font-size: xx-large;
+}
+
+.blog-aside {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+}
+
+.blog-content {
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
 </style>

blog-frontend/src/views/IndexView.vue

@@ -1,55 +1,64 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive } from "vue";
-import BlogComponent from '@/components/BlogComponent.vue';
+import BlogComponent from "@/components/BlogComponent.vue";
-import { api, type BlogInfoResponseVO } from '@/api';
+import { api, type BlogInfoResponseVO } from "@/api";
+
+let page = 0;
+const blogs = reactive<Array<BlogInfoResponseVO>>([]);
 
-let page = 0
-const blogs = reactive<Array<BlogInfoResponseVO>>([])
 function load() {
-    api.BlogController.getBlogInfoList(page, 5)
+  api.BlogController.getBlogInfoList(page, 5).then((resp) => {
-        .then(resp => {
+    const vo = resp.data;
-            const vo = resp.data
+    const page = vo.content;
-            for (let item of vo.data ?? []) {
+    for (let item of page?.elements ?? []) {
-                item.createTime = new Date(item?.createTime ?? 0)
+      item.createTime = new Date(item?.createTime ?? 0);
-                item.updateTime = new Date(item?.updateTime ?? 0)
+      item.updateTime = new Date(item?.updateTime ?? 0);
-                blogs.push(item)
+      blogs.push(item);
-            }
+    }
-        })
+    console.log(page);
-    page = page + 1;
+    if (page?.elements?.length ?? 0 > 0) {
+      console.log(
+        "loaded page " +
+          page?.page +
+          " for element count: " +
+          page?.elements?.length
+      );
+    }
+  });
+  page = page + 1;
 }
 </script>
 
 <template>
-    <el-scrollbar style="overflow: auto">
+  <el-scrollbar style="overflow: auto">
-        <ul class="infinite-list" v-infinite-scroll="load">
+    <ul class="infinite-list" v-infinite-scroll="load">
-            <li v-for=" blog in blogs" :key="blog.id" class="infinite-list-item">
+      <li v-for="blog in blogs" :key="blog.id" class="infinite-list-item">
-                <BlogComponent :blog="blog"></BlogComponent>
+        <BlogComponent :blog="blog"></BlogComponent>
-            </li>
+      </li>
-        </ul>
+    </ul>
-    </el-scrollbar>
+  </el-scrollbar>
 </template>
 
 <style scoped>
 .infinite-list {
-    height: 100%;
+  height: 100%;
-    padding: 0;
+  padding: 0;
-    margin: 0;
+  margin: 0;
-    list-style: none;
+  list-style: none;
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 .infinite-list .infinite-list-item {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    /* height: 50px; */
+  /* height: 50px; */
-    background: var(--el-color-primary-light-9);
+  background: var(--el-color-primary-light-9);
-    margin: 10px;
+  margin: 10px;
-    color: var(--el-color-primary);
+  color: var(--el-color-primary);
 }
 
-.infinite-list .infinite-list-item+.list-item {
+.infinite-list .infinite-list-item + .list-item {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 </style>
-  

blog-frontend/src/views/LoginView.vue

@@ -1,67 +1,68 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive } from "vue";
-import router from '@/router';
+import router from "@/router";
 
-import { ElMessage } from 'element-plus';
+import { ElMessage } from "element-plus";
 
-import { api } from '@/api';
+import { api } from "@/api";
 
 const form = reactive({
-    email: '',
+  email: "",
-    password: ''
+  password: "",
-})
+});
 
 const onSubmit = () => {
-    api.UserController.loginUser(form)
+  api.UserController.loginUser(form).then((resp) => {
-        .then(resp => {
+    let vo = resp.data;
-            let vo = resp.data;
+    if (vo.code === 200) {
-            if (vo.code === 200) {
+      ElMessage({
-                ElMessage({
+        message: vo.msg,
-                    message: vo.msg,
+        type: "success",
-                    type: 'success'
+      });
-                })
+      console.log("login success: ", vo.msg);
-                console.log('login success: ', vo.msg)
+      api.updateCurrentUserInfo();
-                api.updateCurrentUserInfo();
+      router.push("/");
-                router.push("/")
+    } else {
-            } else {
+      ElMessage({
-                ElMessage({
+        message: vo.msg,
-                    message: vo.msg,
+        type: "warning",
-                    type: 'warning'
+      });
-                })
+      console.log("login failed: ", vo.msg);
-                console.log('login failed: ', vo.msg)
+    }
-            }
+  });
-        })
+};
-}
 </script>
 
 <template>
-    <el-card class="login-card">
+  <el-card class="login-card">
-        <el-form :model="form" label-width="60px">
+    <el-form :model="form" label-width="60px">
-            <el-form-item label="邮箱">
+      <el-form-item label="邮箱">
-                <el-input v-model="form.email" />
+        <el-input v-model="form.email" />
-            </el-form-item>
+      </el-form-item>
-            <el-form-item label="密码">
+      <el-form-item label="密码">
-                <el-input v-model="form.password" type="password" show-password />
+        <el-input v-model="form.password" type="password" show-password />
-            </el-form-item>
+      </el-form-item>
-            <el-form-item>
+      <el-form-item>
-                <el-button class="login-button" type="primary" @click="onSubmit">登录</el-button>
+        <el-button class="login-button" type="primary" @click="onSubmit"
-            </el-form-item>
+          >登录</el-button
-        </el-form>
+        >
-    </el-card>
+      </el-form-item>
+    </el-form>
+  </el-card>
 </template>
 
 <style scoped>
 .login-div {
-    height: 100%;
+  height: 100%;
 }
 
 .login-card {
-    width: 480px;
+  width: 480px;
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 .login-button {
-    margin: 0 auto;
+  margin: 0 auto;
-    width: 80%;
+  width: 80%;
 }
 </style>

blog-frontend/src/views/ManagePaneView.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from "vue";
-import SiteManageComponent from '@/components/manage/SiteManageComponent.vue';
+import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
-import { globalStore } from '@/api';
+import { globalStore } from "@/api";
 
-const activeName = ref<string>('site')
+const activeName = ref<string>("site");
 
 onMounted(() => {
-    if (!globalStore.currentUserInfo?.id) {
+  if (!globalStore.currentUserInfo?.id) {
-        location.pathname = "/"
+    location.pathname = "/";
-        console.log("not login!")
+    console.log("not login!");
-    }
+  }
-})
+});
 </script>
 
 <template>
-    <el-tabs v-model="activeName" type="card" class="demo-tabs">
+  <el-tabs v-model="activeName" type="card" class="demo-tabs">
-        <el-tab-pane label="网站设置" name="site">
+    <el-tab-pane label="网站设置" name="site">
-            <SiteManageComponent />
+      <SiteManageComponent />
-        </el-tab-pane>
+    </el-tab-pane>
-        <el-tab-pane label="博文设置" name="third">Role</el-tab-pane>
+    <el-tab-pane label="博文设置" name="third">Role</el-tab-pane>
-        <el-tab-pane label="用户设置" name="user">Config</el-tab-pane>
+    <el-tab-pane label="用户设置" name="user">Config</el-tab-pane>
-        <el-tab-pane label="评论设置" name="test">Role</el-tab-pane>
+    <el-tab-pane label="评论设置" name="test">Role</el-tab-pane>
-    </el-tabs>
+  </el-tabs>
 </template>
 
-
 <style scoped></style>

blog-frontend/src/views/RegisterView.vue

@@ -1,65 +1,66 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive } from "vue";
-import { api } from '@/api';
+import { api } from "@/api";
 
 const form = reactive<{
-    email: string,
+  email: string;
-    nickname: string,
+  nickname: string;
-    password: string
+  password: string;
 }>({
-    email: '',
+  email: "",
-    nickname: '',
+  nickname: "",
-    password: ''
+  password: "",
-})
+});
 
 const onSubmit = () => {
-    api.UserController.register(form)
+  api.UserController.register(form).then((resp) => {
-        .then(resp => {
+    let vo = resp.data;
-            let vo = resp.data;
+    if (vo.code === 200) {
-            if (vo.code === 200) {
+      console.log("register success!");
-                console.log('register success!')
+    } else {
-            } else {
+      console.warn("register failed: ", vo.msg);
-                console.warn('register failed: ', vo.msg)
+      return;
-                return
+    }
-            }
+    api.updateCurrentUserInfo();
-            api.updateCurrentUserInfo();
+  });
-        })
+};
-}
 </script>
 
 <template>
-    <div class="register-div">
+  <div class="register-div">
-        <el-card>
+    <el-card>
-            <el-form :model="form" label-width="60px">
+      <el-form :model="form" label-width="60px">
-                <el-form-item label="邮箱">
+        <el-form-item label="邮箱">
-                    <el-input v-model="form.email" />
+          <el-input v-model="form.email" />
-                </el-form-item>
+        </el-form-item>
-                <el-form-item label="昵称">
+        <el-form-item label="昵称">
-                    <el-input v-model="form.nickname" />
+          <el-input v-model="form.nickname" />
-                </el-form-item>
+        </el-form-item>
-                <el-form-item label="密码">
+        <el-form-item label="密码">
-                    <el-input v-model="form.password" type="password" show-password />
+          <el-input v-model="form.password" type="password" show-password />
-                </el-form-item>
+        </el-form-item>
-                <el-form-item>
+        <el-form-item>
-                    <el-button class="register-button" type="primary" @click="onSubmit">注册</el-button>
+          <el-button class="register-button" type="primary" @click="onSubmit"
-                </el-form-item>
+            >注册</el-button
-            </el-form>
+          >
-        </el-card>
+        </el-form-item>
-    </div>
+      </el-form>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
 .register-div {
-    height: 100%;
+  height: 100%;
 }
 
 .el-card {
-    width: 480px;
+  width: 480px;
-    margin: 0 auto;
+  margin: 0 auto;
 }
 
 .register-button {
-    margin: 0 auto;
+  margin: 0 auto;
-    width: 80%;
+  width: 80%;
 }
 </style>

blog-frontend/src/views/TagsView.vue

@@ -1,13 +1,7 @@
 <template>
-    <div>
+  <div></div>
-
-    </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
 
-</script>
+<style scoped></style>
-
-<style scoped>
-
-</style>