feat: 添加文章页面

Yi.BBS.Vue3/src/views/Article.vue

@@ -19,7 +19,13 @@
                                 </template>
                             </InfoCard>
                         </el-col>
-
+                        <el-col :span="24">
+                            <InfoCard :items=items header="推荐好友" text="更多">
+                                <template #item="temp">
+                                    <AvatarInfo />
+                                </template>
+                            </InfoCard>
+                        </el-col>
                     </el-col>
 
                 </el-row>
@@ -33,9 +39,10 @@
                         <AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
 
                         <el-divider />
-                        <h2>面试题挑战</h2>
-                        文章详情
-
+                        
+                        <h2>{{discuss.title}}</h2>
+                       <!-- {{discuss.content}} -->
+                       <ArticleContentInfo/>
 
                         <el-divider class="tab-divider" />
 
@@ -53,7 +60,7 @@
 
                     </el-col>
 
-                    <el-col :span="24">
+                    <el-col :span="24" class="comment">
                         文章评论
                     </el-col>
                 </el-row>
@@ -83,8 +90,7 @@
                                 <div>
                                     <ul class="art-info-ul">
                                         <li v-for="i in 6">
-                                            <el-button style="width: 100%;
-                                              justify-content: left" :key="你好" type="primary" text>{{ i }}：第一小结</el-button>
+                                            <el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
                                         </li>
                                     </ul>
                                 </div>
@@ -111,15 +117,21 @@
     </div>
 </template>
 <script setup>
-import { h, ref } from 'vue'
+import { h, ref ,onMounted } from 'vue'
 import AvatarInfo from '@/components/AvatarInfo.vue'
-import InfoCard from '../components/InfoCard.vue';
+import InfoCard from '@/components/InfoCard.vue';
+import ArticleContentInfo from  '@/components/ArticleContentInfo.vue'
+import { useRoute } from 'vue-router'
+
+import {get as discussGet} from '@/apis/discussApi.js';
+
+//数据定义
+const route=useRoute()
 const spacer = h(ElDivider, { direction: 'vertical' })
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
 const handleNodeClick = (data) => {
     console.log(data)
 }
-
 const data = [
     {
         label: 'HTML',
@@ -189,9 +201,25 @@ const data = [
         label: 'Tcp/ip',
     }
 ]
+//主题内容
+const discuss=ref({});
 
+//主题初始化
+const loadDiscuss=async()=>{
+    discuss.value= await discussGet(route.params.discussId);
+}
+
+
+onMounted(async()=>{
+   await loadDiscuss();
+
+})
 </script>
 <style scoped >
+.comment
+{
+    height:40rem;
+}
 .art-info-left {
     margin-bottom: 1rem;
 }

Yi.BBS.Vue3/src/views/Discuss.vue

@@ -2,20 +2,20 @@
     <div style="width: 1200px;" class="body-div">
 <div class="header">
     <el-form :inline="true" >
-            <el-form-item label="标签：" >
-      <el-input          placeholder="请输入标签"
+            <el-form-item label="标题：" >
+      <el-input  v-model="query.title"        placeholder="请输入标题"
       ></el-input>
     </el-form-item>
       
-    <el-form-item label="内容：">
+    <el-form-item label="标签：">
         <el-input
-        placeholder="搜索当下分类下的内容"
+        placeholder="搜索当下分类下的标签"
 
       />
     </el-form-item>
     <div class="form-right">
             <el-button>重置</el-button>
-             <el-button type="primary">查询</el-button>
+             <el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
             
              <el-dropdown>
     <span class="el-dropdown-link">
@@ -47,31 +47,64 @@
     <el-tab-pane label="最热" name="third">   </el-tab-pane>
   </el-tabs>
 <div class="div-item" v-for="i in discussList" >
-  <DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
+  <DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
 </div>
+<div>
+    <el-pagination
+      v-model:current-page="query.pageNum"
+      v-model:page-size="query.pageSize"
+      :page-sizes="[10, 20, 30, 50]"
+      :background="true"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="async(val)=>{ await loadDiscussList();}"
+      @current-change="async(val)=>{ await loadDiscussList();}"
+    />
+  </div>
+
+<el-empty v-if="discussList.length==0" description="空空如也" />
     </div>
 </template>
+
+
 <script setup>
 import DisscussCard from '@/components/DisscussCard.vue'
-import {getListByPlateId} from '@/apis/discussApi.js'
-import { onMounted, ref } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-const router = useRouter()
+import {getList} from '@/apis/discussApi.js'
+import { onMounted, ref,reactive  } from 'vue'
+import { useRoute } from 'vue-router'
+
+//数据定义
 const route=useRoute()
 const activeName = ref('first')
-
 const discussList=ref([]);
+const total=ref(100)
+const query=reactive({
+  pageNum:1,
+  pageSize:10,
+  title:'',
+  plateId:''
+})
 
 const handleClick = (tab, event) => {
   console.log(tab, event)
 }
 
 onMounted(async()=>{
- const response= await getListByPlateId(route.params.plateId);
- discussList.value=response.items;
+ await loadDiscussList();
 })
+
+//加载discuss
+const loadDiscussList=async()=>{
+  query.plateId=route.params.plateId;
+  const response= await getList(query);
+ discussList.value=response.items;
+ total.value=Number( response.total);
+}
+
 </script>
 <style scoped>
+.el-pagination
+{margin: 2rem 0rem 2rem 0rem;justify-content: right;}
 .body-div{
 min-height: 1000px;
 }

Yi.BBS.Vue3/src/views/Index.vue

@@ -14,7 +14,7 @@
           </el-col>
 
         <el-col :span="24" v-for="i in discussList">
-<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
+<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
           
         </el-col>
       </el-row>