【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 (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isLt2M;
}
分类和标签
element有一个标签组件Tag，在新建标签的时候，input+autoComplete联合可以做出从远程获取当前已有的标签选择。
<label class="name">标签:label>
<div class="tagsBox">
<el-tag :key="tag" v-for="tag in tags" closable :disable-transitions="false" @close="handleClose(tag)">
{
{tag}}
el-tag>
<el-autocomplete class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="$event.target.blur" :fetch-suggestions="querySearch" :trigger-on-focus="false" @blur="getInputData" @select="handleSelect">
el-autocomplete>
<el-button v-else class="button-new-tag" size="small" @click="showInput">新建标签el-button>
div>
Tag标签组可以新增标签，也可以删除标签。
分类是使用最普通的下拉选择框。
<label class="name">分类:label>
<el-select v-model="cid" placeholder="请选择" @change="changeCat($event)">
<el-option v-for="item in options" :key="item.id" :label="item.cname" :value="item.id">
el-option>
el-select>
文章输入
文章输入部分，使用了mavon-editor插件。这是一个markdown插件，个人觉得还挺好用的
<mavon-editor ref="md" v-model="content" @imgAdd="imgAdd" @imgDel="imgDel" />
使用之前首先要先安装引入。
npm install mavon-editor //安装
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//使用
Vue.use(mavonEditor )
mavon-editor中的图片添加和删除事件，也是比较简单的，和普通的上传图片方法一样。
文章的发表就是这些内容，感觉比较简单，就是过程比较多。
2. 文章列表
文章列表就更简单了，就是一个表格组件。
<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" @select-all="selectAll">
<el-table-column type="selection" width="55"> el-table-column>
<el-table-column prop="aid" label="id" width="80"> el-table-column>
<el-table-column prop="title" label="标题"> el-table-column>
<el-table-column prop="cname" label="分类" width="100">
el-table-column>
<el-table-column prop="tags" label="标签" width="150">
el-table-column>
<el-table-column prop="createDate" label="创建时间" width="220">el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑el-button>
<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除el-button>
template>
el-table-column>
el-table>
表格可以在官方找自己喜欢的样式来更改样式。
后台返回的数据最好就是和表格写好的格式差不多，这样最好改。
文章列表中还有几个小功能：按照作者名或者文章标题查询文章 ，还有一个导出excel的功能。当然，第二个功能暂时还没有做。第一个功能就比较简单，将输入的值传入后台并得到相应的数据。
3. 分类管理
分类管理的界面和文章列表差不多，都是利用表格来完成。
不过，这里可以点击新建一个新的分类，或者编辑已有分类的信息，也可以删除不想要的分类。
//添加分类
//点击出现添加分类的弹出框
add() {
this.showEdit = true;
this.isNew = true;
},
//写下分类的具体信息后，保存该分类。
saveCatalog() {
let isNew = this.isNew;
let catalogs = this.catalogs;
console.log(catalogs);
if (catalogs.name === "" || catalogs.desc === "") {
this.$message("内容为空不可提交");
return;
}
addCatalog(catalogs)
.then(res => {
console.log(res);
if (res.code == "200") {
this.showEdit = false;
this.$message({
showClose: true,
message: "新建分类成功！",
type: "success"
});
}
})
.catch(err => {
});
}
分类新建好以后，可以编辑也可以直接删除
