把东西放入vue文件夹

.idea/.gitignore

@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/bloggingplatform.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/bloggingplatform.iml" filepath="$PROJECT_DIR$/.idea/bloggingplatform.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

vue/src/components/BlogSearch.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <!-- 搜索区域 -->
     <div v-if="!showResults" class="search-component">
       <input type="text" v-model="searchTerm" placeholder="请输入搜索词" />
@@ -60,18 +61,15 @@
         </ul>
       </div>
 
-    <!-- 分页区域 -->
+      <!-- 最下面一排的导航按钮 -->
-    <div class="pagination-area">
+      <div class="bottom-navigation">
         <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
         <span>第{{ currentPage }}页 / 共{{ totalPages }}页</span>
         <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
-    </div>
-
-    <!-- 返回相关区域 -->
-    <div class="back-button-area">
         <button @click="goBackToSearch">返回搜索</button>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -259,4 +257,12 @@ button {
 .back-button-area {
   margin-top: 20px;
 }
+.bottom-navigation {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #ccc;
+  padding-top: 20px;
+}
 </style>