基于vue和element-ui开发的新闻后台管理系统——3、文章发布页

1、整体架构

发布页静态结构

使用到的组件
el-card卡片
el-breadcrumb面包屑
el-form表单
el-form-item表单项
el-input单行文本框
VueEditor富文本框
el-checkbox多选框组
el-upload文件上传组件

data()的数据结构

 data() {
     
    return {
     
      //存储要上传的视频路径
      videoURL: "",
      //允许上传的文件类型
      fileType: ["video/mp4", "video/avi", "video/mpg"],
      //基地址
      baseURL: this.getBaseURL(),
      //============多选框组==============
      //全选
      checkAll: false,
      //设置全选按钮在选中部分但未全选时显示的样式
      isIndeterminate: false,
      //复选框数据框数组
      cateList: [],
      //选中的多选框
      checked: [],
      //================文章发布=================
      post: {
     
        title: "", //文章标题
        type: 1, //文章类型
        cover: [], //封面上传后返回的id集合{id：1}
        content: "", //文章类容
        categories: [], //所属栏目ID集合{id：1}
      },
      //==============富文本框配置=================
      config: {
     
        // 上传图片的配置
        uploadImage: {
     
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          headers: this.getToken(),
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
     
            console.log(axios.defaults.baseURL);
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },
        // 上传视频的配置
        uploadVideo: {
     
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          headers: this.getToken(),
          uploadSuccess(res, insert) {
     
            console.log(axios.defaults.baseURL + res.data.url);
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },
      },
    };
  },

2、组件的使用

1.富文本框组件的添加（文章内容编辑）

安装组件

npm install vue-word-editor --save

导入组件

import VueEditor from "vue-word-editor";

导入组件样式

import "quill/dist/quill.snow.css";

在components中注册组件

  components: {
     
    VueEditor,
  }

在页面中使用

<VueEditor :config="config" ref="postEditor" v-if="post.type === 1"/>

配置项

//富文本框配置
config: {
     
  // 上传图片的配置
  uploadImage: {
     
    url: axios.defaults.baseURL + "/upload", //提交的地址
    name: "file", //设置post提交时的参数名
    headers: this.getToken(), //设置token
    // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
    uploadSuccess(res, insert) {
     
      //把上传的内容渲染回编辑器内
      insert(axios.defaults.baseURL + res.data.data.url);
    },
  },
  // 上传视频的配置
  uploadVideo: {
     
    url: axios.defaults.baseURL + "/upload", //提交的地址
    name: "file",//设置post提交时的参数名
    headers: this.getToken(),//设置token
    uploadSuccess(res, insert) {
     
     //把上传的内容渲染回编辑器内
      insert(axios.defaults.baseURL + res.data.data.url);
    },
  },
},

获取文本框的值

//获取内容
this.$refs.postEditor.editor.root.innerHTML

2.视频文件上传控件(视频上传)

<el-upload
  class="upload-demo"
  :action="baseURL + '/upload'"
  :headers="getToken()"
  :on-success="handleUpload"
  :before-upload="handleBeforeUpload"
  :on-exceed="handleUploadExceed"
  :limit="1"
>
  <el-button size="small" type="primary">点击上传el-button>
  <div slot="tip" class="el-upload__tip">
    只能上传小于80M的视频文件
  div>
el-upload>

属性

action//文件上传地址
headers//设置请求头
limit//最大的文件数量

事件

on-success//文件上传成功后触发的方法
before-upload//文件上传前触发的函数
on-exceed//超出限制数量时触发的函数

事件处理

//文件上传之前
    handleBeforeUpload(file) {
     
      console.log(file);
      if (this.fileType.indexOf(file.type) == -1) {
     
        this.$alert("只能上传视频文件", "提示", {
     
          confirmButtonText: "好的",
        });
        return false;
      } else {
     
        if (file.size > 1024 * 1024 * 80) {
     
          this.$alert("最大只能上传80M的文件", "提示", {
     
            confirmButtonText: "好的",
          });
          return false;
        }
      }
    },
    //文件上传
    handleUpload(response, file, fileList) {
     
      // console.log(response, file, fileList);
      this.videoURL = axios.defaults.baseURL + response.data.url;
    },
    //上传视频超过限制
    handleUploadExceed() {
     
      this.$alert("最多只能上传1个视频哦", {
     
        confirmButtonText: "好的",
      });
    },

3.多选框（选择栏目）

 
 <el-checkbox
   :indeterminate="isIndeterminate"
   v-model="checkAll"
   @change="handleCheckAllChange"
   >全选el-checkbox
 >
 <div style="margin: 15px 0">div>
 <el-checkbox-group
   v-model="checked"
   @change="handleCheckedCitiesChange"
 >
   <el-checkbox
     v-for="cate in cateList"
     :label="cate.id"
     :key="cate.id"
     >{
    { cate.name }}el-checkbox
   >
 el-checkbox-group>

属性

isIndeterminate//布尔值，有选择但非全选状态的时的样式
v-model//布尔值，是否为选中

事件

@change//选中状态改变时触发

获取栏目数据

配置api添加请求方法

//获取分类列表
export const getCateList = () => {
     
  return axios({
     
    url: '/category'
  })
}

获取数据

 async mounted() {
     
    let CateList = await getCateList();
    this.cateList = CateList.data.data.splice(2); //去除头条和关注
  },

实现全选

//多选框发生变化时触发
 handleCheckAllChange(val) {
     
   //val是一个布尔值，表示全选和非全选两种状态
   //给选中数组赋值，使得所有多选框全选
   this.checked = val ? this.cateList.map((v) => v.id) : [];
   //去掉非全选状态
   this.isIndeterminate = false;
 },
 //处理多选框发生改边时触发的事件
 handleCheckedCitiesChange(value) {
     
   console.log(this.post.categories);
   //获取已选中数组的长度
   let checkedCount = value.length;
   //获取已选中数组的长度等于数组总长度时勾选全选按钮
   this.checkAll = checkedCount === this.cateList.length;
   //有选中但是不是多选时为true,全选按钮显示有选择但非全选的状态
   this.isIndeterminate =
     checkedCount > 0 && checkedCount < this.cateList.length;
 },

4.照片墙（文章封面）

<el-form-item label="封面:">
  <el-upload
    :action="getBaseURL() + '/upload'"
    list-type="picture-card"
    :limit="3"
    :on-exceed="handleExceed"
    multiple
    :headers="getToken()"
    :on-success="coverUpload"
  >
    <i class="el-icon-plus">i>
  el-upload>
el-form-item>

属性

action//上传接口
list-type// 文件列表的类型 string text/picture/picture-card
limit//最大数量
headers//设置请求头

事件

on-exceed//超出最大文件数触发
on-success//上传成功触发

事件处理

//封面上传成功
coverUpload(response, file, fileList) {
     
  this.post.cover.push({
      id: response.data.id });
},
//上传图片超出数量弹出提示
handleExceed() {
     
  this.$alert("最多只能上传3张封面哦", {
     
    confirmButtonText: "好的",
  });
},

5.文章发布

//文章发布按钮
async publish() {
     
  //获取内容
  this.post.content = this.post.type == 1 ? this.$refs.postEditor.editor.root.innerHTML : this.videoURL;
  //获取已选中的栏目并改造数据
  this.post.categories = this.checked.map((v) => {
     
    return {
      id: v };
  });
  console.log(this.post);

  // 发布
  const result = await publishPost(this.post)

  console.log(result);

  //清空
  this.checked = [];
  //去掉非全选状态
  this.isIndeterminate = false;
  // 去掉全选状态
  this.checkAll = false;
},

6.总结：

1、在涉及到上传接口的控件中，要设置好上传地址，和headers

2、获取富文本框值不能通过v-model的方式获取，需要通过this.$refs.postEditor.editor.root.innerHTML获取

3、el-checkbox-group中选中的值会保存在v-model绑定的变量中，以数组的形式进行存储，当中存储的值是el-checkbox里label绑定的数据，可以通过v-model绑定的变量实现多选，取值等

4、el-checkbox-group里获取到的数字是只有id的数组，需要改造