长沙建设品牌网站,wordpress输出所有页面,门户网站建设经济交流材料,即墨网站建设电话图书管理业务
Ajax图书管理业务 需求: 对服务器的图书数据进行 增、删、改、查。功能的实现#xff0c;同时实时动态的渲染刷新页面内容 根据功能模块分为四个业务模块#xff0c;下面有各个业务的实现步骤 01_ 渲染图书列表业务
* 目标1#xff1a;渲染图书列表
* 1.1 获…图书管理业务
Ajax图书管理业务 需求: 对服务器的图书数据进行 增、删、改、查。功能的实现同时实时动态的渲染刷新页面内容 根据功能模块分为四个业务模块下面有各个业务的实现步骤 01_ 渲染图书列表业务
* 目标1渲染图书列表
* 1.1 获取数据
* 1.2 渲染数据
业务1代码 // 固定的携带参数别名
const creator 刘不住
// 封装 -获取并渲染图书列表函数
function getBooksList() {//1.1 获取数据axios({url: http://hmajax.itheima.net/api/books,params: {// 传递外号获取对应数据creator}}).then((result) {console.log(result)const bookList result.data.dataconsole.log(bookList)// 1.2 渲染数据const htmlStr bookList.map((item,index) {return trtd${index 1}/tdtd${item.bookname}/tdtd${item.author}/tdtd${item.publisher}/tdtdspan classdel删除/spanspan classedit编辑/span/td/tr}).join()console.log(htmlStr)document.querySelector(.list).innerHTML htmlStr})
}
// 网页加载运行获取并渲染列表一次
getBooksList()02_新增图书业务
目标2新增图书 * 2.1 新增弹框 - 显示和隐藏 * 2.2 收集表单数据并提交给服务器 * 2.3 刷新图书列表、同时重置表单 业务2代码 // 2.1 创建一个弹框对象
const addModalDom document.querySelector(.add-modal)
const addModal new bootstrap.Modal(addModalDom)
// 给保存按钮添加点击事件
document.querySelector(.add-btn).addEventListener(click, () {// 2.2 收集表单数据并提交给服务器const form document.querySelector(.add-form)// 使用serialize插件的函数获取拥有anme属性的表单值const data serialize(form, { hash: true, empty: true })// 使用对象解构对获取的值进行处理,用于提交数据const { bookname, author, publisher } dataconsole.log(data)// 2.2.1 向服务器发送提交请求提交到服务器axios({url: http://hmajax.itheima.net/api/books,method: post,data: {...data,creator}}).then(result {console.log(result)// 2.3 服务器响应后我们需要重新渲染图书数据列表getBooksList()// 重置表单form.reset()// 隐藏弹框addModal.hide()})
}) 这里的显示我们使用bootstrap属性控制就可以了但是隐藏我们需要提交数据所以我们使用js来控制。 03_删除图书业务 * 目标3 删除图书 * 3.1 删除元素绑定点击事件 - 获取图书id * 3.2 调用删除接口 * 3.3 刷新图书列表 业务3代码 // 3.1 删除元素 - 点击事件委托 动态创建我们委托父级
document.querySelector(.list).addEventListener(click, e {// console.log(e.target)// 判断用户点击的元素if (e.target.classList.contains(del)) {// console.log(点击删除元素)// 获取图书id我们动态创建的自定义属性idconst theId e.target.parentNode.dataset.idconsole.log(theId)// 3.2 调用删除接口axios({// 使用模板字符串 路径传参url: http://hmajax.itheima.net/api/books/${theId},method: DELETE}).then(result {// 3.3 刷新图书列表getBooksList()console.log(result)}).catch(error {console.log(error)console.log(error.response.data.message)})}
}) 04_编辑图书业务 * 目标4 编辑图书 * 4.1 编辑弹框 - 显示和隐藏 * 4.2 获取当前编辑图书数据 - 回显到编辑表单中 * 4.3 提交保存修改 并刷新列表 业务4代码 // 4.1 编辑弹框 - 显示和隐藏 使用js方式控制
const editDom document.querySelector(.edit-modal)
// 通过bootstrap.Modal构造函数创建一个实例对象
const editModal new bootstrap.Modal(editDom)
// 给编辑元素 - 绑定 -委托事件
document.querySelector(.list).addEventListener(click, e {// 判断点击的是否为 edit 这个类 的标签if (e.target.classList.contains(edit)) {// console.log(编辑)// 4.2 获取当前编辑图书数据 - 回显到编辑表单中const theId e.target.parentNode.dataset.id// console.log(theId)axios({// 路径传参 嵌入进去url: http://hmajax.itheima.net/api/books/${theId},method: GET,}).then(result {const bookObj result.data.data// document.querySelector(.edit-form .bookname).value bookObj.bookname// document.querySelector(.edit-form .author).value bookObj.author// 数据对象“属性”和标签“类名”一致// 遍历数据对象使用属性去获取对应标签快速赋值const keys Object.keys(bookObj) //[id, bookname, author, publisher]keys.forEach(key {document.querySelector(.edit-form .${key}).value bookObj[key]})})// 给弹框对象添加show方法让编辑框显示出来editModal.show()}
})// 修改按钮 - 点击 - 隐藏按钮
document.querySelector(.edit-btn).addEventListener(click, () {// 4.3 提交保存修改 并刷新列表const editForm document.querySelector(.edit-form)const bookObj serialize(editForm ,{ hash: true ,empty: true })// 下面是保存正在编辑的图书id 隐藏起来无需让用户修改// input typehidden classid nameid value228500axios({url: http://hmajax.itheima.net/api/books/${bookObj.id},method: PUT,data: {...bookObj,creator}}).then(() {// 修改成功以后重新获取并刷新列表getBooksList()// 隐藏弹框editModal.hide()})}) 业务总结
核心的步骤 * 业务1渲染图书列表 * 1.1 获取数据 * 1.2 渲染数据 业务2新增图书 * 2.1 新增弹框 - 显示和隐藏 * 2.2 收集表单数据并提交给服务器 * 2.3 刷新图书列表、同时重置表单 * 业务3 删除图书 * 3.1 删除元素绑定点击事件 - 获取图书id * 3.2 调用删除接口 * 3.3 刷新图书列表 * 业务4 编辑图书 显示和隐藏 * 4.2 获取当前编辑图书数据 - 回显到编辑表单中 * 4.3 提交保存修改 并刷新列表 在所有的查询和请求中,只要服务器的数据发生变化,同时也需要渲染刷新页面的内容.
