【vuejs】用vue写一个自己的博客管理系统（五）：文章管理

文章管理主要分为以下三个模块

• 新建文章
• 文章列表
• 分类管理

1. 新建文章

一篇文章，有标题，有作者，有内容，有时间。可能也会有介绍，有图片，有标签或者分类。

标题

文章标题和介绍都使用element中的input，其中还限制了字数。此时，长度加上maxlength和minlength分别代表的字符的最多和最少。show-word-limit则是显示当前字数多少的属性。

<el-input
  type="text"
  placeholder="输入标题"
  v-model="text"
  maxlength="50"
  show-word-limit
>

封面图

使用upload组件上传图片。

<el-upload class="avatar-uploader" action="http://127.0.0.1:3000/upload/imgs" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeAvatarUpload">
   <el-image v-if="imageUrl" :src="imageUrl" class="avatar" fit="contain"></el-image>
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

action后面跟的是自己上传图片的api
on-success指的是上传成功后的事件
before-upload指的是上传之前的事件，比如一些判断。

uploadSuccess(res, file) {
   
	console.log(res, file);
	//上传成功后，将返回过来的地址赋值给imgUrl
  	this.imageUrl = res.data;
},
beforeAvatarUpload(file) {
   
	  // const isJPG = file.type === 'image/jpeg';
	  //判断文件的大小
	  const isLt2M = file.size / 1024 / 1024 < 2;
	
	  // if (!isJPG) {
   
	  //   this.$message.error('上传头像图片只能是 JPG 格式!');
	  // }
	  if (