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

一、任务

1. 完成博客编辑页的搭建
2. 解决跨域问题（后端Django解决）
3. 网络请求库的封装以及文章业务的封装
4. 与后端完成交互，将文章保存保存到数据库中

二、博客编辑页的搭建

主要使用ElementUI中的模板表单中的代码，修修改改即可完成：

<template>
  <h2>文章编辑</h2>
  <el-form ref="form" label-width="80px">
    <el-form-item label="文章标题">
      <el-input placeholder="请输入标题" v-model="formData.title"></el-input>
    </el-form-item>
    <el-form-item label="文章摘要">
      <el-input type="textarea" v-model="formData.abstract" placeholder="请输入摘要"></el-input>
    </el-form-item>
  </el-form>
  <v-md-editor @change="editorChange" height="700px"></v-md-editor>
  <el-button type="primary" @click="onSubmit">保存提交</el-button>
  <el-button type="danger" @click="onSubmit">清除数据</el-button>
</template>

<script>
export default {
  name: "BlogEditorPage",
  components:{
  },
  data(){
    return {
      formData: {
        title: "",
        abstract:"",
        contentHtml: ""
      }
    }
  },
  methods: {
    editorChange(text, html){
      this.formData.contentHtml = html;
    },
    onSubmit(){
      console.log("提交");
    }
  }
}
</script>

效果：

三、解决跨域问题

由于我的后端是使用Django搭建的，可以插入两个中间件即可解决跨域
后端Django先下载 django-cors-headers：

pip install django-cors-headers

settings.py添加app：

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

添加中间件：

MIDDLEWARE = [
	...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

最后再添加一句：

MIDDLEWARE = [
    ...
]

CORS_ORIGIN_ALLOW_ALL = True <---添加

这样跨域问题就完全解决了。

四、引入第三方ajax库axios并对其进行封装

下载并引入axios

下载：

npm install axios --save

引入：
先在network文件夹中新建request.js(模块化的思想）
写入：（主要是对拦截器进行了一层的封装，虽然现在还用不到）

import axios from "axios";

export function request(config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  // 2.axios的拦截器
  // 2.1请求拦截
  instance.interceptors.request.use(config=>{
    // console.log(config)

    return config
  }, error => {
    console.log(error)
  })

  //2.2响应拦截
  instance.interceptors.response.use(res =>{
    // console.log(res)
    return res.data
  }, error => {
    console.log(error)
  })

  // 3.发送真正的网络请求
  return instance(config);
}

再新建blog.js文件，即为博客编辑与保存提供相应的接口

当前后端已经写好的接口：
文章接口

方式	url	功能
get	/blog/articles/	提供所有文章记录
post	/blog/articles/	新增一篇文章
get	/blog/articles/<pk>/	提供指定id的文章
put	/blog/articles/<pk>/	修改指定id的文章
delete	/blog/articles/<pk>/	删除指定id的文章
post	/blog/articles/<pk>/article_op_tag/	* 为指定文章添加一个标签
delete	/blog/articles/<pk>/article_op_tag/	* 为指定文章删除一个标签

分类标签接口

方式	url	功能
get	/blog/article_tags/	提供所有标签记录
post	/blog/article_tags/	新增一个标签
get	/blog/article_tags/<pk>/	提供指定id的标签
put	/blog/article_tags/<pk>/	修改指定id的标签
delete	/blog/article_tags/<pk>/	删除指定id的标签

则我们按照接口为前端也封装一层接口方便调用即可。

// /network/blog.js
import {request} from "@/network/request";
import axios from "axios";


// 获取全部博客文章
export function getArticles(){
  return axios.get('/blog/articles/')
}

// 新增一篇文章
export function postArticles(title, abstract, contentHtml){
  return request({
    method: "post",
    url: '/blog/articles/',
    data: {
      article_title: title,
      article_abstract: abstract,
      article_content: contentHtml
    }
  })
}

// 根据id获取单篇文章
export function getArticle(id){
  return request({
    url: '/blog/articles/'+id+'/'
  })
}

export function putArticle(id, title, abstract, contentHtml){
  return request({
    method: "put",
    url: '/blog/articles/'+id+'/',
    data: {
      article_title: title,
      article_abstract: abstract,
      article_content: contentHtml
    }
  })
}

export function deleteArticle(id){
  return request({
    method: "delete",
    url: '/blog/articles/'+id+'/'
  })
}
...后面类似

五、调用接口与后端进行交互

由于之前学习vue搭建项目都是使用的vue2.x，而这次本来想体验一下新鲜技术使用了vue3.x，结果踩坑到破防了，有好些莫名其妙的改动，实在是受不了了，于是只能将项目移植到新建的vue2.x中（好在移植的过程并不困难，就是安装第三方包如elementUI之类的时候需要注意一下vue的版本以及不同版本间的差距即可）。

移植后，先为文章编辑页添加文章类别下拉菜单，在组件挂载的时候先使用网络请求将数据请求回来：

mounted() {
  blogRequest.getSortTags().then(res=>{
    this.existingTags = res
  })
},

渲染上去：

...
<el-form-item label="文章分类">
  <el-select
      v-model="formData.sortTagIds"
      multiple
      filterable
      allow-create
      default-first-option
      placeholder="请选择文章分类">
    <el-option v-for="(tag, index) in existingTags" :key="tag.id" :label="tag.tag_name" :value="tag.id">
    </el-option>
  </el-select>
</el-form-item>
...

效果：

文章上传

分别先后上传文章的接口和添加标签的接口

onSubmit(){
  blogRequest.postArticles(this.formData.title, this.formData.abstract, this.formData.contentHtml)
    .then(res => {
      console.log(res)
      blogRequest.articleAddTags(res['id'], this.formData.sortTagIds)
        .then(res=>{
          console.log("add tag res:", res)
        })
    })
},

这样即完成了基本的文章上传。

上一步：Vue+DRF搭建博客之后端篇（二）
下一步：Vue+DRF搭建博客之后端篇（三）