当前位置：首页 > VUE

用vue实现新闻更新

2026-02-21 01:26:32VUE

使用Vue实现新闻更新功能

安装Vue及相关依赖

确保已安装Node.js和npm/yarn，通过以下命令创建Vue项目：

vue create news-app
cd news-app
npm install axios vue-router

创建新闻列表组件

在src/components下创建NewsList.vue文件，用于展示新闻列表：

<template>
  <div>
    <h3>新闻列表</h3>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }} - {{ news.date }}
        <button @click="editNews(news)">编辑</button>
        <button @click="deleteNews(news.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  methods: {
    fetchNews() {
      // 这里替换为实际的API调用
      this.newsList = [
        { id: 1, title: '新闻标题1', content: '内容1', date: '2023-01-01' },
        { id: 2, title: '新闻标题2', content: '内容2', date: '2023-01-02' }
      ]
    },
    editNews(news) {
      this.$router.push(`/edit/${news.id}`)
    },
    deleteNews(id) {
      // 实现删除逻辑
      this.newsList = this.newsList.filter(news => news.id !== id)
    }
  },
  created() {
    this.fetchNews()
  }
}
</script>

创建新闻编辑组件

在src/components下创建NewsEdit.vue文件：

<template>
  <div>
    <h3>编辑新闻</h3>
    <form @submit.prevent="saveNews">
      <input v-model="news.title" placeholder="标题" required>
      <textarea v-model="news.content" placeholder="内容" required></textarea>
      <input type="date" v-model="news.date" required>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: {
        id: null,
        title: '',
        content: '',
        date: ''
      }
    }
  },
  methods: {
    fetchNews(id) {
      // 根据ID获取新闻详情
      this.news = {
        id: id,
        title: `新闻标题${id}`,
        content: `新闻内容${id}`,
        date: '2023-01-01'
      }
    },
    saveNews() {
      // 实现保存逻辑
      this.$router.push('/')
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) this.fetchNews(id)
  }
}
</script>

配置路由

在src/router/index.js中配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import NewsList from '../components/NewsList.vue'
import NewsEdit from '../components/NewsEdit.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: NewsList },
    { path: '/edit/:id', component: NewsEdit },
    { path: '/add', component: NewsEdit }
  ]
})

集成到主应用

修改src/App.vue文件：

<template>
  <div id="app">
    <router-link to="/">新闻列表</router-link> |
    <router-link to="/add">添加新闻</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

实现API调用

在实际应用中，应该使用axios与后端API交互。在src目录下创建api/news.js：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://your-api-endpoint.com/api'
})

export default {
  getNews() {
    return api.get('/news')
  },
  getNewsById(id) {
    return api.get(`/news/${id}`)
  },
  createNews(news) {
    return api.post('/news', news)
  },
  updateNews(id, news) {
    return api.put(`/news/${id}`, news)
  },
  deleteNews(id) {
    return api.delete(`/news/${id}`)
  }
}