【ajax实战06】进行文章发布

本文章目标：收集文章内容，并提交服务器保存

一：基于form-serialize插件收集表单数据

form-serialize插件仅能收集到表单数据，除此之外的数据无法收集到

二：基于axios提交到服务器保存

三：调用alert警告框反馈结果给用户

alert警告框部分是调用之前封装好的js库，利用到了封装函数思想

function myAlert(isSuccess, msg) {const alert = document.querySelector('.alert')alert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = msgalert.classList.add('show')setTimeout(() => {alert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = ''alert.classList.remove('show')}, 1500);
}

四：重置表单并跳转到列表页

// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {if (e.target.innerHTML !== '发布') returnconst form = document.querySelector('.art-form')const data = serialize(form, { hash: true, empty: true })// 发布文章的时候，不需要 id 属性，所以可以删除掉（id 为了后续做编辑使用）delete data.idconsole.log(data)// 自己收集封面图片地址并保存到 data 对象中data.cover = {type: 1, // 封面类型images: [document.querySelector('.rounded').src] // 封面图片 URL 网址}// 3.2 基于 axios 提交到服务器保存try {const res = await axios({url: '/v1_0/mp/articles',method: 'POST',data: data})// 3.3 调用 Alert 警告框反馈结果给用户myAlert(true, '发布成功')// 3.4 重置表单并跳转到列表页form.reset()// 封面需要手动重置document.querySelector('.rounded').src = ''document.querySelector('.rounded').classList.remove('show')document.querySelector('.place').classList.remove('hide')// 富文本编辑器重置editor.setHtml('')setTimeout(() => {location.href = '../content/index.html'}, 1500)} catch (error) {myAlert(false, error.response.data.message)}
})