Vue大事件练习（保姆级教程）10

1.6-发表文章04(图片预览)

• 由于这个接口服务器要的是文件二进制，因此文件预览功能跟我们之前学习的意义

  • 给input添加ref用于获取选择的文件

    • ref="iptFile"

  • 给input绑定change事件

    • @change="doChange"

  • 给img添加ref用于展示用户选择的图片

    • ref="imgRef"

//1.图片预览
doChange(e) {
  // 获取到用户选择的封面
  const file = e.target.files[0];
  if (file) {
    // 绑定到data中
    this.pubForm.cover_img = file;
    //生成url
    const url = URL.createObjectURL(files[0]);
    //显示到img
    this.$refs.imgRef.setAttribute("src", url);
  }
}

1.7-发表文章05(渲染文章分类)

• 1.先在data里面添加一个数组

• 2.在created钩子中发送ajax

async created() {
    //1.获取文章分类(不需要反复调用这个接口，可以直接在created钩子里面发送ajax)
    const { data: res } = await this.$axios.get('/my/cate/list')
    if (res.code === 0) {
      // 把数据转存到 data 中
      this.cateList = res.data
    }
  },

• 3.页面el-select组件渲染分类

• <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
  

1.8-发表文章06（完成发表文章）

//2.发表文章
async pubArticle(state) {
  //(1)把文章的发表状态保存到 data 中
  this.pubForm.state = state;
  //(2)使用formdata发送文件数据
  const fd = new FormData();
  //将data对象参数添加到fd中（因为fd会自动我们设置请求头+处理文件二进制）
  for (const k in this.pubForm) {
    fd.append(k, this.pubForm[k]);
  }
  //(3)调用接口
  const { data: res } = await this.$axios.post("/my/article/add", fd);
  //提示消息
  this.$message.success(res.message);
  //成功
  if (res.code === 0) {
    // 关闭对话框
    this.dialogVisible = false;
    // 刷新文章的列表数据
    this.initArtList();
  }
},
//3.获取文章列表
initArtList(){
​
}

1.9-文章列表01（渲染列表）

• 1.给data()添加数据

• data() {
    return {
      // 文章的列表数据
        artList: [],
        // 总数据条数
        total: 0,
        // 查询参数对象
        q: {
          // 页码值
          pagenum: 1,
          pagesize: 2,
          cate_id: '',
          state: ''
        },
    }
  }
  

• 2.created()钩子中调用函数

//3.获取文章列表
initArtList() {
  const { data: res } = await this.$axios.get('/my/article/list', {params: this.q})
  if( res.code === 0 ){
    this.artList = res.data
    this.total = res.total
  }
}

• 3.el-table渲染列表

• <!-- 文章表格区域 -->
  <el-table :data="artList" style="width: 100%;" border stripe>
    <el-table-column label="文章标题" prop="title"></el-table-column>
    <el-table-column label="分类" prop="cate_name"></el-table-column>
    <el-table-column label="发表时间" prop="pub_date"></el-table-column>
    <el-table-column label="状态" prop="state"></el-table-column>
    <el-table-column label="操作"></el-table-column>
  </el-table>
  

1.10-文章列表02（momentjs格式化时间）

• 1.下载

  • npm i moment

• 2.导入

  • import moment from 'moment'

• 3.格式化时间

  • //4.时间格式化
    formatTime(time){
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
    

• 4.模板中调用函数

  • <!-- 文章表格区域 -->
      <el-table :data="artList" style="width: 100%;" border stripe>
        <el-table-column label="文章标题" prop="title"></el-table-column>
        <el-table-column label="分类" prop="cate_name"></el-table-column>
        <el-table-column label="发表时间">
          <template v-slot="{ row }">
            {{ formatTime(row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>