feat: 开发中...

2023-04-03 17:24:21 +08:00
parent d1054590cd
commit e2bdd6a674
29 changed files with 386 additions and 218 deletions
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/config/AuthenticationFilter.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/config/AuthenticationFilter.java
@@ -28,7 +28,7 @@ public class AuthenticationFilter extends OncePerRequestFilter {
            filterChain.doFilter(request, response);
            return;
        }
-        Authentication authentication = (Authentication) session.getAttribute("authenticate");
+        Authentication authentication = (Authentication) session.getAttribute("Authentication");
        if (authentication == null) {
            filterChain.doFilter(request, response);
            return;
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/controller/AttachController.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/controller/AttachController.java
@@ -8,7 +8,7 @@ import org.springframework.web.multipart.MultipartFile;

@Tag(name = "AttachController", description = "附件相关接口")
@RestController
-@RequestMapping(value = "/api/v1/attach",produces = MediaType.APPLICATION_JSON_VALUE)
+@RequestMapping(value = "/api/v1/attach", produces = MediaType.APPLICATION_JSON_VALUE)
 public class AttachController {
    @PostMapping("/")
    public ResponseVO<Void> createAttach(@RequestBody MultipartFile file) {
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/controller/UserController.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/controller/UserController.java
@@ -28,6 +28,12 @@ public class UserController {
    @Resource
    private IUserService userService;

+    @PostMapping("/")
+    @Operation(summary = "注册用户")
+    public ResponseVO<UserInfoResponseVO> registerUser(HttpServletRequest request, @RequestBody @Valid UserCreateRequireVO requireVO) {
+        return userService.registerUser(request, requireVO);
+    }
+
    @PostMapping("/login")
    @Operation(summary = "登录用户")
    public ResponseVO<Void> loginUser(HttpServletRequest request, @RequestBody @Valid UserLoginRequireVO requireVO) {
@@ -40,18 +46,11 @@ public class UserController {
        return userService.getCurrentUserInfo();
    }

-    @PostMapping("/")
-    @Operation(summary = "注册用户")
-    public ResponseVO<UserInfoResponseVO> register(@RequestBody @Valid UserCreateRequireVO requireVO) {
-        return userService.createUser(requireVO);
-    }
-
    @PutMapping("/{userID}/")
    @Operation(summary = "更新用户信息")
    public ResponseVO<Void> updateUser(
            @Parameter(description = "用户ID") @PathVariable UUID userID,
-            @Parameter(description = "用户信息") @RequestBody @Valid UserUpdateRequireVO requireVO
-    ) {
+            @Parameter(description = "用户信息") @RequestBody @Valid UserUpdateRequireVO requireVO) {
        return userService.updateUser(userID, requireVO);
    }

@@ -59,8 +58,7 @@ public class UserController {
    @Operation(summary = "查询用户列表")
    public ResponseVO<PageableVO<UserInfoResponseVO>> getAllUserInfo(
            @Parameter(description = "页码", example = "0") int page,
-            @Parameter(description = "大小", example = "10") int size
-    ) {
+            @Parameter(description = "大小", example = "10") int size) {
        return userService.getAllUserInfo(PageRequest.of(page, Math.min(size, 100)));
    }

@@ -75,8 +73,7 @@ public class UserController {
    public ResponseVO<PageableVO<BlogInfoResponseVO>> getUserBlogList(
            @Parameter(description = "用户ID") @PathVariable UUID userID,
            @Parameter(description = "页码", example = "0") int page,
-            @Parameter(description = "大小", example = "10") int size
-    ) {
+            @Parameter(description = "大小", example = "10") int size) {
        return userService.getUserBlogList(userID, PageRequest.of(page, Math.min(size, 100)));
    }

@@ -85,8 +82,7 @@ public class UserController {
    public ResponseVO<PageableVO<AttachInfoResponseVO>> getUserAttachList(
            @Parameter(description = "用户ID") @PathVariable UUID userID,
            @Parameter(description = "页码", example = "0") int page,
-            @Parameter(description = "大小", example = "10") int size
-    ) {
+            @Parameter(description = "大小", example = "10") int size) {
        return userService.getUserAttachList(userID, PageRequest.of(page, Math.min(size, 100)));
    }
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/BlogMapper.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/BlogMapper.java
@@ -4,6 +4,7 @@ import cn.hamster3.application.blog.entity.BlogEntity;
 import cn.hamster3.application.blog.entity.UserEntity;
 import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
 import cn.hamster3.application.blog.vo.blog.BlogUpdateRequireVO;
+import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
 import org.jetbrains.annotations.NotNull;
 import org.mapstruct.Mapper;
 import org.mapstruct.MappingConstants;
@@ -19,7 +20,18 @@ public interface BlogMapper {

    @NotNull
    @SuppressWarnings("unused")
-    default UUID map(@NotNull UserEntity value) {
+    default UUID mapToUUID(@NotNull UserEntity value) {
        return value.getId();
    }
+
+    default UserInfoResponseVO mapToInfoVO(@NotNull UserEntity value) {
+        return new UserInfoResponseVO(
+                value.getId(),
+                value.getEmail(),
+                value.getNickname(),
+                value.getRole(),
+                value.getCreateTime(),
+                value.getUpdateTime()
+        );
+    }
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/service/IUserService.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/IUserService.java
@@ -15,12 +15,12 @@ import org.springframework.data.domain.Pageable;
 import java.util.UUID;

 public interface IUserService {
+    @NotNull ResponseVO<UserInfoResponseVO> registerUser(@NotNull HttpServletRequest request, @NotNull UserCreateRequireVO requireVO);
+
    @NotNull ResponseVO<Void> loginUser(@NotNull HttpServletRequest request, @NotNull UserLoginRequireVO requireVO);

    @NotNull ResponseVO<UserInfoResponseVO> getCurrentUserInfo();

-    @NotNull ResponseVO<UserInfoResponseVO> createUser(@NotNull UserCreateRequireVO requireVO);
-
    @NotNull ResponseVO<Void> updateUser(@NotNull UUID userID, @NotNull UserUpdateRequireVO requireVO);

    @NotNull ResponseVO<PageableVO<UserInfoResponseVO>> getAllUserInfo(@NotNull Pageable pageable);
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/UserService.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/UserService.java
@@ -56,34 +56,7 @@ public class UserService implements IUserService {
    private AuthenticationManager authenticationManager;

    @Override
-    public @NotNull ResponseVO<Void> loginUser(@NotNull HttpServletRequest request, @NotNull UserLoginRequireVO requireVO) {
-        Authentication authenticate = authenticationManager.authenticate(
-                new UsernamePasswordAuthenticationToken(requireVO.getEmail(), requireVO.getPassword())
-        );
-        log.info("authenticate: {}", authenticate);
-        if (!authenticate.isAuthenticated()) {
-            return ResponseVO.failed("login failed.");
-        }
-        HttpSession session = request.getSession();
-        session.setAttribute("authenticate", authenticate);
-        return ResponseVO.success();
-    }
-
-    @Override
-    public @NotNull ResponseVO<UserInfoResponseVO> getCurrentUserInfo() {
-        UUID uuid = BlogUtils.getCurrentUserUUID().orElse(null);
-        if (uuid == null) {
-            return ResponseVO.unauthorized();
-        }
-        return ResponseVO.success(
-                userRepo.findById(uuid)
-                        .map(o -> userMapper.entityToInfoVO(o))
-                        .orElse(null)
-        );
-    }
-
-    @Override
-    public @NotNull ResponseVO<UserInfoResponseVO> createUser(@NotNull UserCreateRequireVO requireVO) {
+    public @NotNull ResponseVO<UserInfoResponseVO> registerUser(@NotNull HttpServletRequest request, @NotNull UserCreateRequireVO requireVO) {
        UserEntity entity = userMapper.voToEntity(requireVO);
        entity.setEmail(entity.getEmail().toLowerCase());

@@ -100,9 +73,40 @@ public class UserService implements IUserService {
        log.info("prepare to save userinfo: {}", entity);
        UserEntity save = userRepo.save(entity);

+        Authentication authenticate = authenticationManager.authenticate(
+                new UsernamePasswordAuthenticationToken(requireVO.getEmail(), requireVO.getPassword())
+        );
+        HttpSession session = request.getSession();
+        session.setAttribute("Authentication", authenticate);
        return ResponseVO.success("注册成功！", userMapper.entityToInfoVO(save));
    }

+    @Override
+    public @NotNull ResponseVO<Void> loginUser(@NotNull HttpServletRequest request, @NotNull UserLoginRequireVO requireVO) {
+        Authentication authenticate = authenticationManager.authenticate(
+                new UsernamePasswordAuthenticationToken(requireVO.getEmail(), requireVO.getPassword())
+        );
+        log.info("authenticate: {}", authenticate);
+        if (!authenticate.isAuthenticated()) {
+            return ResponseVO.failed("authenticate failed.");
+        }
+        HttpSession session = request.getSession();
+        session.setAttribute("Authentication", authenticate);
+        return ResponseVO.success("登录成功！", null);
+    }
+
+    @Override
+    public @NotNull ResponseVO<UserInfoResponseVO> getCurrentUserInfo() {
+        UUID uuid = BlogUtils.getCurrentUserUUID().orElse(null);
+        if (uuid == null) {
+            return ResponseVO.unauthorized();
+        }
+        return ResponseVO.success(
+                userRepo.findById(uuid)
+                        .map(o -> userMapper.entityToInfoVO(o))
+                        .orElse(null));
+    }
+
    @Override
    public @NotNull ResponseVO<Void> updateUser(@NotNull UUID uuid, @NotNull UserUpdateRequireVO requireVO) {
        UserEntity userEntity = userRepo.findById(uuid).orElse(null);
@@ -150,8 +154,7 @@ public class UserService implements IUserService {
    @Override
    public @NotNull ResponseVO<PageableVO<UserInfoResponseVO>> getAllUserInfo(@NotNull Pageable pageable) {
        return PageableVO.success(
-                userRepo.findAll(pageable).map(o -> userMapper.entityToInfoVO(o))
-        );
+                userRepo.findAll(pageable).map(o -> userMapper.entityToInfoVO(o)));
    }

    @Override
@@ -165,15 +168,13 @@ public class UserService implements IUserService {
    public @NotNull ResponseVO<PageableVO<BlogInfoResponseVO>> getUserBlogList(@NotNull UUID userID, @NotNull Pageable pageable) {
        return PageableVO.success(
                blogRepo.findByCreator_IdOrderByCreateTimeDesc(userID, pageable)
-                        .map(o -> blogMapper.entityToInfoVO(o))
-        );
+                        .map(o -> blogMapper.entityToInfoVO(o)));
    }

    @Override
    public @NotNull ResponseVO<PageableVO<AttachInfoResponseVO>> getUserAttachList(@NotNull UUID userID, @NotNull Pageable pageable) {
        return PageableVO.success(
                attachRepo.findByCreator_IdOrderByCreateTimeDesc(userID, pageable)
-                        .map(o -> attachMapper.entityToInfoVO(o))
-        );
+                        .map(o -> attachMapper.entityToInfoVO(o)));
    }
 }
--- 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
@@ -1,12 +1,10 @@
 package cn.hamster3.application.blog.vo.blog;

-import cn.hamster3.application.blog.entity.BlogAttachEntity;
-import cn.hamster3.application.blog.entity.UserEntity;
+import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
 import lombok.AllArgsConstructor;
 import lombok.Data;

 import java.util.Date;
-import java.util.List;
 import java.util.Set;

@Data
@@ -15,14 +13,14 @@ public class BlogInfoResponseVO {
    private Long id;
    private String title;
    private String abstracts;
-    private String password;
+    //    private String password;
    private String content;
    private Boolean top;
    private Boolean publish;
    private Set<String> tags;
-    private List<BlogAttachEntity> attachEntities;
-    private UserEntity creator;
-    private UserEntity updater;
+    //    private List<BlogAttachEntity> attachEntities;
+    private UserInfoResponseVO creator;
+    private UserInfoResponseVO updater;
    private Date createTime;
    private Date updateTime;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogUpdateRequireVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogUpdateRequireVO.java
@@ -30,6 +30,6 @@ public class BlogUpdateRequireVO {

    private Boolean publish;

-    @NotNull
+    @NotNull(message = "标签不能为 null")
    private Set<String> tags;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserCreateRequireVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserCreateRequireVO.java
@@ -14,8 +14,9 @@ public class UserCreateRequireVO {
    @Length(max = 64, message = "邮箱地址最大长度不能超过 64 字符！")
    private String email;
    @NotBlank(message = "昵称不能为空！")
-    @Length(min = 1, max = 32, message = "用户昵称不能超过 32 个字符！")
+    @Length(max = 32, message = "用户昵称不能超过 32 个字符！")
    private String nickname;
+    @NotBlank(message = "密码不能为空！")
    @Length(min = 8, max = 32, message = "密码长度必须在 8~32 个字符之间！")
    private String password;
 }
--- 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,13 +1,10 @@
 package cn.hamster3.application.blog.vo.user;

 import cn.hamster3.application.blog.constant.UserRole;
-import cn.hamster3.application.blog.entity.AttachEntity;
-import cn.hamster3.application.blog.entity.BlogEntity;
 import lombok.AllArgsConstructor;
 import lombok.Data;

 import java.util.Date;
-import java.util.List;
 import java.util.UUID;

@Data
@@ -17,8 +14,8 @@ public class UserInfoResponseVO {
    private String email;
    private String nickname;
    private UserRole role;
-    private List<BlogEntity> blogEntities;
-    private List<AttachEntity> attachEntities;
+    //    private List<BlogEntity> blogEntities;
+//    private List<AttachEntity> attachEntities;
    private Date createTime;
    private Date updateTime;
 }
--- 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))