Ajax_02学习笔记(源码 + 图书管理业务 + 以及 个人信息修改功能)

这篇具有很好参考价值的文章主要介绍了Ajax_02学习笔记(源码 + 图书管理业务 + 以及 个人信息修改功能)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax_02

01_Bootstrap框架-控制弹框的使用

代码
<!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary"  data-bs-toggle="modal" data-bs-target=".my-box">
 显示弹框
</button>

<!-- 弹框代码 -->
<div class="modal my-box" tabindex="-1">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">Modal title</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="modal-body">
       <p>Modal body text goes here.</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
     </div>
   </div>
 </div>
</div>

<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
  • 通过自定义属性,控制弹框的显示和隐藏.自己能够控制属性,从而进行更改

02_通过js方式控制弹框

目标:使用JS控制弹框,显示和隐藏

  1. 创建弹框对象

  2. 调用弹框对象内置方法

    .show() 显示

    .hide() 隐藏

代码示例
<!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">


<button type="button" class="btn btn-primary edit-btn">
 编辑姓名
</button>

<div class="modal name-box" tabindex="-1">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title">请输入姓名</h5>
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     </div>
     <div class="modal-body">
       <form action="">
         <span>姓名:</span>
         <input type="text" class="username">
       </form>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
       <button type="button" class="btn btn-primary save-btn">保存</button>
     </div>
   </div>
 </div>
</div>

<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>


<script>
 // 1、创建弹框对象
 const modalDom = document.querySelector('.name-box')
 const modal = new bootstrap.Modal(modalDom)

 // 编辑姓名 -> 点击 -> 赋予一个默认的姓名 -> 弹框显示
 document.querySelector('.edit-btn').addEventListener('click', () => {
   document.querySelector('.username').value = '默认姓名'
   // 2、显示弹框
   modal.show()

 })
 // 保存 -> 点击 -> 获取姓名打印 -> 弹框隐藏
 document.querySelector('.save-btn').addEventListener('click', () => {
   const username = document.querySelector('.username').value
   console.log('模拟把姓名保存到服务器上',username)
   // 3、隐藏弹框
   modal.hide()
 })



</script>

  • 关于这两种方式控制弹框的显示和隐藏,至于怎么选择,我们取决于业务逻辑,如果只是单纯的控制显示和隐藏,那么直接使用bootstrap属性控制即可,反正就得使用js控制

图书管理业务

需求: 对服务器的图书数据进行 增、删、改、查。功能的实现,同时实时动态的渲染刷新页面内容

