diff --git a/blog-backend/build.gradle b/blog-backend/build.gradle
index f2dcb52..1e66513 100644
--- a/blog-backend/build.gradle
+++ b/blog-backend/build.gradle
@@ -4,6 +4,8 @@ plugins {
     id 'io.spring.dependency-management' version '1.1.0'
 }
 
+evaluationDependsOn(":blog-frontend")
+
 group = 'cn.hamster3.application.blog'
 version = '0.0.1-SNAPSHOT'
 sourceCompatibility = '17'
@@ -60,8 +62,13 @@ tasks.named('test') {
 }
 
 processResources {
-    dependsOn(":blog-frontend:npmBuild")
-    from(tasks.findByPath(":blog-frontend:npmBuild").outputs) {
+    dependsOn(":blog-frontend:npmBuildOnly")
+    //noinspection ConfigurationAvoidance
+    from(tasks.findByPath(":blog-frontend:npmBuildOnly").outputs) {
         into 'static'
     }
 }
+
+clean {
+    delete(files('bin'))
+}
\ No newline at end of file
diff --git 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
index 149b78c..69ea09e 100644
--- 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
@@ -1,7 +1,8 @@
 package cn.hamster3.application.blog.controller;
 
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import cn.hamster3.application.blog.vo.ResponseVO;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
 
 /**
  * 附件相关接口
@@ -9,4 +10,28 @@ import org.springframework.web.bind.annotation.RestController;
 @RestController
 @RequestMapping("/api/v1/attach")
 public class AttachController {
+    @PostMapping("/")
+    public ResponseVO<Void> createAttach(@RequestBody MultipartFile file) {
+        return ResponseVO.success();
+    }
+
+    @PutMapping("/{attachID}/")
+    public ResponseVO<Void> modifyAttach(@PathVariable String attachID, @RequestBody MultipartFile file) {
+        return ResponseVO.success();
+    }
+
+    @GetMapping("/{attachID}/")
+    public ResponseVO<Void> getAttach() {
+        return ResponseVO.success();
+    }
+
+    @DeleteMapping("/{attachID}/")
+    public ResponseVO<Void> deleteAttach(@PathVariable String attachID) {
+        return ResponseVO.success();
+    }
+
+    @GetMapping("/")
+    public ResponseVO<Void> getAttachList() {
+        return ResponseVO.success();
+    }
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/controller/BlogController.java b/blog-backend/src/main/java/cn/hamster3/application/blog/controller/BlogController.java
index afaac7d..c85db7f 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/controller/BlogController.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/controller/BlogController.java
@@ -1,22 +1,42 @@
 package cn.hamster3.application.blog.controller;
 
-import cn.hamster3.application.blog.entity.BlogEntity;
+import cn.hamster3.application.blog.service.IBlogService;
 import cn.hamster3.application.blog.vo.ResponseVO;
-
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import cn.hamster3.application.blog.vo.blog.BlogCreateRequireVO;
+import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
+import cn.hamster3.application.blog.vo.blog.BlogUpdateRequireVO;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.annotation.Resource;
+import jakarta.validation.Valid;
+import org.springframework.http.MediaType;
+import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
 
-/**
- * 博文相关接口
- */
+@Tag(name = "博文接口", description = "博文相关接口")
 @RestController
-@RequestMapping("/api/v1/blog")
+@RequestMapping(value = "/api/v1/blog", produces = MediaType.APPLICATION_JSON_VALUE)
 public class BlogController {
-    @GetMapping("/")
-    public ResponseVO<List<BlogEntity>> getBlogList() {
+    @Resource
+    private IBlogService blogService;
+
+    @PostMapping("/")
+    public ResponseVO<Long> createBlog(@RequestBody @Valid BlogCreateRequireVO requireVO) {
+        return blogService.createBlog(requireVO);
+    }
+
+    @GetMapping("/{blogID}/")
+    public ResponseVO<BlogInfoResponseVO> getBlogInfo() {
         return null;
     }
+
+    @GetMapping("/")
+    public ResponseVO<List<BlogInfoResponseVO>> getBlogInfoList() {
+        return null;
+    }
+
+    @PutMapping("/{blogID}/")
+    public ResponseVO<Void> updateBlog(@PathVariable String blogID, @RequestBody @Valid BlogUpdateRequireVO requireVO) {
+        return ResponseVO.success();
+    }
 }
diff --git 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
index a204e60..a934204 100644
--- 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
@@ -2,38 +2,49 @@ package cn.hamster3.application.blog.controller;
 
 import cn.hamster3.application.blog.service.IUserService;
 import cn.hamster3.application.blog.vo.ResponseVO;
+import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
 import cn.hamster3.application.blog.vo.user.UserRegisterRequireVO;
 import cn.hamster3.application.blog.vo.user.UserRegisterResponseVO;
+import cn.hamster3.application.blog.vo.user.UserUpdateRequireVO;
 import jakarta.annotation.Resource;
 import jakarta.validation.Valid;
+import org.springframework.http.MediaType;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.ArrayList;
+import java.util.List;
+
 /**
  * 用户相关接口
  */
 @RestController
-@RequestMapping("/api/v1/user")
+@RequestMapping(value = "/api/v1/user", produces = MediaType.APPLICATION_JSON_VALUE)
 public class UserController {
     @Resource
     private IUserService userService;
 
     @PostMapping("/")
-    public ResponseVO<UserRegisterResponseVO> registerUser(@RequestBody @Valid UserRegisterRequireVO requireVO) {
+    public ResponseVO<UserRegisterResponseVO> createUser(@RequestBody @Valid UserRegisterRequireVO requireVO) {
         return userService.registerUser(requireVO);
     }
 
     @PutMapping("/")
-    public Object modifyUserInfo() {
-        return null;
-    }
-
-    @GetMapping("/")
-    public ResponseVO<Void> getAllUserInfo() {
+    public ResponseVO<Void> updateUser(@RequestBody @Valid UserUpdateRequireVO requireVO) {
         return ResponseVO.success();
     }
 
+    @GetMapping("/")
+    public ResponseVO<List<UserInfoResponseVO>> getAllUserInfo() {
+        return ResponseVO.success(new ArrayList<>());
+    }
+
     @GetMapping("/{userID}/")
-    public Object getUserInfo(@PathVariable String userID) {
-        return null;
+    public ResponseVO<UserInfoResponseVO> getUserInfo(@PathVariable String userID) {
+        return ResponseVO.success(null);
+    }
+
+    @GetMapping("/{userID}/attaches")
+    public ResponseVO<Void> getUserAttaches(@PathVariable String userID) {
+        return ResponseVO.success(null);
     }
 }
diff --git 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
new file mode 100644
index 0000000..4acefa7
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/BlogMapper.java
@@ -0,0 +1,16 @@
+package cn.hamster3.application.blog.entity.mapper;
+
+import cn.hamster3.application.blog.entity.BlogEntity;
+import cn.hamster3.application.blog.vo.blog.BlogCreateRequireVO;
+import cn.hamster3.application.blog.vo.blog.BlogInfoResponseVO;
+import org.mapstruct.Mapper;
+import org.mapstruct.MappingConstants;
+import org.mapstruct.ReportingPolicy;
+
+@Mapper(unmappedTargetPolicy = ReportingPolicy.IGNORE, componentModel = MappingConstants.ComponentModel.SPRING)
+public interface BlogMapper {
+    BlogEntity voToEntity(BlogCreateRequireVO requireVO);
+
+    BlogInfoResponseVO entityToInfoVO(BlogEntity requireVO);
+
+}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/UserMapper.java b/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/UserMapper.java
new file mode 100644
index 0000000..7e1cc8f
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/entity/mapper/UserMapper.java
@@ -0,0 +1,18 @@
+package cn.hamster3.application.blog.entity.mapper;
+
+import cn.hamster3.application.blog.entity.UserEntity;
+import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
+import cn.hamster3.application.blog.vo.user.UserRegisterRequireVO;
+import cn.hamster3.application.blog.vo.user.UserRegisterResponseVO;
+import org.mapstruct.Mapper;
+import org.mapstruct.MappingConstants;
+import org.mapstruct.ReportingPolicy;
+
+@Mapper(unmappedTargetPolicy = ReportingPolicy.IGNORE, componentModel = MappingConstants.ComponentModel.SPRING)
+public interface UserMapper {
+    UserEntity voToEntity(UserRegisterRequireVO requireVO);
+
+    UserInfoResponseVO entityToInfoVO(UserEntity requireVO);
+
+    UserRegisterResponseVO entityToRegisterVO(UserEntity requireVO);
+}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/mapper/UserMapper.java b/blog-backend/src/main/java/cn/hamster3/application/blog/mapper/UserMapper.java
deleted file mode 100644
index 2460baa..0000000
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/mapper/UserMapper.java
+++ /dev/null
@@ -1,18 +0,0 @@
-package cn.hamster3.application.blog.mapper;
-
-import cn.hamster3.application.blog.entity.UserEntity;
-import cn.hamster3.application.blog.vo.user.UserRegisterRequireVO;
-import cn.hamster3.application.blog.vo.user.UserRegisterResponseVO;
-import org.mapstruct.Mapper;
-import org.mapstruct.Mapping;
-
-@Mapper(componentModel = "spring")
-public interface UserMapper {
-
-    @Mapping(target = "permissions", ignore = true)
-    @Mapping(target = "attachEntities", ignore = true)
-    @Mapping(target = "blogEntities", ignore = true)
-    UserEntity voToEntity(UserRegisterRequireVO requireVO);
-
-    UserRegisterResponseVO entityToVO(UserEntity requireVO);
-}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/service/IAttachService.java b/blog-backend/src/main/java/cn/hamster3/application/blog/service/IAttachService.java
new file mode 100644
index 0000000..e37d5c7
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/IAttachService.java
@@ -0,0 +1,4 @@
+package cn.hamster3.application.blog.service;
+
+public interface IAttachService {
+}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/service/IBlogService.java b/blog-backend/src/main/java/cn/hamster3/application/blog/service/IBlogService.java
index 9b615fa..44daf59 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/service/IBlogService.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/IBlogService.java
@@ -1,4 +1,8 @@
 package cn.hamster3.application.blog.service;
 
+import cn.hamster3.application.blog.vo.ResponseVO;
+import cn.hamster3.application.blog.vo.blog.BlogCreateRequireVO;
+
 public interface IBlogService {
+    ResponseVO<Long> createBlog(BlogCreateRequireVO requireVO);
 }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/AttachService.java b/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/AttachService.java
new file mode 100644
index 0000000..f932faf
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/AttachService.java
@@ -0,0 +1,8 @@
+package cn.hamster3.application.blog.service.impl;
+
+import cn.hamster3.application.blog.service.IAttachService;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AttachService implements IAttachService {
+}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/BlogService.java b/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/BlogService.java
index f04e49f..02acf4e 100644
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/BlogService.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/service/impl/BlogService.java
@@ -1,12 +1,25 @@
 package cn.hamster3.application.blog.service.impl;
 
 import cn.hamster3.application.blog.dao.BlogRepository;
+import cn.hamster3.application.blog.entity.BlogEntity;
+import cn.hamster3.application.blog.entity.mapper.BlogMapper;
 import cn.hamster3.application.blog.service.IBlogService;
+import cn.hamster3.application.blog.vo.ResponseVO;
+import cn.hamster3.application.blog.vo.blog.BlogCreateRequireVO;
 import jakarta.annotation.Resource;
 import org.springframework.stereotype.Service;
 
 @Service
 public class BlogService implements IBlogService {
+    @Resource
+    BlogMapper blogMapper;
     @Resource
     private BlogRepository blogRepo;
+
+    @Override
+    public ResponseVO<Long> createBlog(BlogCreateRequireVO requireVO) {
+        BlogEntity entity = blogMapper.voToEntity(requireVO);
+        BlogEntity save = blogRepo.save(entity);
+        return ResponseVO.success(save.getId());
+    }
 }
diff --git 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
index 25856de..642ce62 100644
--- 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
@@ -2,7 +2,7 @@ package cn.hamster3.application.blog.service.impl;
 
 import cn.hamster3.application.blog.dao.UserRepository;
 import cn.hamster3.application.blog.entity.UserEntity;
-import cn.hamster3.application.blog.mapper.UserMapper;
+import cn.hamster3.application.blog.entity.mapper.UserMapper;
 import cn.hamster3.application.blog.service.IUserService;
 import cn.hamster3.application.blog.vo.ResponseVO;
 import cn.hamster3.application.blog.vo.user.UserRegisterRequireVO;
@@ -37,6 +37,6 @@ public class UserService implements IUserService {
         entity.setPassword(passwordEncoder.encode(entity.getPassword()));
         UserEntity save = userRepo.save(entity);
 
-        return ResponseVO.success("注册成功！", userMapper.entityToVO(save));
+        return ResponseVO.success("注册成功！", userMapper.entityToRegisterVO(save));
     }
 }
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 d985ac4..10f4ca9 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
@@ -19,10 +19,6 @@ public class ResponseVO<T> {
         return new ResponseVO<>(200, "", null);
     }
 
-    public static ResponseVO<Void> success(String msg) {
-        return new ResponseVO<>(200, msg, null);
-    }
-
     public static <T> ResponseVO<T> success(T data) {
         return new ResponseVO<>(200, "", data);
     }
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogCreateRequireVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogCreateRequireVO.java
new file mode 100644
index 0000000..7853aa4
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogCreateRequireVO.java
@@ -0,0 +1,16 @@
+package cn.hamster3.application.blog.vo.blog;
+
+
+import jakarta.annotation.Nullable;
+import jakarta.validation.constraints.Max;
+import jakarta.validation.constraints.NotNull;
+import lombok.Data;
+
+@Data
+public class BlogCreateRequireVO {
+    @Nullable
+    @Max(value = 16, message = "密码最大长度不能超过 16 个字！")
+    private String password;
+    @NotNull(message = "博客文章内容不能为空！")
+    private String content;
+}
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
new file mode 100644
index 0000000..499dcb2
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
@@ -0,0 +1,4 @@
+package cn.hamster3.application.blog.vo.blog;
+
+public class BlogInfoResponseVO {
+}
diff --git 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
new file mode 100644
index 0000000..44d23bf
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogUpdateRequireVO.java
@@ -0,0 +1,6 @@
+package cn.hamster3.application.blog.vo.blog;
+
+public class BlogUpdateRequireVO {
+    private String password;
+    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
new file mode 100644
index 0000000..c7fd54c
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
@@ -0,0 +1,4 @@
+package cn.hamster3.application.blog.vo.user;
+
+public class UserInfoResponseVO {
+}
diff --git a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserUpdateRequireVO.java b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserUpdateRequireVO.java
new file mode 100644
index 0000000..d73eba2
--- /dev/null
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserUpdateRequireVO.java
@@ -0,0 +1,4 @@
+package cn.hamster3.application.blog.vo.user;
+
+public class UserUpdateRequireVO {
+}
diff --git a/blog-backend/src/main/resources/application.yml b/blog-backend/src/main/resources/application.yml
index e1fc0d5..91cdc83 100644
--- a/blog-backend/src/main/resources/application.yml
+++ b/blog-backend/src/main/resources/application.yml
@@ -1,3 +1,11 @@
+server:
+  port: 8080
+  servlet:
+    context-path: /
+    multipart:
+      enable: true
+      max-file-size: 16M
+      max-require-size: 32M
 spring:
   # 要使用的环境预设
   # prod: 生产环境
diff --git a/blog-frontend/build.gradle b/blog-frontend/build.gradle
index 8c1a3f7..043fb2b 100644
--- a/blog-frontend/build.gradle
+++ b/blog-frontend/build.gradle
@@ -20,6 +20,20 @@ tasks.register("npmBuild", NpmTask) {
 
     args = ['run', 'build']
 }
+tasks.register("npmBuildOnly", NpmTask) {
+    dependsOn("npmInstall")
+    inputs.files(
+            'public', 'src',
+            'env.d.ts', 'index.html',
+            'package.json', 'package-lock.json',
+            'tsconfig.config.json', 'tsconfig.json',
+            'vite.config.ts'
+    )
+
+    outputs.files(fileTree('dist'))
+
+    args = ['run', 'build-only']
+}
 
 //调用npm run dev
 tasks.register("npmDev", NpmTask) {
diff --git a/blog-frontend/package-lock.json b/blog-frontend/package-lock.json
index 01c5448..b00a881 100644
--- a/blog-frontend/package-lock.json
+++ b/blog-frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "vue-project",
-  "version": "0.0.0",
+  "name": "blog-frontend",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "vue-project",
-      "version": "0.0.0",
+      "name": "blog-frontend",
+      "version": "0.0.1",
       "dependencies": {
         "axios": "^1.3.4",
         "element-plus": "^2.2.32",
diff --git a/blog-frontend/package.json b/blog-frontend/package.json
index 55ece2d..eb790c3 100644
--- a/blog-frontend/package.json
+++ b/blog-frontend/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "vue-project",
-  "version": "0.0.0",
+  "name": "blog-frontend",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite --port 3000",
+    "dev": "vite --host 0.0.0.0 --port 3000",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
diff --git a/blog-frontend/src/App.vue b/blog-frontend/src/App.vue
index cf9b028..c6ff3c8 100644
--- a/blog-frontend/src/App.vue
+++ b/blog-frontend/src/App.vue
@@ -1,45 +1,50 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { RouterLink, RouterView } from 'vue-router'
-import VueIndexVuew from '@/views/VueIndexVuew.vue'
 import * as api from '@/api-base/index'
 
-// let userAPI = api.UserControllerApiFp();
-api.UserControllerApiFactory().getAllUserInfo()
-  .then(response => {
-    let data = response.data;
-    console.log(data)
-  })
-  .catch(err => {
-    console.error(err);
-  })
+let title = ref("网站标题")
+
+onMounted(() => {
+  api.SiteSettingControllerApiFactory().getSiteTitle()
+    .then(response => {
+      console.log(response.data)
+      title.value = response.data.data || "网站标题"
+    })
+    .catch(err => {
+      console.error(err);
+    })
+})
+const activeIndex = ref('index')
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
 </script>
 
 <template>
   <el-container>
     <el-header>
-      <el-row :gutter="20">
-        <el-col :span="4">
-          <h1>网站标题</h1>
-        </el-col>
-        <el-col :span="16">
-          <h1>
-            <RouterLink to="/" class="router-link">首页</RouterLink>
-            <RouterLink to="/" class="router-link">项目</RouterLink>
-            <RouterLink to="/" class="router-link">分类</RouterLink>
-            <a href="/swagger-ui/index.html">Swagger</a>
-            &nbsp;
-            <a href="https://editor.swagger.io/">Editor</a>
-          </h1>
-        </el-col>
-        <el-col :span="4">
-          <h1>头像</h1>
-        </el-col>
-      </el-row>
+      <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect">
+        <el-menu-item index="index"> {{ title }} </el-menu-item>
+        <el-menu-item index="categorize"> 分类 </el-menu-item>
+        <el-menu-item index="tags"> 标签 </el-menu-item>
+
+        <div class="flex-grow" />
+
+        <el-menu-item index="login">登录 </el-menu-item>
+        <el-menu-item index="register"> 注册 </el-menu-item>
+      </el-menu>
     </el-header>
     <el-main>
       <RouterView />
     </el-main>
-    <el-footer></el-footer>
+    <el-footer>
+      <p>
+        <a href="/swagger-ui/index.html">Swagger</a>
+        |
+        <a href="https://editor.swagger.io/">Editor</a>
+      </p>
+    </el-footer>
   </el-container>
 </template>
 
@@ -47,24 +52,9 @@ api.UserControllerApiFactory().getAllUserInfo()
 .el-container {
   width: 100%;
   height: 100%;
-  padding: 5px;
-  background-color: aqua;
 }
 
-.el-header {
-  height: 60px;
-  background-color: aliceblue;
-}
-
-.el-row {
-  margin-bottom: 20px;
-}
-
-.el-col {
-  background-color: aquamarine;
-}
-
-.router-link {
-  margin-right: 5px;
+.flex-grow {
+  flex-grow: 1;
 }
 </style>
diff --git a/blog-frontend/src/api-base/api.ts b/blog-frontend/src/api-base/api.ts
index 8683a75..052efe4 100644
--- a/blog-frontend/src/api-base/api.ts
+++ b/blog-frontend/src/api-base/api.ts
@@ -10,6 +10,8 @@
  * 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.
- */export * from './apis/blog-controller-api';
+ */export * from './apis/attach-controller-api';
+export * from './apis/blog-controller-api';
+export * from './apis/site-setting-controller-api';
 export * from './apis/user-controller-api';
 
diff --git a/blog-frontend/src/api-base/apis/blog-controller-api.ts b/blog-frontend/src/api-base/apis/blog-controller-api.ts
index 62048f9..e9368ce 100644
--- a/blog-frontend/src/api-base/apis/blog-controller-api.ts
+++ b/blog-frontend/src/api-base/apis/blog-controller-api.ts
@@ -17,12 +17,46 @@ import { Configuration } from '../configuration';
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
 import { ResponseVOListBlogEntity } from '../models';
+import { ResponseVOVoid } from '../models';
 /**
  * BlogControllerApi - axios parameter creator
  * @export
  */
 export const BlogControllerApiAxiosParamCreator = function (configuration?: Configuration) {
     return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        createBlog: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/v1/blog/`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, 'https://example.com');
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+            const localVarRequestOptions :AxiosRequestConfig = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            const query = new URLSearchParams(localVarUrlObj.search);
+            for (const key in localVarQueryParameter) {
+                query.set(key, localVarQueryParameter[key]);
+            }
+            for (const key in options.params) {
+                query.set(key, options.params[key]);
+            }
+            localVarUrlObj.search = (new URLSearchParams(query)).toString();
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -51,6 +85,45 @@ export const BlogControllerApiAxiosParamCreator = function (configuration?: Conf
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
 
+            return {
+                url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} blogID 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        modifyBlog: async (blogID: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'blogID' is not null or undefined
+            if (blogID === null || blogID === undefined) {
+                throw new RequiredError('blogID','Required parameter blogID was null or undefined when calling modifyBlog.');
+            }
+            const localVarPath = `/api/v1/blog/{blogID}/`
+                .replace(`{${"blogID"}}`, encodeURIComponent(String(blogID)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, 'https://example.com');
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+            const localVarRequestOptions :AxiosRequestConfig = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            const query = new URLSearchParams(localVarUrlObj.search);
+            for (const key in localVarQueryParameter) {
+                query.set(key, localVarQueryParameter[key]);
+            }
+            for (const key in options.params) {
+                query.set(key, options.params[key]);
+            }
+            localVarUrlObj.search = (new URLSearchParams(query)).toString();
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
             return {
                 url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
                 options: localVarRequestOptions,
@@ -65,6 +138,18 @@ export const BlogControllerApiAxiosParamCreator = function (configuration?: Conf
  */
 export const BlogControllerApiFp = function(configuration?: Configuration) {
     return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createBlog(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
+            const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).createBlog(options);
+            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
+                return axios.request(axiosRequestArgs);
+            };
+        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -77,6 +162,19 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
                 return axios.request(axiosRequestArgs);
             };
         },
+        /**
+         * 
+         * @param {string} blogID 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async modifyBlog(blogID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
+            const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).modifyBlog(blogID, options);
+            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
+                return axios.request(axiosRequestArgs);
+            };
+        },
     }
 };
 
@@ -86,6 +184,14 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
  */
 export const BlogControllerApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
     return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async createBlog(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
+            return BlogControllerApiFp(configuration).createBlog(options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {*} [options] Override http request option.
@@ -94,6 +200,15 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
         async getBlogList(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListBlogEntity>> {
             return BlogControllerApiFp(configuration).getBlogList(options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @param {string} blogID 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async modifyBlog(blogID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
+            return BlogControllerApiFp(configuration).modifyBlog(blogID, options).then((request) => request(axios, basePath));
+        },
     };
 };
 
@@ -104,6 +219,15 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
  * @extends {BaseAPI}
  */
 export class BlogControllerApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof BlogControllerApi
+     */
+    public async createBlog(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
+        return BlogControllerApiFp(this.configuration).createBlog(options).then((request) => request(this.axios, this.basePath));
+    }
     /**
      * 
      * @param {*} [options] Override http request option.
@@ -113,4 +237,14 @@ export class BlogControllerApi extends BaseAPI {
     public async getBlogList(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListBlogEntity>> {
         return BlogControllerApiFp(this.configuration).getBlogList(options).then((request) => request(this.axios, this.basePath));
     }
+    /**
+     * 
+     * @param {string} blogID 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof BlogControllerApi
+     */
+    public async modifyBlog(blogID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
+        return BlogControllerApiFp(this.configuration).modifyBlog(blogID, options).then((request) => request(this.axios, this.basePath));
+    }
 }
diff --git a/blog-frontend/src/api-base/apis/user-controller-api.ts b/blog-frontend/src/api-base/apis/user-controller-api.ts
index 5099ac3..42a62b6 100644
--- a/blog-frontend/src/api-base/apis/user-controller-api.ts
+++ b/blog-frontend/src/api-base/apis/user-controller-api.ts
@@ -16,8 +16,11 @@ import { Configuration } from '../configuration';
 // Some imports not used depending on template conditions
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
+import { ResponseVOListUserInfoResponseVO } from '../models';
+import { ResponseVOUserInfoResponseVO } from '../models';
 import { ResponseVOUserRegisterResponseVO } from '../models';
 import { ResponseVOVoid } from '../models';
+import { UserModifyRequireVO } from '../models';
 import { UserRegisterRequireVO } from '../models';
 /**
  * UserControllerApi - axios parameter creator
@@ -99,10 +102,15 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
         },
         /**
          * 
+         * @param {UserModifyRequireVO} body 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        modifyUserInfo: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        modifyUserInfo: async (body: UserModifyRequireVO, 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 modifyUserInfo.');
+            }
             const localVarPath = `/api/v1/user/`;
             // use dummy base URL string because the URL constructor only accepts absolute URLs.
             const localVarUrlObj = new URL(localVarPath, 'https://example.com');
@@ -114,6 +122,8 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
             const localVarHeaderParameter = {} as any;
             const localVarQueryParameter = {} as any;
 
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
             const query = new URLSearchParams(localVarUrlObj.search);
             for (const key in localVarQueryParameter) {
                 query.set(key, localVarQueryParameter[key]);
@@ -124,6 +134,8 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
             localVarUrlObj.search = (new URLSearchParams(query)).toString();
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            const needsSerialization = (typeof body !== "string") || localVarRequestOptions.headers['Content-Type'] === 'application/json';
+            localVarRequestOptions.data =  needsSerialization ? JSON.stringify(body !== undefined ? body : {}) : (body || "");
 
             return {
                 url: localVarUrlObj.pathname + localVarUrlObj.search + localVarUrlObj.hash,
@@ -186,7 +198,7 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAllUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
+        async getAllUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>>> {
             const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).getAllUserInfo(options);
             return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                 const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -199,7 +211,7 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<any>>> {
+        async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
             const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).getUserInfo(userID, options);
             return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                 const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -208,11 +220,12 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
         },
         /**
          * 
+         * @param {UserModifyRequireVO} body 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async modifyUserInfo(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<any>>> {
-            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).modifyUserInfo(options);
+        async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOVoid>>> {
+            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).modifyUserInfo(body, options);
             return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                 const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
                 return axios.request(axiosRequestArgs);
@@ -245,7 +258,7 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getAllUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
+        async getAllUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>> {
             return UserControllerApiFp(configuration).getAllUserInfo(options).then((request) => request(axios, basePath));
         },
         /**
@@ -254,16 +267,17 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<any>> {
+        async getUserInfo(userID: string, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
             return UserControllerApiFp(configuration).getUserInfo(userID, options).then((request) => request(axios, basePath));
         },
         /**
          * 
+         * @param {UserModifyRequireVO} body 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async modifyUserInfo(options?: AxiosRequestConfig): Promise<AxiosResponse<any>> {
-            return UserControllerApiFp(configuration).modifyUserInfo(options).then((request) => request(axios, basePath));
+        async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOVoid>> {
+            return UserControllerApiFp(configuration).modifyUserInfo(body, options).then((request) => request(axios, basePath));
         },
         /**
          * 
@@ -290,7 +304,7 @@ export class UserControllerApi extends BaseAPI {
      * @throws {RequiredError}
      * @memberof UserControllerApi
      */
-    public async getAllUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
+    public async getAllUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListUserInfoResponseVO>> {
         return UserControllerApiFp(this.configuration).getAllUserInfo(options).then((request) => request(this.axios, this.basePath));
     }
     /**
@@ -300,17 +314,18 @@ export class UserControllerApi extends BaseAPI {
      * @throws {RequiredError}
      * @memberof UserControllerApi
      */
-    public async getUserInfo(userID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<any>> {
+    public async getUserInfo(userID: string, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
         return UserControllerApiFp(this.configuration).getUserInfo(userID, options).then((request) => request(this.axios, this.basePath));
     }
     /**
      * 
+     * @param {UserModifyRequireVO} body 
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
      * @memberof UserControllerApi
      */
-    public async modifyUserInfo(options?: AxiosRequestConfig) : Promise<AxiosResponse<any>> {
-        return UserControllerApiFp(this.configuration).modifyUserInfo(options).then((request) => request(this.axios, this.basePath));
+    public async modifyUserInfo(body: UserModifyRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOVoid>> {
+        return UserControllerApiFp(this.configuration).modifyUserInfo(body, options).then((request) => request(this.axios, this.basePath));
     }
     /**
      * 
diff --git a/blog-frontend/src/api-base/base.ts b/blog-frontend/src/api-base/base.ts
index 59e9604..e9501c7 100644
--- a/blog-frontend/src/api-base/base.ts
+++ b/blog-frontend/src/api-base/base.ts
@@ -16,7 +16,7 @@ import { Configuration } from "./configuration";
 // @ts-ignore
 import globalAxios, { AxiosRequestConfig, AxiosInstance } from 'axios';
 
-export const BASE_PATH = "http://localhost:8080".replace(/\/+$/, "");
+export const BASE_PATH = "http://192.168.1.100:8080".replace(/\/+$/, "");
 
 /**
  *
diff --git a/blog-frontend/src/api-base/models/index.ts b/blog-frontend/src/api-base/models/index.ts
index 2959554..694b71e 100644
--- a/blog-frontend/src/api-base/models/index.ts
+++ b/blog-frontend/src/api-base/models/index.ts
@@ -1,9 +1,16 @@
+export * from './attach-attach-idbody';
 export * from './attach-entity';
 export * from './blog-attach-entity';
 export * from './blog-entity';
 export * from './response-volist-blog-entity';
+export * from './response-volist-user-info-response-vo';
+export * from './response-vostring';
+export * from './response-vouser-info-response-vo';
 export * from './response-vouser-register-response-vo';
 export * from './response-vovoid';
 export * from './user-entity';
+export * from './user-info-response-vo';
+export * from './user-modify-require-vo';
 export * from './user-register-require-vo';
 export * from './user-register-response-vo';
+export * from './v1-attach-body';
diff --git a/blog-frontend/src/api-base/models/response-vouser-register-response-vo.ts b/blog-frontend/src/api-base/models/response-vouser-register-response-vo.ts
index 17e8ce5..e0f5160 100644
--- a/blog-frontend/src/api-base/models/response-vouser-register-response-vo.ts
+++ b/blog-frontend/src/api-base/models/response-vouser-register-response-vo.ts
@@ -11,7 +11,7 @@
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
-import { UserRegisterResponseVO } from './user-register-response-vo';
+import type { UserRegisterResponseVO } from './user-register-response-vo';
 /**
  * 
  * @export
diff --git a/blog-frontend/src/api-base/models/user-entity.ts b/blog-frontend/src/api-base/models/user-entity.ts
index dd82eba..56bd5e2 100644
--- a/blog-frontend/src/api-base/models/user-entity.ts
+++ b/blog-frontend/src/api-base/models/user-entity.ts
@@ -11,8 +11,8 @@
  * https://github.com/swagger-api/swagger-codegen.git
  * Do not edit the class manually.
  */
-import { AttachEntity } from './attach-entity';
-import { BlogEntity } from './blog-entity';
+import type { AttachEntity } from './attach-entity';
+import type { BlogEntity } from './blog-entity';
 /**
  * 
  * @export
diff --git a/blog-frontend/src/assets/main.css b/blog-frontend/src/assets/main.css
index 39741be..f911e5b 100644
--- a/blog-frontend/src/assets/main.css
+++ b/blog-frontend/src/assets/main.css
@@ -1,14 +1,13 @@
 @import './base.css';
 
 html,
-body {
-  height: 100%;
+body,
+#app {
   width: 100%;
+  height: 100%;
 }
 
 #app {
-  height: 100%;
-  width: 100%;
-  margin: 0 auto;
-  padding: 2rem;
+  margin: 0;
+  padding: 0;
 }
\ No newline at end of file
diff --git a/blog-frontend/src/router/index.ts b/blog-frontend/src/router/index.ts
index a49ae50..d1405cb 100644
--- a/blog-frontend/src/router/index.ts
+++ b/blog-frontend/src/router/index.ts
@@ -1,21 +1,22 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'index',
+      component: () => import('@/views/IndexView.vue')
     },
     {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      path: '/register',
+      name: 'register',
+      component: () => import('@/views/RegisterView.vue')
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/LoginView.vue')
     }
   ]
 })
diff --git a/blog-frontend/src/views/IndexView.vue b/blog-frontend/src/views/IndexView.vue
index a8ec0b7..3f2985c 100644
--- a/blog-frontend/src/views/IndexView.vue
+++ b/blog-frontend/src/views/IndexView.vue
@@ -1,6 +1,44 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import BlogComponent from '@/components/BlogComponent.vue';
+
+const count = ref(3)
+const load = () => {
+    count.value += 2
+}
 </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>
+        </ul>
+    </el-scrollbar>
 </template>
+  
+<style scoped>
+.infinite-list {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    margin-right: 10px;
+}
+
+.infinite-list .infinite-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* height: 50px; */
+    background: var(--el-color-primary-light-9);
+    margin: 10px;
+    color: var(--el-color-primary);
+}
+
+.infinite-list .infinite-list-item+.list-item {
+    margin-top: 10px;
+}
+</style>
+  
\ No newline at end of file
diff --git a/blog-frontend/src/views/VueIndexVuew.vue b/blog-frontend/src/views/VueIndexVuew.vue
deleted file mode 100644
index dfbcf57..0000000
--- a/blog-frontend/src/views/VueIndexVuew.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-</script>
-
-<template>
-    <header>
-        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-        <div class="wrapper">
-            <HelloWorld msg="You did it!" />
-
-            <nav>
-                <RouterLink to="/">Home</RouterLink>
-                <RouterLink to="/about">About</RouterLink>
-            </nav>
-        </div>
-    </header>
-</template>
-
-<style scoped>
-header {
-    line-height: 1.5;
-    max-height: 100vh;
-}
-
-.logo {
-    display: block;
-    margin: 0 auto 2rem;
-}
-
-nav {
-    width: 100%;
-    font-size: 12px;
-    text-align: center;
-    margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-    color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-    background-color: transparent;
-}
-
-nav a {
-    display: inline-block;
-    padding: 0 1rem;
-    border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-    border: 0;
-}
-
-@media (min-width: 1024px) {
-    header {
-        display: flex;
-        place-items: center;
-        padding-right: calc(var(--section-gap) / 2);
-    }
-
-    .logo {
-        margin: 0 2rem 0 0;
-    }
-
-    header .wrapper {
-        display: flex;
-        place-items: flex-start;
-        flex-wrap: wrap;
-    }
-
-    nav {
-        text-align: left;
-        margin-left: -1rem;
-        font-size: 1rem;
-
-        padding: 1rem 0;
-        margin-top: 1rem;
-    }
-}
-</style>