完成并上线

public/web.config

@@ -3,6 +3,13 @@
   <system.webServer>
     <rewrite>
       <rules>
+        <rule name="Redirect to HTTPS" stopProcessing="true">
+          <match url="(.*)" />
+          <conditions>
+            <add input="{HTTPS}" pattern="off" ignoreCase="true" />
+          </conditions>
+          <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
+        </rule>
         <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
           <match url="(.*)" />
           <conditions logicalGrouping="MatchAll">

src/components/ExpListContent.vue

@@ -8,7 +8,33 @@ export default defineComponent({
       titles:[],
       error:null,
       isLoading: false,
-      pagination: null
+      pagination: null as { page: number, pageSize: number, pageCount: number, total: number } | null,
+      currentPageInput: 1,
+    }
+  },
+  computed: {
+    _currentPage(): number {
+      if (this.pagination && typeof this.pagination.page === 'number') {
+        return this.pagination.page;
+      }
+      const params = new URLSearchParams(window.location.search);
+      const pageParam = params.get('page');
+      if (pageParam) {
+        const parsedPage = parseInt(pageParam, 10);
+        if (!isNaN(parsedPage) && parsedPage > 0) {
+          return parsedPage;
+        }
+      }
+      return 1;
+    },
+    totalPages(): number {
+      return (this.pagination && typeof this.pagination.pageCount === 'number' && this.pagination.pageCount > 0) ? this.pagination.pageCount : 1;
+    },
+    isFirstPage(): boolean {
+      return this._currentPage === 1;
+    },
+    isLastPage(): boolean {
+      return this._currentPage === this.totalPages;
     }
   },
   methods:{
@@ -16,54 +42,109 @@ export default defineComponent({
       this.isLoading=true;
       this.error=null;
       const params = new URLSearchParams(window.location.search);
-      const type = params.get('type');
-      console.log('type!',type);
       let pageNum=1;
-      if(this.isActiveRoute('Examples')){
+      const pageParam = params.get('page');
-        const params = new URLSearchParams(window.location.search);
+      if(pageParam!=null){
-        const page = params.get('page');
+        const parsedPage = parseInt(pageParam, 10);
-        if(page!=null){
+        if(!isNaN(parsedPage) && parsedPage > 0){
-          pageNum=parseInt(page, 10);
+          pageNum=parsedPage;
         }
       }
-      let reqarg='/api/project-examples?fields=title,createdAt&sort=createdAt:desc&pagination[page]='+pageNum+'&pagination[pageSize]=15';
+      this.currentPageInput = pageNum;
+
+      let reqarg=`/api/project-examples?fields=title,createdAt&sort=createdAt:desc&pagination[page]=${pageNum}&pagination[pageSize]=15`;
       this.$axios.get(reqarg)
           .then(response =>{
             const resp = response.data;
             this.pagination = resp.meta.pagination;
-            // if(resp.meta.pagination.pageCount==0){
+
-            //   window.location.href = '/Examples';
+            if (this.pagination && typeof this.pagination.page === 'number') {
-            //   console.log('turn');
+              this.currentPageInput = this.pagination.page;
-            // }
+            }
+
             if (resp && Array.isArray(resp.data)) {
               this.titles = resp.data;
-              console.log('reqarg',reqarg);
+              if(this.titles.length === 0 && this.pagination && this.pagination.pageCount > 0 && this.pagination.page > this.pagination.pageCount){
-              if(this.titles.length==0){
+                // 如果请求的页码超出总页数，且有数据（虽然这里是 length === 0，但 pageCount > 0 暗示有数据分布在其他页）
-                this.error = "返回的 JSON 对象中不存在 'data' 数组";
+                // 则跳转到最后一页
+                this.navigateToPage(this.pagination.pageCount);
+                return;
               }
             } else {
               this.error = "返回的 JSON 对象中不存在 'data' 数组";
+              this.pagination = null;
             }
           })
           .catch(err => {
             console.error(err);
             this.error = '请求失败，请稍后重试';
+            this.pagination = null;
           })
           .finally(() => {
             this.isLoading = false;
           });
     },
-    isActiveRoute:function(routename) {
+    navigateToPage(page: number | string) {
-      // Example: Apply style if route name starts with 'user-'
+      const targetPage = Number(page);
-      console.log('Current route name:', this.$route.path, 'Comparing with:', routename);
+
-      return this.$route.path === routename;
+      if (isNaN(targetPage) || targetPage < 1 || (this.pagination && this.pagination.pageCount > 0 && targetPage > this.totalPages) || targetPage === this._currentPage) {
+        if (targetPage !== this._currentPage && (targetPage < 1 || (this.pagination && this.pagination.pageCount > 0 && targetPage > this.totalPages))) {
+          alert(`页码必须在 1 到 ${this.totalPages} 之间。`);
+        }
+        if (this.pagination && typeof this.pagination.page === 'number') {
+          this.currentPageInput = this.pagination.page; // 重置输入框为当前有效页码
+        }
+        return;
+      }
+
+      // 所有分页按钮都使用 window.location.href 跳转到 /Examples?page=xxx
+      window.location.href = `/Examples?page=${targetPage}`;
+    },
+    goToFirstPage() {
+      this.navigateToPage(1);
+    },
+    goToPreviousPage() {
+      if (!this.isFirstPage) {
+        this.navigateToPage(this._currentPage - 1);
+      }
+    },
+    goToNextPage() {
+      if (!this.isLastPage) {
+        this.navigateToPage(this._currentPage + 1);
+      }
+    },
+    goToLastPage() {
+      if (this.pagination && this.pagination.pageCount) {
+        this.navigateToPage(this.totalPages);
+      }
+    },
+    jumpToPage() {
+      const targetPage = Number(this.currentPageInput);
+      if (!isNaN(targetPage)) {
+        this.navigateToPage(targetPage);
+      } else {
+        alert('请输入有效的页码。');
+        if (this.pagination && typeof this.pagination.page === 'number') {
+          this.currentPageInput = this.pagination.page;
+        }
+      }
+    },
+    isActiveRoute(routePath: string): boolean {
+      return this.$route.path === routePath;
     },
     toExamples:function(){
-      window.location.href='/Examples';
+      // 跳转到 /Examples 的第一页
+      window.location.href='/Examples?page=1';
     }
   },
   mounted() {
     this.fetch_items();
+    // 同步 currentPageInput
+    if (this.pagination && typeof this.pagination.page === 'number') {
+      this.currentPageInput = this.pagination.page;
+    } else {
+      this.currentPageInput = this._currentPage; // _currentPage 会从 URL 读取 page 参数
+    }
   }
 })
 </script>
@@ -86,15 +167,57 @@ export default defineComponent({
             </tr>
           </tbody>
         </table>
+        <div v-if="isLoading" class="text-center">加载中...</div>
+        <div v-if="error" class="alert alert-danger">{{ error }}</div>
+        <div v-if="!isLoading && !error && titles.length === 0 && pagination && pagination.pageCount === 0" class="text-center">
+          暂无数据
+        </div>
+      </span>
+      <!-- 分页组件 -->
+      <span class="normalcontenttext" style="width: 100%;"
+            v-if="isActiveRoute('/Examples') && pagination && pagination.pageCount >= 1">
+        <div class="d-flex justify-content-center align-items-center mt-3 mb-3">
+          <nav aria-label="Page navigation">
+            <ul class="pagination">
+              <!-- 当前页码输入框, /总页数, 转到按钮 -->
+              <li class="page-item d-flex align-items-center px-2">
+                <button class="btn btn-sm btn-primary"
+                        @click.prevent="goToFirstPage"
+                        :disabled="isFirstPage">&laquo;</button>
+                <button class="btn btn-sm btn-primary"
+                        @click.prevent="goToPreviousPage"
+                        :disabled="isFirstPage">&lsaquo;</button>
+                <input type="number" class="form-control form-control-sm"
+                       v-model.number="currentPageInput"
+                       @keyup.enter="jumpToPage"
+                       style="width: 70px; text-align: center; margin-right: 5px;"
+                       min="1" :max="totalPages">
+                <span style="margin-right: 10px; font-size: .875rem;">/ {{ totalPages }}</span>
+                <button class="btn btn-sm btn-primary" @click="jumpToPage"
+                        :disabled="Number(currentPageInput) === _currentPage || Number(currentPageInput) < 1 || Number(currentPageInput) > totalPages || isNaN(Number(currentPageInput))">
+                  转到
+                </button>
+                <button class="btn btn-sm btn-primary"
+                        @click.prevent="goToNextPage"
+                        :disabled="isLastPage">&rsaquo;</button>
+                <button class="btn btn-sm btn-primary"
+                        @click.prevent="goToLastPage"
+                        :disabled="isLastPage">&raquo;</button>
+              </li>
+            </ul>
+          </nav>
+        </div>
       </span>
       <span class="normalcontenttext" style="width: 100%;"
-            v-if="isActiveRoute('/Examples')">
+            v-else-if="!isActiveRoute('/Examples') || (pagination && pagination.pageCount <= 1 && titles.length > 0 && !isLoading)">
-
+        <!--
-      </span>
+          显示“查看更多案例”按钮的条件：
-      <span class="normalcontenttext" style="width: 100%;" v-else>
+          1. 当前不在 /Examples 路径下。
+          2. 或者，当前在 /Examples 路径下，但只有一页数据（pagination.pageCount <= 1），且有数据（titles.length > 0），且不在加载中。
+        -->
         <button type="button" class="btn btn-primary"
                 @click="toExamples" style="width: 100%;">
-          查看更多
+          查看更多案例
         </button>
       </span>
     </div>
@@ -104,4 +227,25 @@ export default defineComponent({
 <style scoped lang="scss">
 @import "../publicstyle.scss";
 
+.pagination .form-control-sm {
+  height: calc(1.5em + .5rem + 2px);
+  padding: .25rem .5rem;
+  font-size: .875rem;
+}
+.pagination .btn-sm {
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  height: calc(1.5em + .5rem + 2px); /* 确保按钮高度与输入框一致 */
+  display: inline-flex; /* 用于帮助垂直居中符号 */
+  align-items: center; /* 用于帮助垂直居中符号 */
+  justify-content: center; /* 用于帮助水平居中符号 */
+}
+
+.pagination .page-item button.btn {
+  border-radius: .2rem; /* Bootstrap 默认的 .btn 圆角 */
+}
+
+.btn{
+  margin-right: 1px;
+}
 </style>

src/main.js

@@ -12,7 +12,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
 const app = createApp(App)
-axios.defaults.baseURL = 'https://cms2.yangprivate.site'
+axios.defaults.baseURL = 'https://cms.kaldorei.site'
 // 全局挂载 axios，所有组件都可以 this.$axios 访问
 app.config.globalProperties.$axios = axios