feat: search function added

src/styles/show.css

@@ -50,3 +50,11 @@
   width: 70%;
   margin: auto
 }
+
+.pagination-block{
+  margin-top: 10px;
+}
+
+.el-pagination{
+  justify-content: center;
+}

src/views/blog/articles.vue

@@ -8,7 +8,7 @@
                             <h2>Articles</h2>
                         </div>
                         <div class="search-input">
-                            <el-input v-model="search_text" placeholder="Type something">
+                            <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
                                 <template #prefix>
                                     <el-icon class="el-input__icon">
                                         <search />
@@ -20,7 +20,7 @@
                 </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="articles" v-for="item in filteredArticles" @click="openDetails(item)">
                             <div class="articlespic">
                                 <img :src="item.pic" alt="芜湖" />
                             </div>
@@ -29,6 +29,9 @@
                                 <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>
@@ -39,13 +42,12 @@
 <script setup>
 import '@/styles/show.css'
 import axios from 'axios'
-import { onMounted, ref, computed } from 'vue'
+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 userinfo = userInfoStore()
 const details = viewDetailsStore()
 
 const router = useRouter()
@@ -53,19 +55,31 @@ const router = useRouter()
 const search_text = ref('')
 
 const pageSize = 5
-const page = 1
+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,
+                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
@@ -77,6 +91,31 @@ const getArticles = async () => {
 
 }
 
+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')
@@ -84,9 +123,12 @@ const openDetails = async (item) => {
 
 
 
-onMounted(() => {
+watch(page, getArticles, { immediate: true })
-    getArticles()
+watch(search_page, doSearch)
 
-})
+// onMounted(() => {
+//     getArticles()
+
+// })
 
 </script>

src/views/blog/show.vue

@@ -8,7 +8,7 @@
                             <h2>Merlin`s blog</h2>
                         </div>
                         <div class="search-input">
-                            <el-input v-model="search_text" placeholder="Type something">
+                            <el-input v-model="search_text" placeholder="Type something" clearable @keyup.enter="doSearch">
                                 <template #prefix>
                                     <el-icon class="el-input__icon">
                                         <search />
@@ -20,7 +20,7 @@
                 </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="news" v-for="item in filteredNews" @click="openDetails(item)">
                             <div class="newspic">
                                 <img :src="item.pic" alt="芜湖" />
                             </div>
@@ -29,6 +29,9 @@
                                 <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>
@@ -50,13 +53,11 @@
 <script setup>
 import '@/styles/show.css'
 import axios from 'axios'
-import { onMounted, ref, computed } from 'vue'
+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 userinfo = userInfoStore()
 const details = viewDetailsStore()
 
 const router = useRouter()
@@ -66,8 +67,17 @@ const dialogVisible = ref(true);
 const search_text = ref('')
 
 const pageSize = 5
-const page = 1
+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%'
@@ -79,12 +89,14 @@ const getNews = async () => {
             headers: {
             },
             params: {
-                current: page,
+                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
@@ -96,15 +108,42 @@ const getNews = async () => {
 
 }
 
+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(() => {
+// onMounted(() => {
-    getNews()
+//     getNews()
-})
+// })
 
 </script>