cms api

jeecgboot-vue3-master/src/api/demo/mainHome.ts

@@ -0,0 +1,36 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  DEMO_NAV_LIST = '/cms/front/getColumnList',
+  DEMO_ARTICLE_LIST = 'cms/front/getArticleListByColumn'
+}
+
+/**
+ * @description: 获取导航
+ */
+
+export const demoNavListApi = () =>
+  defHttp.get({
+    url: Api.DEMO_NAV_LIST,
+  });
+
+  /**
+   * 获取文章列表
+   * @returns 
+   */
+export const demoArticleListApi = (params:any) =>
+  defHttp.get({
+    url: Api.DEMO_ARTICLE_LIST,
+    params
+  });
+  /**
+   * 获取文章
+   * @returns 
+   */
+export const demoArticleApi = (id:string) =>
+  defHttp.get({
+    url: Api.DEMO_ARTICLE_LIST,
+    params:{ id }
+  });
+
+

jeecgboot-vue3-master/src/router/routes/mainOut.ts

@@ -29,7 +29,7 @@ export const mainOutRoutes: AppRouteModule[] = [
     redirect: '/main-home/HomePage',
     children: [
       {
-        path: 'HomePage',
+        path: '/main-home/HomePage',
         name: 'HomePage',
         component: () => import('/@/views/demo/main-home/components/homePage/index.vue'),
         meta: {
@@ -38,17 +38,17 @@ export const mainOutRoutes: AppRouteModule[] = [
         },
       },
       {
-        path: 'MatchEvaluation',
+        path: '/main-home/MatchEvaluation',
         name: 'MatchEvaluation',
         component: () => import('/@/views/demo/main-home/components/matchEvaluation/index.vue'),
         meta: {
           title: 'MatchEvaluation',
           ignoreAuth: true,
         },
-        redirect: 'MatchEvaluation/MCh',
+        redirect: '/main-home/MatchEvaluation/MCh',
         children: [
           {
-            path: 'MCh',
+            path: '/main-home/MatchEvaluation/MCh',
             name: 'MCh',
             component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/MCh.vue'),
             meta: {
@@ -57,7 +57,7 @@ export const mainOutRoutes: AppRouteModule[] = [
             },
           },
           {
-            path: 'LesserCh',
+            path: '/main-home/MatchEvaluation/LesserCh/:id',
             name: 'LesserCh',
             component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/LesserCh.vue'),
             meta: {

jeecgboot-vue3-master/src/views/demo/main-home/components/matchEvaluation/components/LesserCh.vue

@@ -23,8 +23,15 @@
 </template>
 
 <script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { demoArticleApi } from '/@/api/demo/mainHome';
+const route =useRoute()
+demoArticleApi(route.params.id as string).then(res => {
+    console.log("🚀 ~ demoArticleApi ~ res:", res)
+})
 </script>
 
+
 <style lang="less" scoped>
 .main-content {
     width: 1345px;

jeecgboot-vue3-master/src/views/demo/main-home/components/matchEvaluation/components/MCh.vue

@@ -12,11 +12,14 @@
     </div>
     <div class="main-content">
         <div class="left">
-            <div class="card-box-item" v-for="i in 8" :key="i" @click="$router.push('/main-home/MatchEvaluation/LesserCh')">
+            <div class="card-box-item" v-for="o in data" :key="o.columnId"
+                @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
                 <div class="card">
-                    <div class="card_left"></div>
+                    <div class="card_left">
+                       
+                    </div>
                     <div class="card_right">
-                        <p class="tit">文本文本文本文本文本文本</p>
+                        <p class="tit">{{ o.title }}</p>
                         <p class="text">
                             <span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</span>
                         </p>
@@ -26,8 +29,9 @@
             <div class="left_footer">
                 <div class="pagination-box">
                     <a-pagination v-model:current="current" v-model:page-size="pageSize"
-                        :page-size-options="['10', '20', '30', '40', '50']" :total="85"
+                        :page-size-options="['5','10', '20', '30', '40', '50']" :total="total"
-                        :show-total="total => `共 ${total} 项数据`" show-quick-jumper show-size-changer />
+                        :show-total="total => `共 ${total} 项数据`" @change="pagChange" show-quick-jumper
+                        show-size-changer />
                 </div>
             </div>
         </div>
@@ -57,11 +61,38 @@
 
 <script setup lang="ts">
 import { Pagination as APagination, InputSearch as AInputSearch } from 'ant-design-vue';
-import { ref } from 'vue';
+import { ref, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { demoArticleListApi } from '/@/api/demo/mainHome';
+const route = useRoute()
+const data = reactive<any[]>([])
+
+// 获取数据
+function getData(columnId: string) {
+    demoArticleListApi({ columnId: columnId, pageNo: current.value, pageSize: pageSize.value }).then(res => {
+        data.length = 0
+        data.push(...res.records as any[])
+        total.value = res.total
+    })
+}
 
 // 分页
 const current = ref(1);
-const pageSize = ref(1);
+const pageSize = ref(10);
+const total = ref(0)
+function pagChange(page: number, pageSizeP: number) {
+    current.value = page
+    pageSize.value = pageSizeP
+    getData(route.query.id as string)
+}
+
+watch(() => route.params.columnId, (newVal: string) => {
+    if (route.query.id == '1') return
+    getData(newVal)
+}, {
+    immediate: true
+})
+
 
 // 搜索
 const value = ref<string>('');
@@ -246,7 +277,8 @@ const onSearch = (searchValue: string) => {
                     position: relative;
                     z-index: 2;
                     background-color: #fff;
-                    &.black{
+
+                    &.black {
                         color: black;
                     }
 

jeecgboot-vue3-master/src/views/demo/main-home/index.vue

@@ -8,10 +8,9 @@
                 </div>
                 <div class="nav-content">
                     <div class="nav-box">
-                        <div class="nav-item" v-for="item in navItems"
+                        <div class="nav-item" v-for="item, i in navItems" :class="{ active: acI === i }"
-                            :class="{ active: $route.path.includes(item.path) }" @click="$router.push(item.path)"
+                            @click="hanRou(item, i)" :key="item.path">
-                            :key="item.path">
+                            {{ item.name }}
-                            {{ item.title }}
                         </div>
                     </div>
                     <div class="login">
@@ -98,28 +97,43 @@
 </template>
 
 <script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { demoNavListApi } from '/@/api/demo/mainHome';
+import { useRouter } from 'vue-router';
+const router = useRouter()
 type item = {
-    title: string,
+    id: string
+    name: string
     path: string
 }
-const navItems: item[] = [
+
+const navItems: item[] = reactive([
     {
-        title: '首页',
+        id: '1',
+        name: '首页',
         path: '/main-home/HomePage'
     },
-    {
+])
-        title: '竞赛评价',
+
+demoNavListApi().then(res => {
+    if (typeof res[Symbol.iterator] !== 'function') return
+    navItems.length = 1
+    res.forEach((o: any) => {
+        navItems.push({
+            id: o.id,
+            name: o.name,
             path: '/main-home/MatchEvaluation'
-    },
+        })
-    {
+    });
-        title: '竞赛导航',
+})
-        path: '/main-home/...'
+
-    },
+const acI = ref(0)
-    {
+function hanRou(item: item, i: number) {
-        title: '研究成果',
+    if (acI.value === i) return
-        path: '/main-home/...'
+    router.push(item.path+'?id='+item.id)
-    },
+    acI.value = i
-]
+}
+
 </script>