一个专门做ppt的网站,建云购网站吗,网站怎么做搜索栏,海北州公司网站建设本文章目标#xff1a;收集文章内容#xff0c;并提交服务器保存
一#xff1a;基于form-serialize插件收集表单数据
form-serialize插件仅能收集到表单数据#xff0c;除此之外的数据无法收集到
二#xff1a;基于axios提交到服务器保存
三#xff1a;调用alert警告…本文章目标收集文章内容并提交服务器保存
一基于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)}
})
