Django-Vue搭建个人博客：文章更新与删除

<!-- frontend/src/views/ArticleEdit.vue -->

<template>
  <BlogHeader/>
  <div id="article-create">
    <h3>更新文章</h3>
    <form>
      <div class="form-elem">
        <span>标题：</span>
        <input v-model="title" type="text" placeholder="输入标题">
      </div>

      <div class="form-elem">
        <span>分类：</span>
        <span
              v-for="category in categories"
              :key="category.id"
              >
          <!--样式也可以通过 :style 绑定-->
          <button
                  class="category-btn"
                  :style="categoryStyle(category)"
                  @click.prevent="chooseCategory(category)"
                  >
            {{category.title}}
          </button>
        </span>
      </div>

      <div class="form-elem">
        <span>标签：</span>
        <input v-model="tags" type="text" placeholder="输入标签，用逗号分隔">
      </div>

      <div class="form-elem">
        <span>正文：</span>
        <textarea v-model="body" placeholder="输入正文" rows="20" cols="80"></textarea>
      </div>

      <div class="form-elem">
        <button v-on:click.prevent="submit">提交</button>
      </div>
      <div class="form-elem">
        <button v-on:click.prevent="deleteArticle" style="background-color: darkred">删除</button>
      </div>
    </form>

  </div>
  <BlogFooter/>
</template>

<script>
  import BlogHeader from '@/components/BlogHeader.vue'
  import BlogFooter from '@/components/BlogFooter.vue'
  import axios from 'axios';
  import authorization from '@/utils/authorization';

  export default {
    name: 'ArticleEdit',
    components: {BlogHeader, BlogFooter},
    data: function () {
      return {
        title: '',
        body: '',

        // 所有分类
        categories: [],
        // 选定的分类
        selectedCategory: null,
        // 标签
        tags: '',

        // Article id
        articleID: null,
      }
    },
    mounted() {
      // 页面初始化时获取所有分类
      axios
        .get('/api/category/')
        .then(response => this.categories = response.data);

      // 与前面章节说的一样
      // 如果你不希望非管理员用户也能获取原始 Markdown 数据
      // 那么必须在后端进行鉴权
      // 根据用户身份选用不同的序列化器
      const that = this;
      axios
        .get('/api/article/' + that.$route.params.id + '/')
        .then(function (response) {
          const data = response.data;
          that.title = data.title;
          that.body = data.body;
          that.selectedCategory = data.category;
          that.tags = data.tags.join(',');
          that.articleID = data.id;
        })
    },
    methods: {
      // 根据分类是否被选中，按钮的颜色发生变化
      categoryStyle(category) {
        if (this.selectedCategory !== null && category.id === this.selectedCategory.id) {
          return {
            backgroundColor: 'black',
          }
        }
        return {
          backgroundColor: 'lightgrey',
          color: 'black',
        }
      },
      // 选取分类
      chooseCategory(category) {
        // 如果点击已选取的分类，则将 selectedCategory 置空
        if (this.selectedCategory !== null && this.selectedCategory.id === category.id) {
          this.selectedCategory = null
        }
        else {
          this.selectedCategory = category;
        }
      },
      // 点击提交按钮
      // 大部分代码与发表文章相同
      // 有少量改动
      submit() {
        const that = this;
        authorization()
          .then(function (response) {
            if (response[0]) {
              let data = {
                title: that.title,
                body: that.body,
              };

              data.category_id = that.selectedCategory ? that.selectedCategory.id : null;

              data.tags = that.tags
                .split(/[,，]/)
                .map(x => x.trim())
                .filter(x => x.charAt(0) !== '');

              const token = localStorage.getItem('access.myblog');
              axios
                .put('/api/article/' + that.articleID + '/',
                     data,
                     {
                headers: {Authorization: 'Bearer ' + token}
              })
                .then(function (response) {
                that.$router.push({name: 'ArticleDetail', params: {id: response.data.id}});
              })
            }
            else {
              alert('令牌过期，请重新登录。')
            }
          }
        )
      },
      deleteArticle() {
        const that = this;
        const token = localStorage.getItem('access.myblog');
        authorization()
          .then(function (response) {
            if (response[0]) {
              axios
                .delete('/api/article/' + that.articleID + '/',
                  {
                        headers: {Authorization: 'Bearer ' + token}
                    })
                .then(() => that.$router.push({name: 'Home'}))
            }
            else {
              alert('令牌过期，请重新登录。')
            }
          }
        )
      }
    }
  }
</script>

<style scoped>
  .category-btn {
    margin-right: 10px;
  }
  #article-create {
    text-align: center;
    font-size: large;
  }
  form {
    text-align: left;
    padding-left: 100px;
    padding-right: 10px;
  }
  .form-elem {
    padding: 10px;
  }
  input {
    height: 25px;
    padding-left: 10px;
    width: 50%;
  }
  button {
    height: 35px;
    cursor: pointer;
    border: none;
    outline: none;
    background: steelblue;
    color: whitesmoke;
    border-radius: 5px;
    width: 60px;
  }
</style>

// frontend/src/router/index.js

...
import ArticleEdit from "@/views/ArticleEdit.vue";

const routes = [
  ...
  {
    path: "/article/edit/:id",
    name: "ArticleEdit",
    component: ArticleEdit
  },
];
...

<!-- frontend/src/views/ArticleDetail.vue -->

<template>
  ...
  <p id="subtitle">
    ...
    <span v-if="isSuperuser">
      <router-link 
        :to="{ name: 'ArticleEdit', params: { id: article.id }}"
      >
        更新与删除
      </router-link>
    </span>
  </p>
  ...
</template>

<script>
  ...
  computed: {
    isSuperuser() {
      return localStorage.getItem('isSuperuser.myblog') === 'true'
    }
  }
  ...
</script>