fix: view

src/router.js

@@ -28,6 +28,11 @@ const router = createRouter({
           name: "me",
           component: () => import("@/views/blog/me.vue"),
         },
+        {
+          path: "/articles",
+          name: "articles",
+          component: () => import("@/views/blog/articles.vue"),
+        }
       ],
     },
     {

src/store/details.js

@@ -75,7 +75,7 @@ export const projectStore = defineStore("project", {
 export const viewDetailsStore = defineStore("viewDetails", {
   state: () => ({
     detail: {
-      a_id: "",
+      id: "",
       title: "",
       content: "",
       created: "",
@@ -84,7 +84,7 @@ export const viewDetailsStore = defineStore("viewDetails", {
   }),
   actions: {
     setViewDetails(data) {
-      this.detail.a_id = data.a_id;
+      this.detail.id = data.id;
       this.detail.title = data.title;
       this.detail.content = data.content;
       this.detail.created = data.created;

src/views/blog/articles.vue

@@ -0,0 +1,155 @@
+<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="news" v-for="item in news" @click="openDetails(item.a_id)">
+                            <div class="newspic">
+                                <img :src="item.pic" alt="芜湖" />
+                            </div>
+                            <div class="newscontent">
+                                <h2>{{ item.n_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 news = ref([
+    {
+        a_id: '1',
+        n_title: '1',
+        synopsis: '1',
+        published: '1',
+        pic: '1'
+    },
+    {
+        a_id: '2',
+        n_title: '2',
+        synopsis: '2',
+        published: '2',
+        pic: '2'
+    },
+    {
+        a_id: '3',
+        n_title: '3',
+        synopsis: '3',
+        published: '3',
+        pic: '3'
+    },
+    {
+        a_id: '1',
+        n_title: '1',
+        synopsis: '1',
+        published: '1',
+        pic: '1'
+    },
+    {
+        a_id: '2',
+        n_title: '2',
+        synopsis: '2',
+        published: '2',
+        pic: '2'
+    },
+    {
+        a_id: '3',
+        n_title: '3',
+        synopsis: '3',
+        published: '3',
+        pic: '3'
+    },
+
+])
+
+const getNews = async () => {
+    try {
+        const response = await axios.get('/api/blog/get/news', {
+            headers: {
+                Authorization: 'Bearer ' + userinfo.token
+            },
+            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 (a_id) => {
+    // const response = await axios.get('/api/blog/get/article/' + a_id, {
+    //     headers: {
+    //         Authorization: 'Bearer ' + userinfo.token
+    //     }
+    // })
+    // if (!response.data.code === 200) {
+    //     console.log(response.data.message)
+    //     return
+    // }
+    // details.setViewDetails(response.data.data)
+    details.setViewDetails({
+        id: "1212",
+        title: "12312",
+        content: "231323",
+        created: "123123",
+        updated: "123132",
+    })
+    router.push('viewDetails')
+}
+
+
+
+onMounted(() => {
+    getNews()
+
+})
+
+</script>

src/views/blog/blog.vue

@@ -5,7 +5,7 @@
                 <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" class="menu"
                     menu-trigger="click">
                     <router-link to="/"><el-menu-item index="1">首页</el-menu-item></router-link>
-                    <router-link><el-menu-item index="2">文章</el-menu-item></router-link>
+                    <router-link to="/articles"><el-menu-item index="2">文章</el-menu-item></router-link>
                     <!-- <router-link><el-menu-item index="3">联系站长</el-menu-item></router-link> -->
                     <el-sub-menu index="4" class="sub-menu">
                         <template #title>
@@ -47,7 +47,7 @@
             </el-form-item>
             <el-form-item>
                 <el-button @click="login()">登录</el-button>
-                <el-button @Click="goToRegister()" type="primary">注册</el-button>
+                <!-- <el-button @Click="goToRegister()" type="primary">注册</el-button> -->
             </el-form-item>
         </el-form>
     </el-dialog>

src/views/blog/show.vue

@@ -142,16 +142,23 @@ const getNews = async () => {
 }
 
 const openDetails = async (a_id) => {
-    const response = await axios.get('/api/blog/get/article/' + a_id, {
+    // const response = await axios.get('/api/blog/get/article/' + a_id, {
-        headers: {
+    //     headers: {
-            Authorization: 'Bearer ' + userinfo.token
+    //         Authorization: 'Bearer ' + userinfo.token
-        }
+    //     }
+    // })
+    // if (!response.data.code === 200) {
+    //     console.log(response.data.message)
+    //     return
+    // }
+    // details.setViewDetails(response.data.data)
+    details.setViewDetails({
+        id: "1212",
+        title: "12312",
+        content: "231323",
+        created: "123123",
+        updated: "123132",
     })
-    if (!response.data.code === 200) {
-        console.log(response.data.message)
-        return
-    }
-    details.setViewDetails(response.data.data)
     router.push('viewDetails')
 }
 

src/views/blog/viewDetails.vue

@@ -7,14 +7,9 @@
     </el-row>
     <el-row>
         <el-col :span="24">
-            <h1 v-if="detail.type === 'article'">{{ articleinfo.detail.title }}</h1>
+            <h1>{{ details.detail.title }}</h1>
-            <p v-if="detail.type === 'article'" style="padding: 20px;">发布时间:{{ articleinfo.detail.created }}---更新时间:{{
+            <p style="padding: 20px;">发布时间:{{ details.detail.created }}---更新时间:{{
-                articleinfo.detail.updated }}</p>
+                details.detail.updated }}</p>
-            <h1 v-if="detail.type === 'news'">{{ newsinfo.detail.title }}</h1>
-            <p v-if="detail.type === 'news'" style="padding: 20px;">发布时间:{{ newsinfo.detail.published }}</p>
-            <h1 v-if="detail.type === 'project'">{{ projectinfo.detail.title }}</h1>
-            <p v-if="detail.type === 'project'" style="padding: 20px;">发布时间:{{ projectinfo.detail.created }}---更新时间:{{
-                projectinfo.detail.updated }}</p>
         </el-col>
     </el-row>
     <el-row>
@@ -29,46 +24,29 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
-import { articleStore, detailsStore, newsStore, projectStore } from '@/store/details'
+import { viewDetailsStore } from '@/store/details'
 import { onMounted, ref } from 'vue'
 import { marked } from 'marked'
 
 const router = useRouter()
 
-const detail = detailsStore()
+const details = viewDetailsStore()
 
-const articleinfo = articleStore()
-const newsinfo = newsStore()
-const projectinfo = projectStore()
 
 const Content = ref('')
 
-const show = ref(null)
-
-
-const setShow = () => {
-    if (detail.type === 'article')
-        show.value = articleinfo.detail
-    else if (detail.type === 'news')
-        show.value = newsinfo.detail
-    else if (detail.type === 'project')
-        show.value = projectinfo.detail
-}
-
-
 
 const goBack = () => {
     router.back()
 }
 
 const convertContent = () => {
-    const markdownContent = show.value.content
+    const markdownContent = details.detail.content
     Content.value = marked.parse(markdownContent)
 }
 
 
 onMounted(() => {
-    setShow()
     convertContent()
 })
 </script>