本文章目标:收集文章内容,并提交服务器保存
一:基于form-serialize插件收集表单数据
form-serialize插件仅能收集到表单数据,除此之外的数据无法收集到
二:基于axios提交到服务器保存
三:调用alert警告框反馈结果给用户
alert警告框部分是调用之前封装好的js库,利用到了封装函数思想
javascript
function myAlert(isSuccess, msg) {
const alert = document.querySelector('.alert')
alert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')
alert.innerHTML = msg
alert.classList.add('show')
setTimeout(() => {
alert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')
alert.innerHTML = ''
alert.classList.remove('show')
}, 1500);
}
四:重置表单并跳转到列表页
javascript
// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {
if (e.target.innerHTML !== '发布') return
const form = document.querySelector('.art-form')
const data = serialize(form, { hash: true, empty: true })
// 发布文章的时候,不需要 id 属性,所以可以删除掉(id 为了后续做编辑使用)
delete data.id
console.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)
}
})