diff --git a/src/styles/show.css b/src/styles/show.css
index dc25043..f0ad71f 100644
--- a/src/styles/show.css
+++ b/src/styles/show.css
@@ -1,52 +1,60 @@
-.container {
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-}
-.show-top-text h2{
-  padding: 10px;
-  font-size: 25px;
-  font-weight: bold;
-  margin: auto;
-  font-style: italic;
-}
-.welcome {
-  padding: 20px;
-  font-style: italic;
-  text-align: right;
-}
-.show-top-text{
-  text-align: center;
-}
-.newsbox, .articlesbox{
-  width: 100%;
-  height: 100%;
-}
-.news, .articles{
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin: auto;
-  padding: 10px;
-  flex: 2;
-  height: 100px;
-}
-.newspic, .articlespic{
-  display: inline-block;
-  background-color: #5b5a5a;
-  width: 20%;
-  min-width: 100px;
-  max-width: 130px;
-  height: 100%;
-}
-.newscontent, .articlescontent{
-  margin-right: auto;
-  display: inline-block;
-  padding: 10px;
-}
-
-.search-input{
-  width: 70%;
-  margin: auto
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+.show-top-text h2{
+  padding: 10px;
+  font-size: 25px;
+  font-weight: bold;
+  margin: auto;
+  font-style: italic;
+}
+.welcome {
+  padding: 20px;
+  font-style: italic;
+  text-align: right;
+}
+.show-top-text{
+  text-align: center;
+}
+.newsbox, .articlesbox{
+  width: 100%;
+  height: 100%;
+}
+.news, .articles{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+  padding: 10px;
+  flex: 2;
+  height: 100px;
+}
+.newspic, .articlespic{
+  display: inline-block;
+  background-color: #5b5a5a;
+  width: 20%;
+  min-width: 100px;
+  max-width: 130px;
+  height: 100%;
+}
+.newscontent, .articlescontent{
+  margin-right: auto;
+  display: inline-block;
+  padding: 10px;
+}
+
+.search-input{
+  width: 70%;
+  margin: auto
+}
+
+.pagination-block{
+  margin-top: 10px;
+}
+
+.el-pagination{
+  justify-content: center;
 }
\ No newline at end of file
diff --git a/src/views/blog/articles.vue b/src/views/blog/articles.vue
index 096ca9b..2168351 100644
--- a/src/views/blog/articles.vue
+++ b/src/views/blog/articles.vue
@@ -1,92 +1,134 @@
-<template>
-    <div class="container">
-        <el-row :span="24" style="height: 100%;">
-            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
-                <el-row style="height: 30%;">
-                    <el-col :span="24" style="height: 100%;">
-                        <div class="show-top-text">
-                            <h2>Articles</h2>
-                        </div>
-                        <div class="search-input">
-                            <el-input v-model="search_text" placeholder="Type something">
-                                <template #prefix>
-                                    <el-icon class="el-input__icon">
-                                        <search />
-                                    </el-icon>
-                                </template>
-                            </el-input>
-                        </div>
-                    </el-col>
-                </el-row>
-                <el-row style="height: 60%;">
-                    <el-col :span="24" style="height: 100%;">
-                        <div class="articles" v-for="item in articles" @click="openDetails(item)">
-                            <div class="articlespic">
-                                <img :src="item.pic" alt="芜湖" />
-                            </div>
-                            <div class="articlescontent">
-                                <h2>{{ item.title }}</h2>
-                                <p class="date">{{ item.published }}</p>
-                            </div>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-col>
-        </el-row>
-    </div>
-</template>
-
-<script setup>
-import '@/styles/show.css'
-import axios from 'axios'
-import { onMounted, ref, computed } from 'vue'
-import { userInfoStore } from '@/store/store'
-import { useRouter } from 'vue-router'
-import { viewDetailsStore } from '@/store/details'
-import { Search } from '@element-plus/icons-vue'
-
-const userinfo = userInfoStore()
-const details = viewDetailsStore()
-
-const router = useRouter()
-
-const search_text = ref('')
-
-const pageSize = 5
-const page = 1
-const articles = ref([])
-
-const getArticles = async () => {
-    try {
-        const response = await axios.get('/api/blog/get/articles', {
-            params: {
-                current: page,
-                size: pageSize
-            }
-        })
-        if (response.data.code === 200) {
-            articles.value = response.data.data.records
-        } else {
-            console.log(response.data.message)
-            return
-        }
-    } catch (error) {
-        console.log(error)
-        return
-    }
-
-}
-
-const openDetails = async (item) => {
-    details.setViewDetails(item)
-    router.push('viewDetails')
-}
-
-
-
-onMounted(() => {
-    getArticles()
-
-})
-
-</script>
+<template>
+    <div class="container">
+        <el-row :span="24" style="height: 100%;">
+            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
+                <el-row style="height: 30%;">
+                    <el-col :span="24" style="height: 100%;">
+                        <div class="show-top-text">
+                            <h2>Articles</h2>
+                        </div>
+                        <div class="search-input">
+                            <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
+                                <template #prefix>
+                                    <el-icon class="el-input__icon">
+                                        <search />
+                                    </el-icon>
+                                </template>
+                            </el-input>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row style="height: 60%;">
+                    <el-col :span="24" style="height: 100%;">
+                        <div class="articles" v-for="item in filteredArticles" @click="openDetails(item)">
+                            <div class="articlespic">
+                                <img :src="item.pic" alt="芜湖" />
+                            </div>
+                            <div class="articlescontent">
+                                <h2>{{ item.title }}</h2>
+                                <p class="date">{{ item.published }}</p>
+                            </div>
+                        </div>
+                        <div class="pagination-block">
+                            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+import '@/styles/show.css'
+import axios from 'axios'
+import { onMounted, ref, computed,watch } from 'vue'
+import { userInfoStore } from '@/store/store'
+import { useRouter } from 'vue-router'
+import { viewDetailsStore } from '@/store/details'
+import { Search } from '@element-plus/icons-vue'
+
+const details = viewDetailsStore()
+
+const router = useRouter()
+
+const search_text = ref('')
+
+const pageSize = 5
+const page = ref(1)
+const search_page = ref(1)
+const total = ref(0)
+const articles = ref([])
+const search = ref([])
+
+const filteredArticles = computed(() => {
+  return search_text.value.trim() === ''
+    ? articles.value
+    : search.value
+})
+
+
+const getArticles = async () => {
+    try {
+        const response = await axios.get('/api/blog/get/articles', {
+            params: {
+                current: page.value,
+                size: pageSize
+            }
+        })
+        if (response.data.code === 200) {
+            articles.value = response.data.data.records
+            page.value = response.data.data.current
+            total.value = response.data.data.total
+        } else {
+            console.log(response.data.message)
+            return
+        }
+    } catch (error) {
+        console.log(error)
+        return
+    }
+
+}
+
+const doSearch = async () =>{
+    if (!search_text.value.trim()) return
+    try{
+        const response = await axios.post('/api/blog/search/articles',{
+            title: search_text.value
+        },{
+            params: {
+                current: search_page.value,
+                size: pageSize
+            }
+        })
+        if(response.data.code === 200){
+            search.value = response.data.data.records
+            page.value = response.data.data.current
+            total.value = response.data.data.total
+        }else {
+            console.log(response.data.message)
+            return
+        }
+    }catch(error){
+        console.log(error)
+        return
+    }
+}
+
+const openDetails = async (item) => {
+    details.setViewDetails(item)
+    router.push('viewDetails')
+}
+
+
+
+watch(page, getArticles, { immediate: true })
+watch(search_page, doSearch)
+
+// onMounted(() => {
+//     getArticles()
+
+// })
+
+</script>
diff --git a/src/views/blog/show.vue b/src/views/blog/show.vue
index 40a75c5..c05acb4 100644
--- a/src/views/blog/show.vue
+++ b/src/views/blog/show.vue
@@ -1,110 +1,149 @@
-<template>
-    <div class="container">
-        <el-row :span="24" style="height: 100%;">
-            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
-                <el-row style="height: 30%;">
-                    <el-col :span="24" style="height: 100%;">
-                        <div class="show-top-text">
-                            <h2>Merlin`s blog</h2>
-                        </div>
-                        <div class="search-input">
-                            <el-input v-model="search_text" placeholder="Type something">
-                                <template #prefix>
-                                    <el-icon class="el-input__icon">
-                                        <search />
-                                    </el-icon>
-                                </template>
-                            </el-input>
-                        </div>
-                    </el-col>
-                </el-row>
-                <el-row style="height: 60%;">
-                    <el-col :span="24" style="height: 100%;">
-                        <div class="news" v-for="item in news" @click="openDetails(item)">
-                            <div class="newspic">
-                                <img :src="item.pic" alt="芜湖" />
-                            </div>
-                            <div class="newscontent">
-                                <h2>{{ item.title }}</h2>
-                                <p class="date">{{ item.published }}</p>
-                            </div>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-col>
-        </el-row>
-    </div>
-
-    <el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose">
-        <span>This is a message</span>
-        <template #footer>
-            <div class="dialog-footer">
-                <el-button type="primary" @click="dialogVisible = false">
-                    Confirm
-                </el-button>
-            </div>
-        </template>
-    </el-dialog>
-</template>
-
-<script setup>
-import '@/styles/show.css'
-import axios from 'axios'
-import { onMounted, ref, computed } from 'vue'
-import { userInfoStore } from '@/store/store'
-import { useRouter } from 'vue-router'
-import { viewDetailsStore } from '@/store/details'
-import { Search } from '@element-plus/icons-vue'
-
-const userinfo = userInfoStore()
-const details = viewDetailsStore()
-
-const router = useRouter()
-
-const dialogVisible = ref(true);
-
-const search_text = ref('')
-
-const pageSize = 5
-const page = 1
-const news = ref([])
-
-const dialogWidth = computed(() => {
-    return window.innerWidth < 768 ? '90%' : '60%'
-})
-
-const getNews = async () => {
-    try {
-        const response = await axios.get('/api/blog/get/news', {
-            headers: {
-            },
-            params: {
-                current: page,
-                size: pageSize
-            }
-        })
-        if (response.data.code === 200) {
-            news.value = response.data.data.records
-        } else {
-            console.log(response.data.message)
-            return
-        }
-    } catch (error) {
-        console.log(error)
-        return
-    }
-
-}
-
-const openDetails = async (item) => {
-    details.setViewDetails(item)
-    router.push('viewDetails')
-}
-
-
-
-onMounted(() => {
-    getNews()
-})
-
-</script>
+<template>
+    <div class="container">
+        <el-row :span="24" style="height: 100%;">
+            <el-col :span="24" style="height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee;">
+                <el-row style="height: 30%;">
+                    <el-col :span="24" style="height: 100%;">
+                        <div class="show-top-text">
+                            <h2>Merlin`s blog</h2>
+                        </div>
+                        <div class="search-input">
+                            <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
+                                <template #prefix>
+                                    <el-icon class="el-input__icon">
+                                        <search />
+                                    </el-icon>
+                                </template>
+                            </el-input>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row style="height: 60%;">
+                    <el-col :span="24" style="height: 100%;">
+                        <div class="news" v-for="item in filteredNews" @click="openDetails(item)">
+                            <div class="newspic">
+                                <img :src="item.pic" alt="芜湖" />
+                            </div>
+                            <div class="newscontent">
+                                <h2>{{ item.title }}</h2>
+                                <p class="date">{{ item.published }}</p>
+                            </div>
+                        </div>
+                        <div class="pagination-block">
+                            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+    </div>
+
+    <el-dialog v-model="dialogVisible" title="Tips" :width="dialogWidth" :before-close="handleClose">
+        <span>This is a message</span>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="dialogVisible = false">
+                    Confirm
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import '@/styles/show.css'
+import axios from 'axios'
+import { onMounted, ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { viewDetailsStore } from '@/store/details'
+import { Search } from '@element-plus/icons-vue'
+
+const details = viewDetailsStore()
+
+const router = useRouter()
+
+const dialogVisible = ref(true);
+
+const search_text = ref('')
+
+const pageSize = 5
+const page = ref(1)
+const search_page = ref(1)
+const total = ref(0)
+const news = ref([])
+const search = ref([])
+
+const filteredNews = computed(() => {
+  return search_text.value.trim() === ''
+    ? news.value
+    : search.value
+})
+
+const dialogWidth = computed(() => {
+    return window.innerWidth < 768 ? '90%' : '60%'
+})
+
+const getNews = async () => {
+    try {
+        const response = await axios.get('/api/blog/get/news', {
+            headers: {
+            },
+            params: {
+                current: page.value,
+                size: pageSize
+            }
+        })
+        if (response.data.code === 200) {
+            news.value = response.data.data.records
+            page.value = response.data.data.current
+            total.value = response.data.data.total
+        } else {
+            console.log(response.data.message)
+            return
+        }
+    } catch (error) {
+        console.log(error)
+        return
+    }
+
+}
+
+const doSearch = async () =>{
+    if (!search_text.value.trim()) return
+    try{
+        const response = await axios.post('/api/blog/search/news',{
+            title: search_text.value
+        },{
+            params: {
+                current: search_page.value,
+                size: pageSize
+            }
+        })
+        if(response.data.code === 200){
+            search.value = response.data.data.records
+            page.value = response.data.data.current
+            total.value = response.data.data.total
+        }else {
+            console.log(response.data.message)
+            return
+        }
+    }catch(error){
+        console.log(error)
+        return
+    }
+}
+
+const openDetails = async (item) => {
+    details.setViewDetails(item)
+    router.push('viewDetails')
+}
+
+
+watch(page, getNews, { immediate: true })
+watch(search_page, doSearch)
+
+// onMounted(() => {
+//     getNews()
+// })
+
+</script>