'新闻修改'

src/router/module/constRouter/index.ts

@@ -98,19 +98,8 @@ export const constRouter: any = {
         title: '竞赛新闻',
         hidden: false,
       },
-      children: [
-        {
-          path: '/newsList',
-          name: 'newsList',
-          component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
-          meta: {
-            icon: '',
-            title: '新闻列表',
-            hidden: false,
-          },
     },
     {
-          // path: '/newsDetail',
       path: 'detail/:id',
       name: 'newsDetail',
       component: () => import('@/views/news/components/newsDetail.vue'),
@@ -119,8 +108,6 @@ export const constRouter: any = {
         title: '新闻内容详情',
         hidden: true,
       }
-        }
-      ],
     },
     {
       path: '/user-info',

src/views/news/components/newsDetail.vue

@@ -24,7 +24,7 @@ const data = ref({});
 //通过id获取文章详细信息
 queryEssayApi(route.params.id).then(res=>{
   data.value = res.result[0]
-  console.log(data.value,'data')
+  console.log(`当前id为${route.params.id}新闻详细信息`,data.value)
 })
 
 // 定义一个计算属性来处理图片路径
@@ -44,6 +44,7 @@ const completeImageUrl = computed(() => {
   overflow-y: scroll;
   padding: 0;
   display: block;
+  margin-top: 100px;
 }
 .container::-webkit-scrollbar {
   width: 0;

src/views/news/components/newsList.vue

@@ -1,164 +0,0 @@
-<template>
-  <el-tabs v-model="activeName" style="max-width: 70%; margin: auto" class="container" @tab-click="handleTabClick">
-    <el-tab-pane
-        v-for="category in categories"
-        :key="category.id"
-        :label="category.name"
-        :name="category.id"
-    >
-      <ul>
-        <li v-for="newsItem in getNewsItemsForCategory(category)" :key="newsItem.id">
-          <div class="box-list" @click.stop="handleNewsClick(newsItem)">
-            <div class="left-box-list">
-              <p class="list-title">{{ newsItem.title }}</p>
-              <p class="list-summary">{{ stripHtmlTags(newsItem.summary) }}</p>
-              <p class="list-time">{{ newsItem.date }}</p>
-            </div>
-            <img class="news-image" :src="newsItem.imageUrl" alt="News Image"  v-default-image>
-          </div>
-          <el-divider />
-        </li>
-      </ul>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { getColumnListApi, queryEssayListApi } from '@/api/news'
-let categories = ref([])
-let newsItems = ref({})
-let activeName = ref('')
-const router = useRouter()
-
-//使用正则表达式转换html标签文本
-function stripHtmlTags(html) {
-  return html.replace(/<[^>]*>/g, '');
-}
-
-// 获取栏目信息
-const fetchColumnList = async () => {
-  const response = await getColumnListApi()
-  if (response.success && response.result) {
-    categories.value = response.result.filter(category => category.isShow === '1')
-    // 尝试立即加载第一个栏目的新闻列表
-    if (categories.value.length > 0) {
-      await fetchNewsList(categories.value[0].id)
-      activeName.value = categories.value[0].id
-    }
-  }
-}
-
-// 栏目新闻列表查询
-const fetchNewsList = async (categoryId) => {
-  try {
-    const response = await queryEssayListApi(categoryId)
-    console.log(response.success,'daaaaaaa')
-    console.log(response.result.records,'ddddddd')
-    if (response.success && response.result.records) {
-      newsItems.value[categoryId] = response.result.records.map(data => ({
-        id: data.id,
-        title: data.title,
-        date: data.publishTime,
-        summary: data.content,
-        imageUrl: data.comimg ? getAbsoluteImagePath(data.comimg) : ''
-      }))
-    }
-  } catch (error) {
-    console.error('获取新闻列表失败', error)
-  }
-}
-
-//获取图片完整地址
-const getAbsoluteImagePath = (relativePath) => {
-  const baseImageUrl = 'https://localhost:18085/jeecg-boot/'; // 替换为实际的服务器地址
-  return baseImageUrl + relativePath;
-};
-
-// 获取指定栏目的新闻列表
-const getNewsItemsForCategory = (category) => {
-  return newsItems.value[category.id] || []
-}
-
-// 初始化加载栏目列表
-onMounted(() => {
-  fetchColumnList()
-})
-
-// 当选项卡改变时更新当前显示的新闻列表
-const handleTabClick = async (tab) => {
-  const categoryId = tab.props.name
-  if (!newsItems.value[categoryId]?.length) {
-    await fetchNewsList(categoryId)
-  }
-  activeName.value = categoryId
-}
-
-// 处理新闻条目的点击事件
-const handleNewsClick = (newsItem) => {
-  router.push({
-    name: 'newsDetail',
-    params: { id: newsItem.id.toString() },
-  })
-}
-
-</script>
-
-<style scoped>
-.container{
-  margin: auto;
-  height: 98vh;
-  overflow-y: scroll;
-  padding: 0;
-  display: block;
-}
-.container::-webkit-scrollbar {
-  width: 0;
-}
-.box-list{
-  display: flex;
-  width: 95%;
-  height: 100px;
-  margin-left: 30px;
-  margin-bottom: 10px;
-  align-items: center;
-  cursor: pointer; /* 默认鼠标指针形状 */
-}
-.box-list:hover {
-  background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
-}
-.left-box-list {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex: 1;
-  padding-right: 10px;
-}
-.list-title{
-  font-size: 22px;
-  margin-left: 60px;
-}
-.list-summary{
-  font-size: 16px;
-  margin-left: 60px;
-  margin-top: 15px;
-  color: #999999;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1 ;
-  overflow: hidden;
-  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
-  max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
-}
-.list-time{
-  margin-left: 60px;
-  margin-top: 20px;
-  color: #999999;
-}
-.news-image {
-  width: 100px;
-  height: 80px;
-  margin-right: 30px;
-}
-</style>

src/views/news/index.vue

@@ -1,12 +1,166 @@
 <template>
-  <div class="container">
-    <router-view/>
+  <div class="main">
+    <el-tabs v-model="activeName" style="max-width: 70%; margin: auto" class="container" @tab-click="handleTabClick">
+      <el-tab-pane
+          v-for="category in categories"
+          :key="category.id"
+          :label="category.name"
+          :name="category.id"
+      >
+        <ul>
+          <li v-for="newsItem in getNewsItemsForCategory(category)" :key="newsItem.id">
+            <div class="box-list" @click.stop="handleNewsClick(newsItem)">
+              <div class="left-box-list">
+                <p class="list-title">{{ newsItem.title }}</p>
+                <p class="list-summary">{{ stripHtmlTags(newsItem.summary) }}</p>
+                <p class="list-time">{{ newsItem.date }}</p>
+              </div>
+              <img class="news-image" :src="newsItem.imageUrl" alt="News Image"  v-default-image>
+            </div>
+            <el-divider />
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getColumnListApi, queryEssayListApi } from '@/api/news'
+let categories = ref([])
+let newsItems = ref({})
+let activeName = ref('')
+const router = useRouter()
+
+//使用正则表达式转换html标签文本
+function stripHtmlTags(html) {
+  return html.replace(/<[^>]*>/g, '');
+}
+
+// 获取栏目信息
+const fetchColumnList = async () => {
+  const response = await getColumnListApi()
+  if (response.success && response.result) {
+    categories.value = response.result.filter(category => category.isShow === '1')
+    // 尝试立即加载第一个栏目的新闻列表
+    if (categories.value.length > 0) {
+      await fetchNewsList(categories.value[0].id)
+      activeName.value = categories.value[0].id
+    }
+  }
+}
+
+// 栏目新闻列表查询
+const fetchNewsList = async (categoryId) => {
+  try {
+    const response = await queryEssayListApi(categoryId)
+    // console.log(response.success,'是否有响应')
+    // console.log(response.result.records,'获取的响应数据')
+    if (response.success && response.result.records) {
+      newsItems.value[categoryId] = response.result.records.map(data => ({
+        id: data.id,
+        title: data.title,
+        date: data.publishTime,
+        summary: data.content,
+        imageUrl: data.comimg ? getAbsoluteImagePath(data.comimg) : ''
+      }))
+    }
+  } catch (error) {
+    console.error('获取新闻列表失败', error)
+  }
+}
+
+//获取图片完整地址
+const getAbsoluteImagePath = (relativePath) => {
+  const baseImageUrl = 'https://localhost:18085/jeecg-boot/'; // 替换为实际的服务器地址
+  return baseImageUrl + relativePath;
+};
+
+// 获取指定栏目的新闻列表
+const getNewsItemsForCategory = (category) => {
+  return newsItems.value[category.id] || []
+}
+
+// 初始化加载栏目列表
+onMounted(() => {
+  fetchColumnList()
+})
+
+// 当选项卡改变时更新当前显示的新闻列表
+const handleTabClick = async (tab) => {
+  const categoryId = tab.props.name
+  if (!newsItems.value[categoryId]?.length) {
+    await fetchNewsList(categoryId)
+  }
+  activeName.value = categoryId
+}
+
+// 处理新闻条目的点击事件
+const handleNewsClick = (newsItem) => {
+  router.push({
+    name: 'newsDetail',
+    params: { id: newsItem.id.toString() },
+  })
+}
 </script>
 <style scoped>
+.main{
+  margin-top: 100px;
+}
 .container{
-  margin-top:100px;
+  margin: auto;
+  height: 98vh;
+  overflow-y: scroll;
+  padding: 0;
+  display: block;
+}
+.container::-webkit-scrollbar {
+  width: 0;
+}
+.box-list{
+  display: flex;
+  width: 95%;
+  height: 100px;
+  margin-left: 30px;
+  margin-bottom: 10px;
+  align-items: center;
+  cursor: pointer; /* 默认鼠标指针形状 */
+}
+.box-list:hover {
+  background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
+}
+.left-box-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  padding-right: 10px;
+}
+.list-title{
+  font-size: 22px;
+  margin-left: 60px;
+}
+.list-summary{
+  font-size: 16px;
+  margin-left: 60px;
+  margin-top: 15px;
+  color: #999999;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1 ;
+  overflow: hidden;
+  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
+  max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
+}
+.list-time{
+  margin-left: 60px;
+  margin-top: 20px;
+  color: #999999;
+}
+.news-image {
+  width: 100px;
+  height: 80px;
+  margin-right: 30px;
 }
 </style>