Vue博客搭建（9）：搭建一个创作中心

在之前的文章中，我们完成了注册与登录功能。在这一篇中，我们将开始创建一个创作中心，也就是写文章功能。一个博客需要什么？

首先，我们需要一个地方来写文章。这可以用一个文本编辑器来实现，比如记事本或Sublime Text。但是，为了让我们的博客更专业，我们可以使用一个专门的博客编辑器，比如WordPress或Ghost。

其次，我们需要一个地方来存储我们的文章。这可以用一个文件系统来实现，比如本地硬盘或云存储。但是，为了让我们的博客更方便管理，我们可以使用一个数据库，比如MySQL或MongoDB。

最后，我们需要一个地方来展示我们的文章。这可以用一个网站来实现，比如使用HTML、CSS和JavaScript编写的静态网站，也可以使用WordPress或Ghost等动态网站。

有了这些之后，我们就可以开始搭建我们的创作中心了。

首先，我们需要创建一个classes文件夹，放上我们需要的所有类。然后在其中创建一个article.js文件，用于定义文章的类：

class Article {
  constructor(title, content, author) {
    this.title = title;
    this.content = content;
    this.author = author;
  }
}

接下来，我们需要创建一个articles.js文件，用于管理文章的列表：

class Articles {
  constructor() {
    this.articles = [];
  }

  addArticle(article) {
    this.articles.push(article);
  }

  getArticles() {
    return this.articles;
  }
}

然后，我们需要创建一个editor.js文件，用于创建文章编辑器：

class Editor {
  constructor(article) {
    this.article = article;
  }

  setTitle(title) {
    this.article.title = title;
  }

  setContent(content) {
    this.article.content = content;
  }

  save() {
    // 保存文章到数据库
  }
}

最后，我们需要创建一个创作中心组件，用于展示文章编辑器和文章列表：

<template>
  <div>
    <editor :article="article"></editor>
    <articles :articles="articles"></articles>
  </div>
</template>

<script>
import Editor from './editor.js';
import Articles from './articles.js';
import { mapState } from 'vuex';

export default {
  components: {
    Editor,
    Articles
  },

  data() {
    return {
      article: new Article('', '', ''),
      articles: new Articles()
    };
  },

  computed: {
    ...mapState(['articles'])
  },

  methods: {
    addArticle() {
      this.articles.addArticle(this.article);
      this.article = new Article('', '', '');
    },

    saveArticle() {
      this.article.save();
    }
  }
};
</script>

至此，我们就搭建好了一个博客的创作中心。我们可以使用这个创作中心来写文章，并把文章发布到我们的博客上。