当前位置：首页 > VUE

vue实现新闻浏览编辑

2026-02-22 05:28:53VUE

Vue 实现新闻浏览与编辑功能

项目结构搭建

使用 Vue CLI 创建项目，安装必要依赖：

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

新闻数据管理

通过 Vuex 集中管理新闻数据状态：

// store/index.js
export default new Vuex.Store({
  state: {
    newsList: []
  },
  mutations: {
    SET_NEWS(state, payload) {
      state.newsList = payload
    },
    UPDATE_NEWS(state, payload) {
      const index = state.newsList.findIndex(item => item.id === payload.id)
      if (index !== -1) {
        state.newsList.splice(index, 1, payload)
      }
    }
  },
  actions: {
    async fetchNews({ commit }) {
      const res = await axios.get('/api/news')
      commit('SET_NEWS', res.data)
    }
  }
})

新闻浏览页面实现

创建新闻列表组件：

<!-- NewsList.vue -->
<template>
  <div class="news-container">
    <div v-for="item in newsList" :key="item.id" class="news-item">
      <h3>{{ item.title }}</h3>
      <p>{{ item.summary }}</p>
      <router-link :to="`/news/${item.id}`">查看详情</router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['newsList'])
  },
  created() {
    this.$store.dispatch('fetchNews')
  }
}
</script>

新闻详情页实现

配置动态路由并创建详情组件：

// router.js
const routes = [
  {
    path: '/news/:id',
    component: () => import('./views/NewsDetail.vue'),
    props: true
  }
]

<!-- NewsDetail.vue -->
<template>
  <div v-if="newsItem">
    <h2>{{ newsItem.title }}</h2>
    <div v-html="newsItem.content"></div>
    <button @click="editNews">编辑</button>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    newsItem() {
      return this.$store.state.newsList.find(item => item.id === this.id)
    }
  },
  methods: {
    editNews() {
      this.$router.push(`/news/${this.id}/edit`)
    }
  }
}
</script>

新闻编辑功能实现

创建编辑组件：

<!-- NewsEdit.vue -->
<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.title" placeholder="标题">
    <textarea v-model="formData.content" placeholder="内容"></textarea>
    <button type="submit">保存</button>
  </form>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      formData: {
        title: '',
        content: ''
      }
    }
  },
  created() {
    if (this.id) {
      const news = this.$store.state.newsList.find(item => item.id === this.id)
      this.formData = { ...news }
    }
  },
  methods: {
    submitForm() {
      this.$store.commit('UPDATE_NEWS', {
        id: this.id,
        ...this.formData
      })
      this.$router.push('/news')
    }
  }
}
</script>

API 接口配置

配置模拟 API 请求：

// api/news.js
const mockNews = [
  { id: 1, title: '新闻标题1', content: '新闻内容1' },
  { id: 2, title: '新闻标题2', content: '新闻内容2' }
]

export default {
  getNews() {
    return new Promise(resolve => {
      setTimeout(() => resolve(mockNews), 500)
    })
  }
}

样式优化

添加基础样式增强用户体验：

/* 全局样式 */
.news-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.news-item {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 4px;
}

form {
  max-width: 600px;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
}