持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

前言

时隔三四个月了没更新了，差一点烂尾了，对不住各位小伙伴了现在才更新，这也是我们这个教程的最后一篇了，接下来可能还会更新一下项目的上线功能，大概会用一到两篇的文章写完，可能需要服务器，大家如果有条件的话还是要去搞一台自己的服务器，模拟真实的线上环境才能更好的学习，可以去拼夕夕买或者百度云也可以都挺便宜，四五十块钱就可以了，还是希望大家用真实的环境来学习。

最近我打算写redis的学习，各位小伙伴有需要的话可以去我的Redis从入门到实战专栏查看，有什么好的意见可以评论区告诉我或者加我好友沟通，

1、添加文章的页面

首先我们还是按照之前分类或标签的操作来写页面，我们在前端项目中新建两个文件，一个是add.vue，一个是list.vue。我们先从添加页面入手。

添加文章的业务比较复杂一些，因为里面包含了标签和分类的功能查询和保存，还涉及到图片的保存，所以比较重要，里面的知识点也比较多，我尽量将讲述清楚，大家也多多思考，有不会的可以关注下面的微信号，加我好友来一起讨论学习。

我们接下来先来写添加文章，打开前端项目，然后我们在/src/views/articles下的add.vue编写。

还是和之前添加标签或分类的一样，使用的mavon-editor编辑。

1.1、基础页面编写

我们可以将分类的页面复制过来进行修改，或者自己来手动写一遍，建议自己写一遍，了解具体的编写思路。

<template>
    <el-card class="box-card">
    <!-- 设置文章管理 -->
    <div slot="header" class="clearfix">
      <span>添加文章</span>
    </div>

    <!-- 发布文章 -->
    <div class="article-title-container">
        <el-input size="medium"  v-model="article.title" placeholder="输入文章标题"/>
        <el-button type="warning" size="medium" @click="openDialog" style="margin-left:10px">保存草稿</el-button>
        <el-button type="danger" size="medium" @click="openDialog" style="margin-left:10px">发布文章</el-button>
    </div>
    <!-- 文章内容 -->
    <mavon-editor ref="md" v-model="article.content" style="height:calc(100vh - 260px)"/>

    <!-- 填写信息弹出框 -->
    <el-dialog :title="`发布文章：${article.title}`" :visible.sync="showDialog" width="30%">


      <el-form label-position="left" label-width="80px" :model="article" size="medium">
       
        <!-- 内容 -->  
      
      </el-form>

       <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">发布</el-button>
      </span>
    </el-dialog>


 </el-card>
</template>

<script>
import { addArticle, updateArticle, getArticleById } from '@/api/article'


export default {
  name: 'Addarticle',

  created() {
    
  },

   data() {
    return {
      showDialog: false,
     
      article: {
        id: "",
        title: "",
        categoryId: "",
        content: "",
        categoryName: null
      }
    }
  },

  methods: {

    assertNotEmpty(target, msg) {
      if (!target) {
        this.$message({
          message: msg,
          type: "warning",
        });
        return false;
      }
      return true;
    },

     // 打开文章信息填写框
    openDialog() {
      if (
        this.assertNotEmpty(this.article.title, "请填写文章标题") &&
        this.assertNotEmpty(this.article.content, "请填写文章内容")
      ) {
        this.showDialog = true;
      }
    },

    handleSubmit() {
        this.showDialog = true;
        var body = this.article;
    },
    
    handleCancel() {
      this.showDialog = false;
    },
  }
 
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.article-title-container {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

  .box-card {
    width: 98%;
    margin: 1%;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span {
    font-weight: 600;
  }

</style>

以上的代码没有什么好介绍的了，我们已经写了好几遍了，如果有报错看一下浏览器控制台有什么错误，自己修改一下就好了。

PS：如果左侧的导航栏没有显示这两个页面的话，你就去路由那边将这两个页面添加上即可。

以上基础的页面已经搭建好了，我们要去完成数据交互的部分。

2、添加api接口

先来添加一下后端的接口，打开/src/api文件，如果没有article.js文件则自己创建一个，然后我们打开文件，和之前的都一样，我们写一下接口。

import request from '@/utils/request'

export function articleList(query) {
    return request({
      url: '/article/list',
      method: 'post',
      data: query
    })
}

export function addArticle(data) {
  return request({
    url: '/article/create',
    method: 'post',
    data
  })
}

export function updateArticle(data) {
  return request({
    url: '/article/update',
    method: 'post',
    data
  })
}

export function deleteArticle(id) {
  return request({
    url: '/article/delete',
    method: 'post',
    params: { id }
  })
}

export function getArticleById(id){
  return request({
    url: '/article/info/' + id,
    method: 'get'
  })
}

最后的一个接口根据id查找文章我忘了当时给没给你们写了，如果你没有写的话，将文章拉到最后，我已经更新到了仓库，前后端的项目都已经是最新的代码了。