Vue+DRF搭建博客之前端篇（五）

一、任务

1. 将新建文章和编辑文章区分开
2. 为v-md-editor添加图片上传的功能
3. 添加编辑博客大页面

二、将新建文章和编辑文章区分开

1. 修改路由配置

const routes = [
  ...
  {
    path: '/blog',
    component: Blog,
    children: [
      ...
      {path: 'article_edit', component: BlogEditorPage},
      {path: 'article_edit/:article_id', component: BlogEditorPage},
    ]
  },
]

通过url中/blog/article_edit/后有无article_id参数来区分是编辑已有博客还是新建博客

2.在router-view前包一层keep-alive

<!--Blog.vue-->
<template>
  <div>
    <h1>博客页</h1>
    <keep-alive> 
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

3.在BlogEditorPage activated时初始化各个显示的参数

如果url中有article_id参数则视为修改已有文章，没有则视为新建文章：

activated() {
  console.log("activated");
  this.initEditorData();
},
methods: {
  ...
  initEditorData(){
    // 如果是已有文章进行编辑
    if (this.$route.params.article_id !== undefined){
      this.hasArticle = true;
      this.currentArticleId = this.$route.params.article_id;
      blogRequest.getArticle(this.currentArticleId)
      .then(res=>{
        console.log(res)
        this.formData.title = res['article_title'];
        this.formData.abstract = res['article_abstract']
        this.formData.sortTagIds=[]
        for(let each of res['article_tags']){
          this.formData.sortTagIds.push(each.id)
        }
        this.formData.content = res['article_content']
      })
    }
    else{
      this.hasArticle = false;
      this.clearEditor();
      console.log("null")
    }
    this.initSortTags();
  },
  initSortTags(){
    blogRequest.getSortTags().then(res=>{
      this.existingTags = res;
    })
  },
  clearEditor(){
    this.formData.content = "";
    this.formData.contentHtml = "";
    this.formData.abstract = "";
    this.formData.title = "";
    this.formData.sortTagIds = [];
  },
}

4.设置保存和上传文章

onSubmit(){
  //已有文章，进行编辑并保存
  if (this.hasArticle){
    blogRequest.putArticle(this.currentArticleId,this.formData.title,this.formData.abstract, this.formData.content)
    .then(res=>{
      console.log(res)
      blogRequest.articleChangeTags(res['id'], this.formData.sortTagIds)
          .then(res=>{
            console.log("add tag res:", res);
            alert("文章保存成功");
          })
    })
  }
  //新建文章
  else {
    blogRequest.postArticles(this.formData.title, this.formData.abstract, this.formData.content)
      .then(res => {
        console.log(res)
        blogRequest.articleChangeTags(res['id'], this.formData.sortTagIds)
          .then(res=>{
            console.log("add tag res:", res);
            this.$router.push('/article_edit/'+res['id']+'/');
            alert("文章上传成功");
          })
      });
  }
},

这样就完全区分开了两种情况

效果：
新建博客

编辑博客

三、为v-md-editor添加图片上传的功能

后端已写好接口：

url	功能
/file/upload	上传文件

接受的数据格式

{
    file: 文件
    remark: "附带信息"
}

按照v-md-editor进行参数设置：

...
<v-md-editor
    v-model="formData.content"
    height="800px"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"></v-md-editor>
...

// 图片上传相关
handleUploadImage(event, insertImage, files){
  let forms = new FormData()
  forms.append('file',files[0]);
  forms.append('remark', "none");
  blogRequest.postFiles(forms)
  .then(res=>{
    console.log(res);
    // 此处只做示例
    insertImage({
      url:
          res['file'],
      desc: '请输入描述',
      width: 'auto',
      height: 'auto',
    });
  });
},

实现效果：

四、添加编辑博客大页面

由于我们的BlogEditorPage只是一个vue组件，因而非常容易地就可以脱离原来的居中显示放到大页面（满屏）中去。

路由设置

const routes = [
  ...
  {path: '/article_edit', component: BlogEditorPage},
  {path: '/article_edit/:article_id', component: BlogEditorPage},
]

为SideBar添加tab

data() {
  return {
    sideBarData: [
      {
        moduleName: "所有博客",
        path: "/blog/articles"
      },
      {
        moduleName: "写博客",
        path: "/blog/article_edit"
      },
      {
        moduleName: "大页面编辑文章", <--添加
        path: "/article_edit"
      }
    ]
  }
},

效果：
新建文章

编辑文章

此章结束。

上一步：Vue+DRF搭建博客之后端篇（三）
下一步：未完待续