黑马头条数据管理平台项目总结

今天主要实现了项目的项目的三个功能，文章发布的封面，还有点击提交要保存文章到服务器，最后就是文章列表的展示，前面两个属于文章发布的部分，最后一个属于文章管理的部分，所以今天就先总结前面两个，文章管理部分明天学多几个章节再一起总结，下面就开始总结吧。

首先是封面，封面这里只需把用户在本地选择的封面显示到对应的显示框内和获取到图片提交到服务器上之后的URL地址，下面我就用详细的步骤代码注解来解释

// 1.准备标签结构和样式
// 2.选择文件并保存在FormData
// 3.单独上传图片得到图片URL网址
// 4.回显并切换img标签展示（隐藏+号上传标签）
document.querySelector('.img-file').addEventListener('change', async (e) => {
  console.log(e.target)
  const file = e.target.files[0] // 这个表达式可以用来获取用户选择的文件中的第一个文件  
  const fd = new FormData() // 需要传入form-data表单数据对象
  fd.append('image', file) // append方法用于向表单数据对象中添加新的键值对数据
  // 单独上传图片并得到图片URL网址
  // async和await遵循就近原则，在最近的函数添加上async修饰，这样就可以在当前函数内使用await了
  const res = await axios({ // 用res等待Promise对象接收成功的结果
    url: '/v1_0/upload',
    method: 'post',
    data: fd
  })
  console.log(res) // 打印一下成功之后服务器返回的结果对象
  const imgUrl = res.data.url // res.data.url就是上传之后的这张图片网址了
  // 有了图片地址，接下来做一个图片的回显展示给用户看
  document.querySelector('.rounded').src = imgUrl // 将图片渲染到标签上
  document.querySelector('.rounded').classList.add('show') // 标签默认是隐藏的 给它添加一个show显示的类
  document.querySelector('.place').classList.add('hide') // 加号默认是显示的 有图片之后给它添加一个隐藏的类
})
// 优化：点击img可以重新切换封面
// 思路：img点击 > 用JS方式触发文件选择元素click事件方法
document.querySelector('.rounded').addEventListener('click', () => {
  document.querySelector('.img-file').click() // 点击一个元素时自动触发另一个元素的点击事件
})

下一个需要实现的功能是点击提交按钮之后收集大表单的数据，提交到服务器上，这个功能做的过程中会遇到挺多需要解决的小问题，比如表单获取不到图片的地址（需要手动传入）、还有比较少用到的删除属性、提交之后清空列表只能清空表单元素，封面图片和富文本编辑器都需要手动删除。下面同样用详细的注解来解释说明该功能如果实现。

// 1.点击提交按钮收集表单数据，发现封面没有收集到，需要单独设置
// 2.基于axios配合async和await提交收集到的数据给服务器
// 3.提交成功就调用弹窗显示成功，失败就调用弹窗显示失败和失败的原因反馈给用户
// 4.提交之后需要把表单重置，有些需要手动重置，重置成功之后就跳转到内容列表页
// 收集并保存
// 先给提交按钮注册点击事件
document.querySelector('.send').addEventListener('click', async (e) => {
  const form = document.querySelector('.art-form') // 获取总表单标签
  const data = serialize(form, { hash: true, empty: true }) // 使用serialize方法快速收集表单全部内容
  delete data.id // 删除表单不需要的id属性
  console.log(data)
  data.cover = { // 添加提交时需要的cover属性和值（封面的图片地址）
    type: 1, // 
    images: [document.querySelector('.rounded').src] // 表单上没有图片的地址，所以给传入图片的地址
  }
  // 把需要捕捉错误的代码放到try里面
  try {
    // 基于axios提交数据到服务器保存
    const res = await axios({
      url: '/v1_0/mp/articles',
      method: 'post',
      data: data
    })
    console.log(res)
    // 调用Alert警告框反馈结果给用户
    myAlert(true, '发布成功') // 成功传入true，绿色弹框 显示发布成功
    form.reset() // 重置当前表单 （发现只能清空表单元素 并不能删除封面和富文本编辑器这时就需要手动删除它们）
    // 下面手动删除封面
    document.querySelector('.rounded').src = '' // 赋值空的图片
    document.querySelector('.rounded').classList.remove('show') //删除图片显示的类
    document.querySelector('.place').classList.remove('hide') // 删除加号显示的类
    // 手动删除富文本编辑器的内容（重置）
    editor.setHtml('') // 查看富文本插件文档得知这样清空富文本编辑器内容
    setTimeout(() => { // 停留1.5秒跳转到内容列表页面 提升用户体验
      location.href = '../content/index.html'
    }, 1500)
  } catch (error) { // 捕捉提交可能会出现的错误
    myAlert(flase, error.response.data.message) // 失败传入false，红色弹框 显示失败的原因
  }
})

都是个人笔记，希望能帮助和我一样在学习阶段的小伙伴，有不足的地方欢迎评论交流，谢谢！