第一卷：今天学了什么黑马大事件项目2022. 7.5

1.更换头像的经验

// 选择图片->点击事件->让选择框出现

    chooseImg () {

    // 模拟点击行为

    this.$refs.iptRef.click()

    },

    // 在选择框中选择图片后触发的改变事件

    onFileChange (e) {

    // 获取用户选择的文件列表（伪数组）

    const files = e.target.files

    if (files.length === 0) {

        // 没有选择图片

        this.avatar = ''

    } else {

        // 选择了图片

        //console.log(files[0])

        //这里只是拿到了图片  我们想要展示图片 不能直接展示

        //因为前端图片img标签的src值 只能是图片的连接地址（外连接是http什么的  还有图片文件的路径）

        //                               和base64字符穿   这里要把图片文件转成base64字符串



        //解决方案1. 把这个文件转换成临时地址  （不能发送给后台）

        //语法：URL.createObjectURL（）

       // this.avatar=URL.createObjectURL(files[0])

        //console.log(this.avatar)



        //解决方案2. 把文件转换成base64字符串  可以传给后台

        // 1. 创建 FileReader 对象

        const fr = new FileReader()

        // 2. 调用 readAsDataURL 函数，读取文件内容  

        //读成base64字符串

        fr.readAsDataURL(files[0])

        // 3. 监听 fr 的 onload 事件 这个事件是在读取完之后执行的

        fr.onload = e => {//这些都是固定的

        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）

        this.avatar = e.target.result

        console.log(this.avatar)

        }

        }

    },

第一步：移花接木   写一个隐藏的input其type="file"  添加上传头像的事件 onFileChange (e)

第二步：给浏览图片按钮添加点击事件 内容为自动点击 input上的 onFileChange (e)事件

第三步：获取用户选择的文件列表 const files = e.target.files

第四步：如果拿到这个文件 还不能往后台传 需要把文件转换成base64形式

第五步：创建一个FileReader对象 并用它的readAsDataURL 函数 将文件读取成base64形式

最后监听FileReader对象的onload事件得到读取结果

2. .sync作用实现双向数据绑定

不是很懂 在此项目中

<el-dialog title="添加文章分类" :visible.sync="addVisible" width="35%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelFn">取 消</el-button>
        <el-button size="mini" type="primary" @click="addFn">添 加</el-button>
    </span>
</el-dialog>

因为后面通过修改addvisible的值来控制

在此项目中它的用法好像有v-if v-show 的控制互斥事件的意思

3.关于项目中一个按钮控制多个业务 的状态区分

 文章分类中的 添加分类 和修改分类 公用一个表单  公用一个添加按钮

需要进行状态区分

步骤：

第一步：定义一个标记变量isEdit（true时为编辑状态，false时为新增状态），再定义一个editId属性来存放id 这个id在修改分类时需要传给后台 还要作为唯一标识id值

第二步：点击新增分类时，isEdit=false，editId置空，点击修改分类时isEdit=true，editId=要修改数据的id

第三步：在点击添加按钮的事件里可以用if判断isEdit作为区分了  新增时走新增的逻辑  修改时走修改的逻辑

if (this.isEdit) {
                //走的编辑
                const { data: res } = await updateArtCateAPI({id:this.editId,...this.addForm})
                //console.log(res)
                if (res.code !== 0) return this.$message.error('修改分类失败！')
                this.$message.success('修改分类成功！')
                this.addVisible = false
            }else{
                //走的添加
                // 调用接口传递数据给后台
                const { data: res } = await addArtCateAPI(this.addForm)
                if (res.code !== 0) return this.$message.error('添加分类失败！')
                this.$message.success('添加分类成功！')
                // 重新请求列表数据
                this.initCateListFn()
                // 关闭对话框
                this.addVisible = false
            }

4.熟悉elementui里cell组件的组件属性

<template v-slot="scope">
            <!-- 这是组件的属性 这样一操作就能把表格里的数据拿出来 -->
            <el-button type="primary" size="mini" @click="updateFn(scope.row)">修改</el-button>
            <el-button type="danger" size="mini"  @click="removeFn(scope.row.id)">删除</el-button>
        </template>

这里是插槽的知识  scope.row是把表格里数据拿出来了

5.关于await 回顾及新摄取知识

前提回顾：1.await只能返回成功的结果并方行往下走，如果失败会让浏览器抛出错误而且不会继续往下走

                  2.await只能在async修饰的函数里使用

                  原因 await会暂停代码的执行  但是暂停了不能影响其他同步任务的执行啊 所以需要async来把这函数变为异步的  然后在里边用await暂停等待后面的异步结果

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

    // 取消了关闭-阻止住, 什么都不干
    if (confirmResult === 'cancel') return
    // 确认关闭
    done()
}

$confirm提示框借用promsise管理  点击确定promsise它的状态为成功状态  返回‘confirm’  点击取消此promsise状态为拒绝状态 返回‘cancel’字符串

  结合回顾1   

那么问题来了  ：await后面promise风格的 $confirm的错误状态如何捕获呢？

此处用catch：  piomise的链式调用      第一个err是捕获前面promise拒绝状态的‘cancel’字符串  第二个是把他return

  在catch中return的err是字符串‘cancel’ 这是一个非promise结果 它会被当成成功的状态 作为catch这个promise的结果并且留在原地 那这样 await又能捕获到成功的值了 使confirmResult的值为cancel’