06发布文章

01 发布文章-页面组件和路由

目标

准备发表文章的页面组件并配置路由显示

讲解

在 src/views/article/artList.vue组件, ==直接复制标签==

:inline="true" 不加：是字符串，加：是布尔值

条件查询用【行内表单】去实现

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="q">
          <el-form-item label="文章分类">
            <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px;">
            <el-select v-model="q.state" placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">筛选</el-button>
            <el-button type="info" size="small">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 -->
        <el-button type="primary" size="small" class="btn-pub">发表文章</el-button>
      </div>
      <!-- 文章表格区域 -->
      <!-- 分页区域 -->
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'ArtList',
  data() {
    return {
      // 查询参数对象
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
</style>

在 src/router/index.js路由模块中，导入并组件并声明路由规则如下

{
    path: 'art-list', // 文章列表
    component: () => import('@/views/article/artList')
}

02发表文章-对话框组件

目标

准备发表文章的对话框组件

讲解

在 artList.vue组件中，声明发表文章的对话框

<!-- 发表文章的 Dialog 对话框 -->
<el-dialog title="发表文章" :visible.sync="pubDialogVisible" fullscreen :before-close="handleClose">
  <span>这是一段信息</span>
</el-dialog>

在 data 中定义布尔值 pubDialogVisible，用来控制对话框的显示与隐藏

data() {
  return {
    // ...其他
    pubDialogVisible: false // 控制发表文章对话框的显示与隐藏
  }
}

点击发布按钮，展示对话框

定义事件处理函数如下

methods: {
    // 发表文章按钮->点击事件->让添加文章对话框出现
    showPubDialogFn () {
        this.pubDialogVisible = true
    }
}

在对话框将要关闭时，询问用户是否确认关闭对话框

// 对话框关闭前的回调
async handleClose (done) {
    // 询问用户是否确认关闭对话框
    const confirmResult = await this.$confirm('此操作将导致文章信息丢失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(err => err)
    // 取消了关闭-阻止住, 什么都不干
    if (confirmResult === 'cancel') return
    // 确认关闭
    done()
}

小结

this.$confirm的返回值是Promise对象, 如何提取成功结果?

答案

await后面的catch又是怎么回事?

答案

03发表文章-对话框内表单

目标

准备好, 对话框内,发表文章用的表单, 以及数据绑定和规则对象

并渲染文章分类下拉菜单数据

讲解

初步定义表单的 UI 结构

<!-- 发布文章的对话框 -->
<el-form :model="pubForm" :rules="pubFormRules" ref="pubFormRef" label-width="100px">
  <el-form-item label="文章标题" prop="title">
    <el-input v-model="pubForm.title" placeholder="请输入标题"></el-input>
  </el-form-item>
  <el-form-item label="文章分类" prop="cate_id">
    <el-select v-model="pubForm.cate_id" placeholder="请选择分类" style="width: 100%;">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

在 data 中定义数据对象和验证规则对象：

data() {
  return {
    // ...其他
    pubForm: { // 表单的数据对象
      title: '',
      cate_id: ''
    },
    pubFormRules: { // 表单的验证规则对象
      title: [
        { required: true, message: '请输入文章标题', trigger: 'blur' },
        { min: 1, max: 30, message: '文章标题的长度为1-30个字符', trigger: 'blur' }
      ],
      cate_id: [{ required: true, message: '请选择文章标题', trigger: 'blur' }]
    }
  }
}

在 methods 中，声明初始化文章分类列表数据的方法

// 初始化文章分类的列表数据
async initCateList() {
  const { data: res } = await this.$http.get('/my/cate/list')
  if (res.code === 0) {
    this.cateList = res.data
  }
}
在 data 中声明 cateList 数组
data() {
  return {
    // ...其他
    cateList: [] // 文章分类
  }
}

在 created 生命周期函数中，调用步骤1声明的方法

created() {
  this.initCateList()
},

循环渲染文章分类的可选项

<el-form-item label="文章分类" prop="cate_id">
  <el-select v-model="pubForm.cate_id" placeholder="请选择分类" style="width: 100%;">
    <!-- 循环渲染分类的可选项 -->
    <el-option :label="item.cate_name" :value="item.id" v-for="item in cateList" :key="item.id">
    </el-option>
  </el-select>
</el-form-item>

4 发表文章-富文本

目标

准备富文本编辑器

富文本: 就是可以带标签和样式的字符串, 一般用于设置一个产品/文章的主体内容

文档可以在npm的网页中搜索

讲解

基于 vue-quill-editor 实现富文本编辑器：https://www.npmjs.com/package/vue-quill-editor

运行如下的命令，在项目中安装富文本编辑器：

yarn add vue-quill-editor

在项目入口文件 main.js中导入并全局注册富文本编辑器

当然, 你也可以单独封装模块写这些代码后, 引入到main.js即可

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 全局注册富文本编辑器
Vue.use(VueQuillEditor)

在 views/article/artList.vue组件的 data 中，定义富文本编辑器对应的数据项, 也绑定到表单的数据对象属性中

data() {
  return {
    // ...其他
    // 表单的数据对象
    pubForm: {
      title: '',
      cate_id: '',
+     content: '' // 文章的内容
    },
    // ...其他
  }
}

在 artList.vue组件的模板结构中，添加富文本编辑器的 DOM 结构, 给el-form内新增一块表单域

<el-form-item label="文章内容">
  <!-- 使用 v-model 进行双向的数据绑定 -->
  <quill-editor v-model="pubForm.content"></quill-editor>
</el-form-item>

美化富文本编辑器的样式：

// 设置富文本编辑器的默认最小高度
// ::v-deep作用: 穿透选择, 正常style上加了scope的话, 会给.ql-editor[data-v-hash]属性, 只能选择当前页面标签或者组件的根标签
// 如果想要选择组件内的标签(那些标签没有data-v-hash值)所以正常选择选不中, 加了::v-deep空格前置的话, 选择器就会变成如下形式
// [data-v-hash] .ql-editor 这样就能选中组件内的标签的class类名了
::v-deep .ql-editor {
  min-height: 300px;
}

再给文章内容部分, 绑定el-form的表单校验, 在el-form-item加上同名的prop属性

<el-form-item label="文章内容" prop="content">
    <!-- 使用 v-model 进行双向的数据绑定 -->
    <quill-editor v-model="pubForm.content"></quill-editor>
</el-form-item>

在rules对应的规则对象中, 添加校验规则

content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
]

05 发表文章-封面标签

目标

渲染文章封面区域标签

实现用户选择封面功能, 拿到用户选择的图片文件

讲解

在 artList.vue组件的模板结构中，添加文章封面对应的 DOM 结构：

<el-form-item label="文章封面">
  <!-- 用来显示封面的图片 -->
  <img src="../../assets/images/cover.jpg" alt="" class="cover-img" ref="imgRef" />
  <br />
  <!-- 文件选择框，默认被隐藏 -->
  <input type="file" style="display: none;" accept="image/*" ref="iptFileRef" />
  <!-- 选择封面的按钮 -->
  <el-button type="text">+ 选择封面</el-button>
</el-form-item>

美化封面图片的样式：

// 设置图片封面的宽高
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}

为选择封面的按钮绑定点击事件处理函数

模拟文件选择框的点击事件

chooseImgFn() {
  this.$refs.iptFileRef.click()
}

监听文件选择框的 change 事件

<!-- 文件选择框，默认被隐藏 -->
<input type="file" style="display: none;" ref="iptFile" accept="image/*" @change="onCoverChangeFn" />

定义 onCoverChange 处理函数如下

// 封面选择改变的事件
onCoverChangeFn (e) {
    // 获取用户选择的文件列表
    const files = e.target.files
    if (files.length === 0) {
        // 用户没有选择封面
        this.pubForm.cover_img = null
    } else {
        // 用户选择了封面
        this.pubForm.cover_img = files[0]
    }
}

在 data 中的 pubForm对象上，声明 cover_img属性，用来存储用户选择的封面

data() {
  return {
    // 表单的数据对象
    pubForm: {
      title: '',
      cate_id: '',
      content: '',
+     cover_img: null // 用户选择的封面图片（null 表示没有选择任何封面）
    },
  }
}

小结

封面标签选择图片的思路是?

答案

发表文章-封面图片

目标

给封面图片标签做预览效果

如果用户未选择图片, 给一张默认图片

讲解

在 artList.vue组件中，导入默认的封面图片

// 导入默认的封面图片
import defaultImg from '@/assets/images/cover.jpg'

在文件选择框的 change事件处理函数中，根据用户是否选择了封面，动态设置封面图片的 src 地址：

// 监听文件选择框的 change 事件
onCoverChange(e) {
  // 获取到用户选择的封面
  const files = e.target.files
  if (files.length === 0) {
    // 用户没有选择封面
    this.pubForm.cover_img = null
+   this.$refs.imgRef.setAttribute('src', defaultImg)
  } else {
    // 用户选择了封面
    this.pubForm.cover_img = files[0]
+   const url = URL.createObjectURL(files[0])
+   this.$refs.imgRef.setAttribute('src', url)
  }
}

06发表文章-状态

目标

设置发布文章状态的表单

讲解

在 data 中的 pubForm 对象上，定义 state属性，用来存储文章的发布状态

data() {
  return {
    // 表单的数据对象
    pubForm: {
      title: '',
      cate_id: '',
      content: '',
      cover_img: null,
+     state: '' // 文章的发布状态，可选值有两个：草稿、已发布
    },
  }
}

在el-form最后, 再准备发布和存为草稿按钮，并绑定点击事件处理函数

<el-form-item>
    <el-button type="primary" @click="pubArticleFn('已发布')">发布</el-button>
    <el-button type="info" @click="pubArticleFn('草稿')">存为草稿</el-button>
</el-form-item>

在 methods 中声明 pubArticle处理函数如下

// 发布文章或草稿-按钮点击事件
pubArticleFn (state) {
    // 1. 设置发布状态
    this.pubForm.state = state
    // 2. 表单预校验
    this.$refs.pubFormRef.validate(valid => {
        if (!valid) return this.$message.error('请完善文章信息！')
        // 3. 判断是否提供了文章封面
        if (!this.pubForm.cover_img) return this.$message.error('请选择文章封面！')
        // 4. TODO：发布文章
        console.log(this.pubForm)
    })
}

两个按钮用了一个方法，通过什么来区分是哪个按钮那？

传递的参数 this.pubForm.state = state

3.1 后台好多都是必填的，所以点击按钮时候要进行校验！！！！

按以前的elemntui 的form表单校验，只有input是好使的，其他都不好使

2 下拉菜单不能失去焦点，下拉菜单应该是change。

3 富文本：

修改：

4封面的校验

// 发布文章或草稿-按钮点击事件
pubArticleFn (state) {
    // 1. 设置发布状态
    this.pubForm.state = state
    // 2. 表单预校验
    this.$refs.pubFormRef.validate(valid => {
        if (!valid) return this.$message.error('请完善文章信息！')
        // 3. 判断是否提供了文章封面
        if (!this.pubForm.cover_img) return this.$message.error('请选择文章封面！')
        // 4. TODO：发布文章
        console.log(this.pubForm)
    })
}

在对话框完全关闭之后，清空表单的关键数据：

<!-- 发表文章的 Dialog 对话框 -->
<el-dialog
  title="发表文章"
  :visible.sync="pubDialogVisible"
  fullscreen
  :before-close="handleClose"
  @closed="onDialogClosedFn"
>
  <!-- 省略其它代码 -->
</el-dialog>

在 methods 中声明 onDialogClosed函数如下：

// 对话框完全关闭之后的处理函数
onDialogClosedFn () {
    // 清空关键数据
    this.$refs.pubFormRef.resetFields()
    // 因为这2个变量对应的标签不是表单绑定的, 所以需要单独控制
    this.pubForm.content = ''
    this.$refs.imgRef.setAttribute('src', defaultImg)
}

07发表文章-完成功能

目标

把前面准备好的数据对象, 调用接口保存在后台

讲解

查看接口文档, 封装发布文章的接口方法

/**
 * 发布文章
 * @param {*} fd 表单对象
 * @returns Promise对象
 */
export const uploadArticleAPI = (fd) => {
  return request({
    url: '/my/article/add',
    method: 'POST',
    data: fd // 参数要的是表单对象, 不能写普通对象, axios内部会判断, 如果是表单对象, 传递的请求体会设置Content-Type: form-data与后端对应
  })
}

在发布/存草稿按钮, 点击事件中调用接口, 组织好参数传递

// 创建 FormData 对象
const fd = new FormData()
// 向 FormData 中追加数据
Object.keys(this.pubForm).forEach((key) => {
    fd.append(key, this.pubForm[key])
})
// 发起请求
const { data: res } = await uploadArticleAPI(fd)
if (res.code !== 0) return this.$message.error('发布文章失败！')
this.$message.success('发布文章成功！')
// 关闭对话框
this.pubDialogVisible = false
// TODO：刷新文章列表数据