feat: 新增首页最新新闻列表组件

src/api/news.js

@@ -0,0 +1,5 @@
+import request from '../utils/request'
+
+export function listLatestNews() {
+    return request.get('/news/latestList');
+}

src/components/LatestNews.vue

@@ -0,0 +1,39 @@
+<template>
+  <dl class="hot_notice" id="indexNews">
+    <dd style="text-align: left" v-for="(item, index) in newsList" :key="index">
+      <span>[{{ item.categoryName }}]</span>
+      <router-link :to="{ name: 'newsContent', query: { id: item.id } }">
+        {{ item.title }}
+      </router-link>
+    </dd>
+  </dl>
+</template>
+
+<script>
+import { reactive, toRefs, onMounted } from "vue";
+import { ElMessage, ElLoading } from "element-plus";
+import {listLatestNews} from "@/api/news";
+export default {
+  name: "LatestNews",
+  setup() {
+    const state = reactive({
+      newsList: [],
+    });
+
+    onMounted(async () => {
+      const loadingInstance = ElLoading.service({
+        target: "#indexNews",
+        text: "加载中。。。",
+      });
+      const { data } = await listLatestNews();
+      loadingInstance.close();
+
+      state.newsList = data;
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>

src/router/index.js

@@ -15,6 +15,11 @@ const router = createRouter({
       component: () => import('@/views/Home')
 	   
     },
+    {
+      path: '/home',
+      name: 'newsContent',
+      component: () => import('@/views/Home')
+    },
     {
       path: '/home',
       name: 'book',

src/views/Home.vue

@@ -83,20 +83,7 @@
             </dd>
           </dl>
 
-          <dl class="hot_notice" id="indexNews">
-            <dd style="text-align: left">
-              <span>[资讯]</span
-              ><a href="/about/newsInfo-5.html"
-                >AI小说悄然流行：人类特有的创作力，已经被AI复制？</a
-              >
-            </dd>
-            <dd style="text-align: left">
-              <span>[行业]</span
-              ><a href="/about/newsInfo-4.html"
-                >阅文推“单本可选新合同”：授权分级、免费或付费自选</a
-              >
-            </dd>
-          </dl>
+          <LatestNews/>
         </div>
       </div>
       <div class="rightBox">
@@ -141,7 +128,11 @@
           <h2 class="on">热门推荐</h2>
         </div>
         <div class="picRecommend cf" id="hotRecBooks">
-          <div class="itemsList" v-for="(item, index) in hotRecommend" :key="index">
+          <div
+            class="itemsList"
+            v-for="(item, index) in hotRecommend"
+            :key="index"
+          >
             <a class="items_img" href="/book/1338432467551432705.html">
               <img
                 :src="`${imgBaseUrl}` + `${item.picUrl}`"
@@ -150,18 +141,17 @@
               />
             </a>
             <div class="items_txt">
-              <h4><a href="/book/1338432467551432705.html">{{item.bookName}}</a></h4>
+              <h4>
+                <a href="/book/1338432467551432705.html">{{ item.bookName }}</a>
+              </h4>
               <p class="author">
                 <a href="javascript:void(0)">作者：{{ item.authorName }}</a>
               </p>
               <p class="intro">
-                <a href="/book/1338432467551432705.html"
-                  >{{item.bookDesc}}</a
-                >
+                <a href="/book/1338432467551432705.html">{{ item.bookDesc }}</a>
               </p>
             </div>
           </div>
-         
         </div>
       </div>
       <div id="bookrank1_ShowBookRank">
@@ -348,7 +338,11 @@
         </div>
 
         <div class="picRecommend cf" id="classicBooks">
-          <div class="itemsList" v-for="(item, index) in goodRecommend" :key="index" >
+          <div
+            class="itemsList"
+            v-for="(item, index) in goodRecommend"
+            :key="index"
+          >
             <a class="items_img" href="/book/1334327477657501696.html">
               <img
                 :src="`${imgBaseUrl}` + `${item.picUrl}`"
@@ -363,14 +357,10 @@
                 <a href="javascript:void(0)">作者：{{ item.authorName }}</a>
               </p>
               <p class="intro">
-                <a href="/book/1334327477657501696.html"
-                  >{{item.bookDesc}}</a
-                >
+                <a href="/book/1334327477657501696.html">{{ item.bookDesc }}</a>
               </p>
             </div>
           </div>
-          
-         
         </div>
       </div>
       <div id="bookrank2_ShowBookRank">
@@ -1198,10 +1188,12 @@ import { reactive, toRefs, onMounted } from "vue";
 import { listHomeBooks } from "@/api/home";
 import { ElMessage, ElLoading } from "element-plus";
 import Header from "@/components/Header";
+import LatestNews from "@/components/LatestNews"
 export default {
   name: "home",
   components: {
     Header,
+    LatestNews
   },
   setup() {
     const state = reactive({
@@ -1215,7 +1207,7 @@ export default {
       hotRecommend: [],
       // 精品推荐
       goodRecommend: [],
-      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL
+      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
     });
 
     onMounted(async () => {
@@ -1297,8 +1289,7 @@ export default {
     });
 
     return {
-      ...toRefs(state)
-      
+      ...toRefs(state),
     };
   },
 };