动态刷新列表已上线，太吊了

src/views/news-management/EditNews.vue

@@ -39,11 +39,14 @@ import translations from 'ckeditor5/translations/zh-cn.js';
 import 'ckeditor5/ckeditor5.css';
 import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
 import {useRoute, useRouter} from "vue-router";
+import {useStore} from "vuex";
 import axios from "axios";
 
 const route = useRoute();
 const router = useRouter();
+const store = useStore();
 const form = ref({
+  token: '',
   title: '',
   author: '',
   content: '',
@@ -103,6 +106,7 @@ const handleRemove = (file) => {
 }
 
 const handleCommit = async () => {
+  form.value.token = store.getters['authentication/token'];
   if (createMode.value) {
     try {
       form.value.imagePath = fileList.value[0].url;
@@ -403,7 +407,7 @@ onMounted(() => {
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" @click="handleCommit">确定</el-button>
         <el-button>取消</el-button>
       </el-form-item>
     </el-form>

src/views/news-management/NewsList.vue

@@ -1,6 +1,11 @@
 <script setup>
-import { ref } from 'vue';
-import { ElTable, ElTableColumn, ElInput, ElButton, ElPagination, ElForm, ElFormItem } from 'element-plus';
+import {onMounted, ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElPagination, ElTable, ElTableColumn} from 'element-plus';
+import axios from "axios";
+import {useStore} from "vuex";
+
+const store = useStore();
+const token = store.getters['authentication/token']
 
 const searchTitle = ref('');
 const searchPath = ref('');
@@ -8,92 +13,40 @@ const searchAuthor = ref('');
 const searchSummary = ref('');
 const sortOrder = ref('');
 
-const newsData = ref([
-  {
-    title: '【资讯】江苏省软件产品检测中心软件自主创新',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '2023智慧工程-信创（开源）应用竞赛案例赛两个赛道',
-    author: '上海计算机软件技术开发中心',
-    summary: '2023智慧工程-信创（开源）应用竞赛案例赛'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  }, {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-  {
-    title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
-    author: '江苏省软件产品检测中心',
-    summary: '江苏省软件产品检测中心'
-  },
-
-  // 更多数据...
-]);
+const allNewsData = ref([]);
+const newsData = ref([]);
 
 const currentPage = ref(1);
 const pageSize = ref(10);
+const newsCount = ref(0);
+const firstTimeLoad = ref(true);
+const loadNews = async () => {
+  if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
+    console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
+    let params = {
+      token: token,
+      start: allNewsData.value.length,
+      end: allNewsData.value.length + pageSize.value * 2
+    }
+    try {
+      const response = await axios.get('/api/news', {params})
+      const data = response.data
+      newsCount.value = data.newsCount;
+      allNewsData.value.push(...data.newsList);
+    } catch (e) {
+      console.log(e)
+    }
+    firstTimeLoad.value = false;
+  }
+  newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+  console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
+};
+
+onMounted(() => {
+  loadNews();
+
+})
+
 
 const handleSearch = () => {
   // 搜索逻辑
@@ -151,7 +104,7 @@ const handleDelete = (index) => {
       <el-button type="info">导出</el-button>
     </div>
 
-    <el-table :data="newsData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;">
+    <el-table :data="newsData" style="width: 100%;">
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
       <el-table-column prop="author" label="作者" align="center"></el-table-column>
@@ -166,12 +119,12 @@ const handleDelete = (index) => {
 
     <div class="pagination-container">
       <el-pagination
-          @size-change="pageSize = $event"
-          @current-change="currentPage = $event"
+          @size-change="pageSize = $event;loadNews()"
+          @current-change="currentPage = $event;loadNews()"
           :current-page="currentPage"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
-          :total="newsData.length"
+          :total="newsCount"
           :page-sizes="[10, 20, 50, 100]"
       >
       </el-pagination>