feat: 增加新闻页

src/api/news.js

@@ -2,4 +2,8 @@ import request from '../utils/request'
 
 export function listLatestNews() {
     return request.get('/news/latestList');
+}
+
+export function getNewsById(newsId) {
+    return request.get(`/news/${newsId}`);
 }

src/components/common/Top.vue

@@ -9,6 +9,7 @@
             type="text"
             placeholder="书名、作者、关键字"
             class="s_int"
+            v-on:keyup.enter="searchByK"
           />
           <label class="search_btn" id="btnSearch" @click="searchByK()"
             ><i class="icon"></i

src/components/home/LatestNews.vue

@@ -2,24 +2,25 @@
   <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>
+      <a href="javascript:void(0)" @click="newsInfo(item.id)"> {{ item.title }}</a>
+      
     </dd>
   </dl>
 </template>
 
 <script>
 import { reactive, toRefs, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { ElMessage, ElLoading } from "element-plus";
-import {listLatestNews} from "@/api/news";
+import { listLatestNews } from "@/api/news";
 export default {
   name: "LatestNews",
   setup() {
     const state = reactive({
       newsList: [],
     });
-
+    const route = useRoute();
+    const router = useRouter();
     onMounted(async () => {
       const loadingInstance = ElLoading.service({
         target: "#indexNews",
@@ -30,9 +31,12 @@ export default {
 
       state.newsList = data;
     });
-
+    const newsInfo = (newsId) => {
+      router.push({ path: `/news/${newsId}` });
+    };
     return {
       ...toRefs(state),
+      newsInfo,
     };
   },
 };

src/router/index.js

@@ -13,12 +13,11 @@ const router = createRouter({
       path: '/home',
       name: 'home',
       component: () => import('@/views/Home')
-	   
     },
     {
-      path: '/home',
-      name: 'newsContent',
-      component: () => import('@/views/Home')
+      path: '/news/:id',
+      name: 'news',
+      component: () => import('@/views/News')
     },
     {
       path: '/bookClass',

src/views/News.vue

@@ -0,0 +1,61 @@
+<template>
+  <Header />
+
+  <div class="main box_center cf">
+    <div class="newsMain cf">
+        <div class="nav_sub">
+            当前位置：<a href="/"> 首页 </a> &gt; <span> 新闻公告 </span> &gt; <span>{{news.title}}</span>
+        </div>
+        <div class="channelWrap channelNews cf">
+            <div class="news_title">
+                <h2>{{news.title}}</h2>
+                <!--while ... corresponds to th:text (i.e. result will be HTML-escaped), ... corresponds to th:utext-->
+                <p class="from">来源：{{news.sourceName}} <span class="time">时间：{{news.updateTime}}</span> </p>
+            </div>
+            <div class="news_info" v-html="news.content"></div>
+        </div>
+    </div>
+</div>
+  <Footer />
+</template>
+
+<script>
+import "@/assets/styles/about.css";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import {getNewsById} from "@/api/news"
+import {
+  listVisitRankBooks,
+  listUpdateRankBooks,
+  listNewestRankBooks,
+} from "@/api/book";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "news",
+  components: {
+    Header,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      news: {}
+    });
+    onMounted(async () => {
+      const { data } = await getNewsById(route.params.id);
+      state.news = data
+    });
+
+
+    return {
+      ...toRefs(state)
+      
+    };
+  }
+  
+};
+</script>
+