vue实现文章管理

实现文章管理的基本功能

使用Vue实现文章管理功能需要结合前端框架和后端API。以下是关键步骤和代码示例：

创建Vue组件管理文章列表

<template>
  <div>
    <h3>文章列表</h3>
    <table>
      <tr v-for="article in articles" :key="article.id">
        <td>{{ article.title }}</td>
        <td>
          <button @click="editArticle(article.id)">编辑</button>
          <button @click="deleteArticle(article.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    this.fetchArticles()
  },
  methods: {
    fetchArticles() {
      axios.get('/api/articles')
        .then(response => {
          this.articles = response.data
        })
    },
    deleteArticle(id) {
      axios.delete(`/api/articles/${id}`)
        .then(() => {
          this.fetchArticles()
        })
    }
  }
}
</script>

创建文章编辑表单组件

<template>
  <div>
    <h3>{{ editing ? '编辑文章' : '新建文章' }}</h3>
    <form @submit.prevent="submitForm">
      <input v-model="form.title" placeholder="标题">
      <textarea v-model="form.content" placeholder="内容"></textarea>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    article: Object,
    editing: Boolean
  },
  data() {
    return {
      form: {
        title: '',
        content: ''
      }
    }
  },
  watch: {
    article: {
      immediate: true,
      handler(val) {
        if (val) {
          this.form = { ...val }
        }
      }
    }
  },
  methods: {
    submitForm() {
      const method = this.editing ? 'put' : 'post'
      const url = this.editing ? `/api/articles/${this.form.id}` : '/api/articles'

      axios[method](url, this.form)
        .then(() => {
          this.$emit('saved')
          if (!this.editing) {
            this.form = { title: '', content: '' }
          }
        })
    }
  }
}
</script>

集成路由管理

在Vue Router中配置文章管理相关路由：

import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from './components/ArticleList'
import ArticleForm from './components/ArticleForm'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/articles',
      component: ArticleList
    },
    {
      path: '/articles/new',
      component: ArticleForm
    },
    {
      path: '/articles/:id/edit',
      component: ArticleForm,
      props: route => ({ editing: true, article: { id: route.params.id } })
    }
  ]
})

实现状态管理

对于复杂应用，可以使用Vuex管理文章状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    articles: []
  },
  mutations: {
    SET_ARTICLES(state, articles) {
      state.articles = articles
    },
    ADD_ARTICLE(state, article) {
      state.articles.push(article)
    },
    UPDATE_ARTICLE(state, updatedArticle) {
      const index = state.articles.findIndex(a => a.id === updatedArticle.id)
      if (index !== -1) {
        state.articles.splice(index, 1, updatedArticle)
      }
    },
    DELETE_ARTICLE(state, id) {
      state.articles = state.articles.filter(a => a.id !== id)
    }
  },
  actions: {
    async fetchArticles({ commit }) {
      const response = await axios.get('/api/articles')
      commit('SET_ARTICLES', response.data)
    },
    async createArticle({ commit }, article) {
      const response = await axios.post('/api/articles', article)
      commit('ADD_ARTICLE', response.data)
    },
    async updateArticle({ commit }, article) {
      const response = await axios.put(`/api/articles/${article.id}`, article)
      commit('UPDATE_ARTICLE', response.data)
    },
    async deleteArticle({ commit }, id) {
      await axios.delete(`/api/articles/${id}`)
      commit('DELETE_ARTICLE', id)
    }
  }
})

实现富文本编辑器集成

集成第三方富文本编辑器如Quill：

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

export default {
  props: {
    content: String
  },
  mounted() {
    this.quill = new Quill(this.$refs.editor, {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic'],
          ['link', 'blockquote'],
          [{ list: 'ordered' }, { list: 'bullet' }]
        ]
      }
    })

    if (this.content) {
      this.quill.root.innerHTML = this.content
    }

    this.quill.on('text-change', () => {
      this.$emit('update:content', this.quill.root.innerHTML)
    })
  }
}
</script>