⭐ 作者简介：码上言
⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程
项目部署视频
https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b
文章目录
前言
时隔三四个月了没更新了，差一点烂尾了，对不住各位小伙伴了现在才更新，这也是我们这个教程的最后一篇了，接下来可能还会更新一下项目的上线功能，大概会用一到两篇的文章写完，可能需要服务器，大家如果有条件的话还是要去搞一台自己的服务器，模拟真实的线上环境才能更好的学习，可以去拼夕夕买或者百度云也可以都挺便宜，四五十块钱就可以了，还是希望大家用真实的环境来学习。
最近我打算写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: "", author: "", 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>