根据功能模块分为四个业务模块,下面有各个业务的实现步骤

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.data
     console.log(bookList)
     // 1.2 渲染数据
     const htmlStr = bookList.map((item,index) => {
         return `<tr>
         <td>${index + 1}</td>
         <td>${item.bookname}</td>
         <td>${item.author}</td>
         <td>${item.publisher}</td>
         <td>
           <span class="del">删除</span>
           <span class="edit">编辑</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 } = data
 console.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(我们动态创建的自定义属性id)
     const theId = e.target.parentNode.dataset.id
     console.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 type="hidden" class="id" name="id" value="228500">
 axios({
     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 提交保存修改 ,并刷新列表

在所有的查询和请求中,只要服务器的数据发生变化,同时也需要渲染刷新页面的内容.

图片上传

上传-图片

注意1:上传的图片必须在2MB以内
注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问
请用img/背景图方式进行使用

* 目标:图片上传,显示到网页上

* 1. 获取图片文件

* 2. 使用 FormData 携带图片文件

* 3. 提交到服务器,获取图片url网址使用

代码示例
          // 1.获取选择文件按钮,同时注册一个变化事件
    document.querySelector('.upload').addEventListener('change', e => {
      console.log(e.target.files[0])
      // 2. 使用 FormData 构造函数 携带图片文件夹
      const imgs = new FormData()
      // 调用实例对象中 append 方法,传入图片
      imgs.append('img',e.target.files[0])
      // 3. 提交到服务器,获取图片url网址使用
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: imgs
      }).then(result => {
        console.log(result.data.data)
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
      })
    })

携带的参数具体需要参考接口文档。

网站背景更换

  • 目标:网站-更换背景
    1. 选择图片上传,设置body背景
    1. 上传成功时,"保存"图片url网址
    1. 网页运行后,"获取"url网址使用
代码示例
//1、选择图片上传,给body设置背景图片
// 1.2 获取按钮进行上传
document.querySelector('.bg-ipt').addEventListener('change', e => {
    console.log(e.target.files[0])
    // 表单事件对象
    const fd = new FormData()
    fd.append('img' , e.target.files[0])
    axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
    }).then(result => {
        const res = result.data.data.url
        // 更换body的背景图
        document.body.style.backgroundImage = `url(${res})`

        // 2、上传成功时,"保存"图片url网址 到本地,防止刷新丢失
        localStorage.setItem('bgImg',res)
    })
})

// 3. 网页运行后,"获取"url网址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
// 逻辑与中断,本地有服务器提交后的url的话,那么就执行后面的,否则为空值不执行
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)
  • 在上传图片的基础上增加了存储到本地的功能需求,同时没有url返回,不执行更换背景。

个人信息业务

01_信息渲染

* 目标1:信息渲染

* 1.1 获取用户的数据

* 1.2 回显数据到标签上

模块一代码
// 业务1、信息渲染

// 1.1 获取用户的数据
const creator = 'cv爱好者'
axios({
    url: 'http://hmajax.itheima.net/api/settings',
    method: 'GET',
    params: {
        creator
    }
}).then(result => {
    const userObj = result.data.data
    console.log(userObj)
    // 1.2 回显数据到标签上
    const user = Object.keys(userObj)
    user.forEach(item => {
        if (item === 'avatar') {
            // 单独赋予默认头像
            document.querySelector('.prew').src = userObj[item]
        } else if (item === 'gender') {
            // 单独赋予默认性别 [男radio元素 ,女radio元素]
            const getGender = document.querySelectorAll('.gender')  //获取到伪数组,节点列表
            // 获取到性别数字; 0 男 1 女
            const gNum = userObj[item]
            // 通过性别数字,作为下标,找到对应性别单选框,设置选中状态
            getGender[gNum].checked = true
        } else {
            // 赋予默认内容
            document.querySelector(`.${item}`).value = userObj[item]
        }
    })
})

02_ 头像修改

* 目标2: 头像修改

* 2.1 选择头像文件

* 2.1 提交保存 + 回显

模块二代码
//点击事件 ,上传头像 
document.querySelector('.upload').addEventListener('change' ,e => {
    console.log(e.target.files[0])

    // 使用表单事件对象 FormData 构造函数 目的就是提交服务器得到url网址
    const newImg = new FormData()
    newImg.append('avatar',e.target.files[0])
    newImg.append('creator',creator)

    // 2.1 提交保存 + 回显
    axios({
        url: 'http://hmajax.itheima.net/api/avatar',
        method: 'PUT',
        data: newImg

    }).then(result => {
        // 得到图片url网址
        const imgUrl = result.data.data.avatar
        // 把头像回显到页面上
        document.querySelector('.prew').src = imgUrl
    })
})

03_信息修改_ + 弹框提示

* 目标3 ;信息修改

* 3.1: 收集表单信息

* 3.2: 提交到服务器保存

* 目标4: 提示框显示

* 4.1: 创建toast对象(弹框对象)

* 4.2: 调用show方法 -> 显示提示框

模块三 + 模块四 代码示例
// 注册事件
document.querySelector('.submit').addEventListener('click', () => {
    const form = document.querySelector('.user-form')
    // 使用serialize插件获取表单元素
    const formObj = serialize(form , { hash: true , empty: true})
    // 添加一个别名属性到收集的表单中
    formObj.creator = creator
    // 将性别数字转为 数字型
    formObj.gender = + formObj.gender
    // 3.2: 提交到服务器保存
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        method: 'PUT',
        data: formObj
    }).then(result => {
        // 4.1: 创建toast对象(弹框对象)
        const toastDom = document.querySelector('.my-toast')
        const toast = new bootstrap.Toast(toastDom)
        // 4.2: 调用show方法 -> 显示提示框
        toast.show()

    })
})

有几个经典的处理数据的方式,将会再改文章后进行单独补充。也希望自己能够坚持的重复的掌握好学习过的知识技术方式,不断地积累。文章来源地址https://www.toymoban.com/news/detail-623657.html

到了这里,关于Ajax_02学习笔记(源码 + 图书管理业务 + 以及 个人信息修改功能)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 图书管理系统|基于Springboot的图书管理系统设计与实现(源码+数据库+文档)

    图书管理系统目录 目录 基于Springboot的图书管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、个人中心 2、管理员管理 3、用户管理 4、图书出版社管理 四、数据库设计 1、实体ER图 五、核心代码  六、论文参考 七、最新计算机毕设选题推荐 八、源码获取:

    2024年03月26日
    浏览(85)
  • [项目]PHP图书管理系统(附源码)

    📔这里是一个喜欢编程的小程序员,KSaMar 📕如果此文章对您有些许帮助,您可以选择赞助本作作者,让作者有更强的更新文章动力! 📒如果您喜欢此文章,您可以 点赞👍 收藏⭐ 一下,这将对我书写有很大的帮助! 📘如果您通过阅读此文章发现了BUG,请及时私信联系我

    2024年02月08日
    浏览(42)
  • 【数据库课设】图书馆资源管理系统 源码+流程图+结构设计(借还图书 逾期罚款 图书管理 读者管理 信息查询)python实现

    一个管理员编号对应一个密码,且需要有管理员注册密匙。 可以在图书信息表中录入、修改、删除图书。 可以在图书信息表中查询书籍。 可以编辑图书借阅、归还信息。 可以编辑欠款信息。 可以编辑读者信息表。 图书馆注册,获得读者编号。 可以在图书信息表中查阅书籍

    2024年02月10日
    浏览(50)
  • C++课程设计:图书管理系统【附源码】

    课程设计目的   作为软件工程和计算机科学与技术专业的基本课程,课程设计不仅涵盖了C++语言的知识体系,又与工程的实际需要切实相关。通过课程设计的综合性训练,对开发者解决实际问题能力,编程能力,动手能力有很大的提升,更有助于样成良好的编程习惯。 图

    2024年02月07日
    浏览(39)
  • java项目-图书馆管理系统源码

    作者主页:夜未央5788  简介:Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码   项目介绍 本毕业设计运用了使用技术:spring mvc+spring+hibernate,数据库使用了当前较为流行的Mysql5.7。根据本校图书馆的工作流程与实际的需求和特色,本系统需满足以下几个方

    2024年02月08日
    浏览(48)
  • 用Python实现一个图书管理系统(附带源码)

    目录 一、题目信息 二、分析 三、主函数 四、总结 实现一个图书管理系统,要求有学生信息管理、图书信息管理和图书借阅管理三大功能。 创建一个LMS类 1.学生信息管理:具有添加学生和删除学生两个功能,并将学生存在Student列表中。在删除学生时,如果学生还有未归还书

    2024年02月11日
    浏览(41)
  • 基于Django图书管理系统 毕业设计源码64946

    赠送源码-毕业设计:django图书管理系统 https://www.bilibili.com/video/BV1Dw411J7Uf/?vd_source=72970c26ba7734ebd1a34aa537ef5301 Django图书管理系统 摘  要 大数据时代下,数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为

    2024年01月23日
    浏览(66)
  • 基于HTML的图书管理系统(源码+数据库)

    HTML5作为构造Web内容的语言描述方式和互联网的规范,为网站设计提供了一种全新的思路。将HTML5引入到网站开发领域中,以提高用户体验度,使网站更具有吸引力,增强搜索引擎收录以及增加浏览次数等功能,从而有效地提升企业的竞争优势。 JavaScript技术与HTML技术相结合使

    2024年02月12日
    浏览(42)
  • Java实现一个简单的图书管理系统(内有源码)

    哈喽哈喽大家好啊,之前作者也是讲了Java不少的知识点了,为了巩固之前的知识点再为了让我们深入Java面向对象这一基本特性,就让我们完成一个图书管理系统的小项目吧。 项目简介: 通过管理员和普通用户的两种操作界面,利用其中的方法以及对象之间的交互,来实现对

    2024年02月11日
    浏览(39)
  • 【源码篇】基于SpringBoot+thymeleaf实现的图书管理系统

    系统介绍 基于SpringBoot+thymeleaf实现的图书管理系统分为管理员、读者两个登录角色,一共是8个功能模块 管理员权限 图书管理: 添加图书:书名、作者、出版社、ISBM、简介、价格、出版日期、分类、数量 查询图书:根据书名或分类查询 删除图书:点击删除按钮即可 修改图

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包