12. 开发论坛帖子展示功能

150 字约 1 分钟读完220 次阅读更新于 2026/5/3

https://www.yuque.com/xiaqing-en2ii/skflxg/hzi02h8qfizne3yv

GlobalArticle.vue

<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-input @keyup.enter="load" clearable placeholder="请输入您想搜索的内容" v-model="data.title" style="height: 40px; width: 300px"></el-input>
      <el-button type="primary" style="height: 40px; margin-left: 5px" @click="load">搜索</el-button>
    </div>

    <div>
      <el-row :gutter="10">
       <el-col :span="12" v-for="item in data.articleList" :key="item.id" style="margin-bottom: 10px">
         <div class="card" style="display: flex; gap: 10px; cursor: pointer" @click="router.push('/manager/articleDetail?id=' + item.id)">
           <img :src="item.img" alt="" style="display: block; width: 130px; height: 100px; border-radius: 5px">
           <div>
             <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px">{{ item.title }}</div>
             <div style="color: #666; font-size: 13px; margin-bottom: 10px">{{ item.description }}</div>
             <div style="font-size: 14px; color: #666">发布人：{{ item.userName }}
              <span style="margin-left: 20px">发布时间：{{ item.time }}</span>
             </div>
           </div>
         </div>
       </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-pagination @current-change="load" layout="total, prev, pager, next" v-model:page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import router from "@/router";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  articleList: [],
  pageNum: 1,
  pageSize: 8,
  total: 0,
  title: null
})

// 分页查询
const load = () => {
  request.get('/article/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.title,
      status: '通过'
    }
  }).then(res => {
    data.articleList = res.data?.list
    data.total = res.data?.total
  })
}
load()
</script>

ArticleDetail.vue

<template>
  <div class="card" style="width: 60%; margin:  0 auto; padding: 50px; position: relative">
    <el-button @click="router.back()" style="position: absolute; top: 10px; left: 10px">返回论坛列表</el-button>
    <div style="font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 15px">{{ data.article.title }}</div>
    <div style="font-size: 14px; color: #666; text-align: center; margin-bottom: 30px">发布人：{{ data.article.userName }}   <span style="margin-left: 20px">发布时间：{{ data.article.time }}</span></div>
    <div v-html="data.article.content"></div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import router from "@/router";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  id: router.currentRoute.value.query.id,
  article: {}
})

request.get('/article/selectById/' + data.id).then(res => {
  data.article = res.data
})
</script>