diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java
index bf9628d..3233e0f 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java
@@ -1,8 +1,8 @@
 package cn.hamster3.application.blog.vo;
 
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
-import org.jetbrains.annotations.NotNull;
 import org.springframework.data.domain.Page;
 
 import java.util.List;
@@ -13,22 +13,27 @@ public class PageableVO<T> {
     /**
      * 当前查询页码
      */
-    private int pageNumber;
+    @NotNull
+    private Integer pageNumber;
     /**
      * 当前查询页面大小
      */
-    private int pageSize;
+    @NotNull
+    private Integer pageSize;
     /**
      * 总元素数量
      */
-    private long totalElements;
+    @NotNull
+    private Long totalElements;
     /**
      * 总页码
      */
-    private int totalPage;
+    @NotNull
+    private Integer totalPage;
     /**
      * 当前查询内容
      */
+    @NotNull
     private List<T> elements;
 
     @NotNull
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java
index fcda663..3b35036 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java
@@ -46,5 +46,4 @@ public class ResponseVO<T> {
     public static <T> ResponseVO<T> notFound() {
         return new ResponseVO<>(404, "Not Found", null);
     }
-
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java
index bbf31f8..7faa530 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.attach;
 
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
@@ -9,8 +10,12 @@ import java.util.UUID;
 @Data
 @AllArgsConstructor
 public class AttachInfoResponseVO {
+    @NotNull
     private Long id;
+    @NotNull
     private UUID creator;
+    @NotNull
     private Date createTime;
+    @NotNull
     private Date updateTime;
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
index f85e3b7..c35ab08 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
@@ -3,6 +3,7 @@ package cn.hamster3.application.blog.vo.blog;
 import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
 import lombok.AllArgsConstructor;
 import lombok.Data;
+import jakarta.validation.constraints.NotNull;
 
 import java.util.Date;
 import java.util.Set;
@@ -10,17 +11,27 @@ import java.util.Set;
 @Data
 @AllArgsConstructor
 public class BlogInfoResponseVO {
+    @NotNull
     private Long id;
+    @NotNull
     private String title;
+    @NotNull
     private String abstracts;
-    //    private String password;
+    @NotNull
     private String content;
+    @NotNull
     private Boolean top;
+    @NotNull
     private Boolean publish;
+    @NotNull
     private Set<String> tags;
     //    private List<BlogAttachEntity> attachEntities;
+    @NotNull
     private UserInfoResponseVO creator;
+    @NotNull
     private UserInfoResponseVO updater;
+    @NotNull
     private Date createTime;
+    @NotNull
     private Date updateTime;
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java
index f7d0ff4..74a1b3d 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.setting;
 
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
@@ -8,8 +9,12 @@ import java.util.Date;
 @Data
 @AllArgsConstructor
 public class SettingInfoResponseVO {
+    @NotNull
     private String id;
+    @NotNull
     private String content;
+    @NotNull
     private Date createTime;
+    @NotNull
     private Date updateTime;
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java
index 564f281..6038020 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.setting;
 
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
@@ -8,5 +9,6 @@ import lombok.NoArgsConstructor;
 @NoArgsConstructor
 @AllArgsConstructor
 public class SettingUpdateRequireVO {
+    @NotNull
     private String content;
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
index 6951e8e..aa34894 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
@@ -1,6 +1,7 @@
 package cn.hamster3.application.blog.vo.user;
 
 import cn.hamster3.application.blog.constant.UserRole;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
@@ -10,12 +11,18 @@ import java.util.UUID;
 @Data
 @AllArgsConstructor
 public class UserInfoResponseVO {
+    @NotNull
     private UUID id;
+    @NotNull
     private String email;
+    @NotNull
     private String nickname;
+    @NotNull
     private UserRole role;
     //    private List<BlogEntity> blogEntities;
 //    private List<AttachEntity> attachEntities;
+    @NotNull
     private Date createTime;
+    @NotNull
     private Date updateTime;
 }
diff --git a/blog-frontend/src/components/BlogCardComponent.vue b/blog-frontend/src/components/BlogCardComponent.vue
new file mode 100644
index 0000000..7769ce5
--- /dev/null
+++ b/blog-frontend/src/components/BlogCardComponent.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import router from "@/router";
+
+import type { BlogInfoResponseVO } from "@/swagger";
+
+const props = defineProps<{
+  blog: BlogInfoResponseVO;
+}>();
+
+function showBlog() {
+  router.push("/blog/" + props.blog.id + "/read/");
+}
+
+function showCreator() {
+  console.log("showCreator");
+}
+
+function showUpdater() {
+  console.log("showUpdater");
+}
+</script>
+
+<template>
+  <el-card class="blog-card">
+    <template #header>
+      <div class="blog-card-header">
+        <p @click="showBlog" class="blog-card-title">{{ blog.title }}</p>
+        <div>
+          <p>
+            <el-avatar :size="24" src="/favicon.ico" />
+            {{ blog.creator?.nickname }}
+          </p>
+          <p @click="showCreator" class="blog-card-creater">
+            {{ " 发表于：" + blog.updateTime?.toLocaleString() }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <div class="blog-card-body">
+      <div class="blog-card-abstract" v-html="blog.abstracts"></div>
+      <div class="blog-card-footer">
+        <div @click="showUpdater">
+          <p>
+            {{ " 最后修改于：" + blog.updateTime?.toLocaleString() }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.blog-card {
+  width: 100%;
+  cursor: pointer;
+}
+
+.blog-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.blog-card-header :hover {
+  text-decoration: underline;
+}
+
+.blog-card-title {
+  font-size: x-large;
+}
+
+.blog-card-creater {
+  font-size: medium;
+}
+
+.blog-card-abstract {
+  font-size: medium;
+  margin-bottom: 20px;
+}
+
+.blog-card-footer {
+  padding-top: 20px;
+  border: 1px solid #ccc;
+  border-bottom-width: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.blog-card-footer :hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/blog-frontend/src/components/BlogComponent.vue b/blog-frontend/src/components/BlogComponent.vue
deleted file mode 100644
index ce35b00..0000000
--- a/blog-frontend/src/components/BlogComponent.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import router from "@/router";
-
-import type { BlogInfoResponseVO } from "@/swagger";
-
-const props = defineProps<{
-  blog: BlogInfoResponseVO;
-}>();
-
-function showBlog() {
-  router.push("/blog/" + props.blog.id + "/read/");
-}
-
-function showCreator() {
-  console.log("showCreator");
-}
-
-function showUpdater() {
-  console.log("showUpdater");
-}
-</script>
-
-<template>
-  <el-card class="blog-card">
-    <template #header>
-      <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 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>
-.blog-card {
-  width: 100%;
-  cursor: pointer;
-}
-
-.blog-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.blog-card-header :hover {
-  text-decoration: underline;
-}
-
-.blog-card-footer :hover {
-  text-decoration: underline;
-}
-
-.item {
-  margin-bottom: 18px;
-}
-</style>
diff --git a/blog-frontend/src/components/HeaderComponent.vue b/blog-frontend/src/components/HeaderComponent.vue
index 338a27e..eae13f6 100644
--- a/blog-frontend/src/components/HeaderComponent.vue
+++ b/blog-frontend/src/components/HeaderComponent.vue
@@ -43,6 +43,7 @@ function onSelectMenu(index: string) {
     mode="horizontal"
     :ellipsis="false"
     @select="onSelectMenu"
+    class="blog-header-menu"
   >
     <el-menu-item index="/">
       {{ siteSetting.title }}
diff --git a/blog-frontend/src/swagger/models/attach-info-response-vo.ts b/blog-frontend/src/swagger/models/attach-info-response-vo.ts
index 214c802..b157ca4 100644
--- a/blog-frontend/src/swagger/models/attach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/attach-info-response-vo.ts
@@ -22,23 +22,23 @@ export interface AttachInfoResponseVO {
      * @type {number}
      * @memberof AttachInfoResponseVO
      */
-    id?: number;
+    id: number;
     /**
      * 
      * @type {string}
      * @memberof AttachInfoResponseVO
      */
-    creator?: string;
+    creator: string;
     /**
      * 
      * @type {Date}
      * @memberof AttachInfoResponseVO
      */
-    createTime?: Date;
+    createTime: Date;
     /**
      * 
      * @type {Date}
      * @memberof AttachInfoResponseVO
      */
-    updateTime?: Date;
+    updateTime: Date;
 }
diff --git a/blog-frontend/src/swagger/models/blog-info-response-vo.ts b/blog-frontend/src/swagger/models/blog-info-response-vo.ts
index 8517e38..d4b3440 100644
--- a/blog-frontend/src/swagger/models/blog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/blog-info-response-vo.ts
@@ -23,65 +23,65 @@ export interface BlogInfoResponseVO {
      * @type {number}
      * @memberof BlogInfoResponseVO
      */
-    id?: number;
+    id: number;
     /**
      * 
      * @type {string}
      * @memberof BlogInfoResponseVO
      */
-    title?: string;
+    title: string;
     /**
      * 
      * @type {string}
      * @memberof BlogInfoResponseVO
      */
-    abstracts?: string;
+    abstracts: string;
     /**
      * 
      * @type {string}
      * @memberof BlogInfoResponseVO
      */
-    content?: string;
+    content: string;
     /**
      * 
      * @type {boolean}
      * @memberof BlogInfoResponseVO
      */
-    top?: boolean;
+    top: boolean;
     /**
      * 
      * @type {boolean}
      * @memberof BlogInfoResponseVO
      */
-    publish?: boolean;
+    publish: boolean;
     /**
      * 
      * @type {Array<string>}
      * @memberof BlogInfoResponseVO
      */
-    tags?: Array<string>;
+    tags: Array<string>;
     /**
      * 
      * @type {UserInfoResponseVO}
      * @memberof BlogInfoResponseVO
      */
-    creator?: UserInfoResponseVO;
+    creator: UserInfoResponseVO;
     /**
      * 
      * @type {UserInfoResponseVO}
      * @memberof BlogInfoResponseVO
      */
-    updater?: UserInfoResponseVO;
+    updater: UserInfoResponseVO;
     /**
      * 
      * @type {Date}
      * @memberof BlogInfoResponseVO
      */
-    createTime?: Date;
+    createTime: Date;
     /**
      * 
      * @type {Date}
      * @memberof BlogInfoResponseVO
      */
-    updateTime?: Date;
+    updateTime: Date;
 }
diff --git a/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts b/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
index 5493a5d..8a53894 100644
--- a/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOAttachInfoResponseVO {
      * @type {number}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    page?: number;
+    pageNumber: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    size?: number;
+    pageSize: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    totalElements?: number;
+    totalElements: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    totalPage?: number;
+    totalPage: number;
     /**
      * 
      * @type {Array<AttachInfoResponseVO>}
      * @memberof PageableVOAttachInfoResponseVO
      */
-    elements?: Array<AttachInfoResponseVO>;
+    elements: Array<AttachInfoResponseVO>;
 }
diff --git a/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts b/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts
index 74727a2..5ac5d97 100644
--- a/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOBlogInfoResponseVO {
      * @type {number}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    page?: number;
+    pageNumber: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    size?: number;
+    pageSize: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    totalElements?: number;
+    totalElements: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    totalPage?: number;
+    totalPage: number;
     /**
      * 
      * @type {Array<BlogInfoResponseVO>}
      * @memberof PageableVOBlogInfoResponseVO
      */
-    elements?: Array<BlogInfoResponseVO>;
+    elements: Array<BlogInfoResponseVO>;
 }
diff --git a/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts b/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts
index 0eafbf9..1b494cb 100644
--- a/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOSettingInfoResponseVO {
      * @type {number}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    page?: number;
+    pageNumber: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    size?: number;
+    pageSize: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    totalElements?: number;
+    totalElements: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    totalPage?: number;
+    totalPage: number;
     /**
      * 
      * @type {Array<SettingInfoResponseVO>}
      * @memberof PageableVOSettingInfoResponseVO
      */
-    elements?: Array<SettingInfoResponseVO>;
+    elements: Array<SettingInfoResponseVO>;
 }
diff --git a/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts b/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts
index 3f4a730..5410ac5 100644
--- a/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOUserInfoResponseVO {
      * @type {number}
      * @memberof PageableVOUserInfoResponseVO
      */
-    page?: number;
+    pageNumber: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOUserInfoResponseVO
      */
-    size?: number;
+    pageSize: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOUserInfoResponseVO
      */
-    totalElements?: number;
+    totalElements: number;
     /**
      * 
      * @type {number}
      * @memberof PageableVOUserInfoResponseVO
      */
-    totalPage?: number;
+    totalPage: number;
     /**
      * 
      * @type {Array<UserInfoResponseVO>}
      * @memberof PageableVOUserInfoResponseVO
      */
-    elements?: Array<UserInfoResponseVO>;
+    elements: Array<UserInfoResponseVO>;
 }
diff --git a/blog-frontend/src/swagger/models/setting-info-response-vo.ts b/blog-frontend/src/swagger/models/setting-info-response-vo.ts
index d4d3ebc..c5a7642 100644
--- a/blog-frontend/src/swagger/models/setting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/setting-info-response-vo.ts
@@ -22,23 +22,23 @@ export interface SettingInfoResponseVO {
      * @type {string}
      * @memberof SettingInfoResponseVO
      */
-    id?: string;
+    id: string;
     /**
      * 
      * @type {string}
      * @memberof SettingInfoResponseVO
      */
-    content?: string;
+    content: string;
     /**
      * 
      * @type {Date}
      * @memberof SettingInfoResponseVO
      */
-    createTime?: Date;
+    createTime: Date;
     /**
      * 
      * @type {Date}
      * @memberof SettingInfoResponseVO
      */
-    updateTime?: Date;
+    updateTime: Date;
 }
diff --git a/blog-frontend/src/swagger/models/setting-update-require-vo.ts b/blog-frontend/src/swagger/models/setting-update-require-vo.ts
index a4dbb47..854b887 100644
--- a/blog-frontend/src/swagger/models/setting-update-require-vo.ts
+++ b/blog-frontend/src/swagger/models/setting-update-require-vo.ts
@@ -22,5 +22,5 @@ export interface SettingUpdateRequireVO {
      * @type {string}
      * @memberof SettingUpdateRequireVO
      */
-    content?: string;
+    content: string;
 }
diff --git a/blog-frontend/src/swagger/models/user-info-response-vo.ts b/blog-frontend/src/swagger/models/user-info-response-vo.ts
index e92d69a..797507d 100644
--- a/blog-frontend/src/swagger/models/user-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/user-info-response-vo.ts
@@ -22,37 +22,37 @@ export interface UserInfoResponseVO {
      * @type {string}
      * @memberof UserInfoResponseVO
      */
-    id?: string;
+    id: string;
     /**
      * 
      * @type {string}
      * @memberof UserInfoResponseVO
      */
-    email?: string;
+    email: string;
     /**
      * 
      * @type {string}
      * @memberof UserInfoResponseVO
      */
-    nickname?: string;
+    nickname: string;
     /**
      * 
      * @type {string}
      * @memberof UserInfoResponseVO
      */
-    role?: UserInfoResponseVORoleEnum;
+    role: UserInfoResponseVORoleEnum;
     /**
      * 
      * @type {Date}
      * @memberof UserInfoResponseVO
      */
-    createTime?: Date;
+    createTime: Date;
     /**
      * 
      * @type {Date}
      * @memberof UserInfoResponseVO
      */
-    updateTime?: Date;
+    updateTime: Date;
 }
 
 /**
diff --git a/blog-frontend/src/views/BlogEditView.vue b/blog-frontend/src/views/BlogEditView.vue
index ef2e189..ce63991 100644
--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, shallowRef } from "vue";
+import { onMounted, reactive, ref, shallowRef } from "vue";
 import { useRoute } from "vue-router";
 
 import "@wangeditor/editor/dist/css/style.css";
@@ -10,62 +10,159 @@ import type {
   IEditorConfig,
 } from "@wangeditor/editor";
 
-import { api } from "@/api";
-import type { BlogInfoResponseVO } from "@/swagger";
+import { api, globalStore } from "@/api";
+import type { BlogInfoResponseVO, BlogUpdateRequireVO } from "@/swagger";
+import { ElMessage } from "element-plus";
+import router from "@/router";
 
 const editorRef = shallowRef();
 const toolbarConfig: IToolbarConfig = {};
 const editorConfig: IEditorConfig = {};
-const content = ref<string>("<p>hello</p>");
 
-const handleCreated = (editor: IDomEditor) => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
-};
-const blogInfo = ref<BlogInfoResponseVO>();
+const editBlog = reactive<BlogUpdateRequireVO>({
+  title: "",
+  content: "",
+  tags: [],
+});
+let tags = ref<string>();
+const blogID = parseInt(useRoute().params.id.toString());
 
-const blogID = useRoute().params.id.toString();
-if (blogID) {
-  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+onMounted(() => {
+  if (blogID) {
+    api.BlogController.getBlogInfo(blogID).then((resp) => {
+      const vo = resp.data;
+      if (vo.code === 200) {
+        const blog = vo.content;
+        editBlog.title = blog?.title ?? "";
+        editBlog.abstracts = blog?.abstracts;
+        editBlog.tags = blog?.tags ?? [];
+        editBlog.top = blog?.top;
+        editBlog.publish = blog?.publish;
+        editBlog.content = blog?.content ?? "";
+        tags.value = blog?.tags.toString();
+      } else {
+        ElMessage({
+          type: "error",
+          message: "加载博文内容失败：" + vo.msg,
+        });
+        location.pathname = "/";
+        console.log("not login!");
+      }
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      message: "加载博文内容失败！",
+    });
+    location.pathname = "/";
+    console.log("not login!");
+  }
+});
+
+function saveBlog() {
+  api.BlogController.updateBlog(editBlog, blogID).then((resp) => {
     const vo = resp.data;
-    blogInfo.value = vo.content || {};
+    if (vo.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "更新博文成功！",
+      });
+      console.log("update blog " + blogID + " success!");
+      router.push("/blog/" + blogID + "/read/");
+    } else {
+      ElMessage({
+        type: "error",
+        message: "更新博文失败: " + vo.msg,
+      });
+    }
   });
 }
+
+function cancelSave() {
+  router.push("/blog/" + blogID + "/read/");
+}
+
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+}
 </script>
 
 <template>
-  <el-form> </el-form>
-  <Toolbar
-    class="editor-toolbar"
-    :editor="editorRef"
-    :defaultConfig="toolbarConfig"
-    mode="default"
-  />
-  <div class="editor">
-    <Editor
-      v-model="content"
-      :defaultConfig="editorConfig"
-      mode="default"
-      @onCreated="handleCreated"
-    />
-  </div>
+  <el-container class="edit-container">
+    <el-aside class="edit-content-side">
+      <div class="edit-content-toolbar">
+        <Toolbar
+          :editor="editorRef"
+          :defaultConfig="toolbarConfig"
+          mode="default"
+        />
+      </div>
+      <el-scrollbar class="edit-content-scrollbar">
+        <Editor
+          v-model="editBlog.content"
+          :defaultConfig="editorConfig"
+          mode="default"
+          @onCreated="handleCreated"
+        />
+      </el-scrollbar>
+    </el-aside>
+    <el-main>
+      <el-form :model="editBlog">
+        <el-form-item label="博文标题">
+          <el-input
+            placeholder="博文标题"
+            maxlength="128"
+            show-word-limit
+            v-model="editBlog.title"
+          />
+        </el-form-item>
+        <el-form-item label="博文摘要">
+          <el-input
+            placeholder="博文摘要"
+            maxlength="512"
+            show-word-limit
+            type="textarea"
+            v-model="editBlog.abstracts"
+          />
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-input placeholder="用 '|' 隔开" v-model="tags" />
+        </el-form-item>
+        <el-form-item label="是否置顶">
+          <el-switch v-model="editBlog.top" />
+        </el-form-item>
+        <el-form-item label="是否公开">
+          <el-switch v-model="editBlog.publish" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="saveBlog">保存</el-button>
+          <el-button @click="cancelSave">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-main>
+  </el-container>
 </template>
 
 <style scoped>
-.editor-div {
+.edit-container {
   height: 100%;
+  padding: 0 20px 0 20px;
+  margin: 0;
+}
+
+.edit-content-side {
+  height: 100%;
+  width: 80%;
+}
+
+.edit-content-toolbar {
+  height: 80px;
   border: 1px solid #ccc;
+  border-top-width: 0;
 }
-
-.editor-toolbar {
-  border-bottom: 1px solid #ccc;
-  height: auto;
-}
-
-.editor-scrollbar {
-  height: 100%;
-}
-
-.editor {
-  height: 80%;
+.edit-content-scrollbar {
+  height: calc(100% - 80px);
+  border: 1px solid #ccc;
+  border-bottom: 0;
 }
 </style>
diff --git a/blog-frontend/src/views/BlogReadView.vue b/blog-frontend/src/views/BlogReadView.vue
index e7d850e..5e5308e 100644
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 
-import { api } from "@/api";
+import { api, globalStore } from "@/api";
 import router from "@/router";
 import type { BlogInfoResponseVO } from "@/swagger";
 
@@ -12,7 +12,7 @@ const blogID = useRoute().params.id.toString();
 if (blogID) {
   api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
     const vo = resp.data;
-    blogInfo.value = vo.content || {};
+    blogInfo.value = vo.content;
   });
 }
 
@@ -30,19 +30,20 @@ function deleteBlog() {
     <el-header class="blog-header">
       <el-row :gutter="20">
         <el-col :span="4">
-          <h1>{{ blogInfo?.creator?.nickname }}</h1>
+          <p>{{ blogInfo?.creator.nickname }}</p>
         </el-col>
         <el-col :span="16">
           <h1 class="blog-title">{{ blogInfo?.title }}</h1>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-if="globalStore.currentUserInfo?.role === 'ADMIN'">
           <el-button type="primary" @click="editBlog">编辑</el-button>
           <el-button type="danger" @click="deleteBlog">删除</el-button>
         </el-col>
       </el-row>
     </el-header>
     <el-main class="blog-main">
-      <el-scrollbar class="blog-content" v-html="blogInfo?.content">
+      <el-scrollbar class="blog-content">
+        <div v-html="blogInfo?.content"></div>
       </el-scrollbar>
     </el-main>
   </el-container>
@@ -63,8 +64,13 @@ function deleteBlog() {
   text-align: center;
 }
 
+.blog-author {
+  font-size: x-large;
+  white-space: nowrap;
+}
+
 .blog-title {
-  font-size: xx-large;
+  font-size: x-large;
 }
 
 .blog-content {
@@ -74,5 +80,6 @@ function deleteBlog() {
 
 .blog-main {
   width: 100%;
+  padding: 0;
 }
 </style>
diff --git a/blog-frontend/src/views/IndexView.vue b/blog-frontend/src/views/IndexView.vue
index 2fb3425..1714e17 100644
--- a/blog-frontend/src/views/IndexView.vue
+++ b/blog-frontend/src/views/IndexView.vue
@@ -2,7 +2,7 @@
 import { reactive } from "vue";
 
 import { api } from "@/api";
-import BlogComponent from "@/components/BlogComponent.vue";
+import BlogCardComponent from "@/components/BlogCardComponent.vue";
 import type { BlogInfoResponseVO } from "@/swagger";
 
 let page = 0;
@@ -17,13 +17,12 @@ function load() {
       item.updateTime = new Date(item?.updateTime ?? 0);
       blogs.push(item);
     }
-    console.log(page);
-    if (page?.elements?.length ?? 0 > 0) {
+    if (page?.elements.length ?? 0 > 0) {
       console.log(
         "loaded page " +
-          page?.page +
+          page?.pageNumber +
           " for element count: " +
-          page?.elements?.length
+          page?.elements.length
       );
     }
   });
@@ -35,7 +34,7 @@ function load() {
   <el-scrollbar style="overflow: auto">
     <ul class="infinite-list" v-infinite-scroll="load">
       <li v-for="blog in blogs" :key="blog.id" class="infinite-list-item">
-        <BlogComponent :blog="blog"></BlogComponent>
+        <BlogCardComponent :blog="blog" v-if="blog.publish"></BlogCardComponent>
       </li>
     </ul>
   </el-scrollbar>
diff --git a/blog-frontend/src/views/RegisterView.vue b/blog-frontend/src/views/RegisterView.vue
index c0a30a0..3cbcf9d 100644
--- a/blog-frontend/src/views/RegisterView.vue
+++ b/blog-frontend/src/views/RegisterView.vue
@@ -13,7 +13,7 @@ const form = reactive<{
 });
 
 const onSubmit = () => {
-  api.UserController.register(form).then((resp) => {
+  api.UserController.registerUser(form).then((resp) => {
     let vo = resp.data;
     if (vo.code === 200) {
       console.log("register success!");