当前位置：首页 > VUE

vue框架实现资讯

2026-02-11 06:40:09VUE

Vue框架实现资讯功能的方法

创建Vue项目 使用Vue CLI或Vite初始化项目，安装必要依赖如vue-router、axios等。项目结构建议按功能模块划分，资讯相关功能可放在views/news目录下。

设计数据模型 资讯数据通常包含标题、内容、发布时间、作者等字段。可定义如下数据结构：

{
  id: Number,
  title: String,
  content: String,
  publishTime: String,
  author: String,
  coverImage: String
}

API接口对接 通过axios封装HTTP请求，与后端API交互：

vue框架实现资讯

// api/news.js
import axios from 'axios';

export const getNewsList = (params) => {
  return axios.get('/api/news', { params });
};

export const getNewsDetail = (id) => {
  return axios.get(`/api/news/${id}`);
};

资讯列表实现 使用v-for渲染资讯列表，结合分页组件：

<template>
  <div class="news-list">
    <div v-for="item in newsList" :key="item.id" class="news-item">
      <img :src="item.coverImage" />
      <h3>{{ item.title }}</h3>
      <p>{{ item.summary }}</p>
    </div>
    <pagination :total="total" @change="handlePageChange"/>
  </div>
</template>

<script>
import { getNewsList } from '@/api/news';

export default {
  data() {
    return {
      newsList: [],
      total: 0,
      queryParams: {
        page: 1,
        size: 10
      }
    };
  },
  mounted() {
    this.fetchNewsList();
  },
  methods: {
    async fetchNewsList() {
      const res = await getNewsList(this.queryParams);
      this.newsList = res.data.list;
      this.total = res.data.total;
    },
    handlePageChange(page) {
      this.queryParams.page = page;
      this.fetchNewsList();
    }
  }
};
</script>

资讯详情页 通过路由参数获取资讯ID，展示完整内容：

vue框架实现资讯

<template>
  <div class="news-detail">
    <h1>{{ newsDetail.title }}</h1>
    <div class="meta">
      <span>{{ newsDetail.author }}</span>
      <span>{{ newsDetail.publishTime }}</span>
    </div>
    <div class="content" v-html="newsDetail.content"></div>
  </div>
</template>

<script>
import { getNewsDetail } from '@/api/news';

export default {
  data() {
    return {
      newsDetail: {}
    };
  },
  async created() {
    const id = this.$route.params.id;
    const res = await getNewsDetail(id);
    this.newsDetail = res.data;
  }
};
</script>

路由配置 设置资讯相关路由，启用历史模式：

// router/index.js
const routes = [
  {
    path: '/news',
    component: () => import('@/views/news/List.vue')
  },
  {
    path: '/news/:id',
    component: () => import('@/views/news/Detail.vue')
  }
];

状态管理（可选） 对于复杂应用可使用Vuex/Pinia管理资讯状态：

// stores/news.js
export const useNewsStore = defineStore('news', {
  state: () => ({
    newsList: [],
    currentNews: null
  }),
  actions: {
    async fetchNewsList(params) {
      const res = await getNewsList(params);
      this.newsList = res.data.list;
    }
  }
});

优化与扩展