网站开发包括网站设计,外贸营销模板,电脑买编程代码做网站,装修设计公司平台AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点#xff1a;label扩大表单的范围 AJAX 2 综合案例
黑… AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点label扩大表单的范围 AJAX 2 综合案例
黑马 API
传送门 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
01 图书管理 Bootstrap 官网
中文网https://www.bootcss.com/ Bootstrap引入https://getbootstrap.com/
link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css relstylesheet integritysha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hWALEwIH crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/js/bootstrap.bundle.min.js integritysha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossoriginanonymous/scriptBootstrap 弹框
功能 不离开当前页面显示单独内容供用户操作
通过属性控制弹框显示或隐藏 使用场景单纯显示/隐藏通过 JS 控制弹框显示或隐藏 额外逻辑代码
步骤
引入 bootstrap.css 和 bootstrap.js准备弹框标签确认结构通过自定义属性控制弹框的显示和隐藏
Bootstrap引入有两种方法① 是本地方式引入Bootstrap在官网下载之后 在HTML文件中引入
② 通过CDN引用Bootstrap。
黑马程序员这个视频是使用 jsdelivr 这个CDN进行引入。JSDelivr是一款开源的免费公共CDN。它是目前第二受欢迎的公共CDN。2020年10月14日JSDelivr成为Bootstrap的官方CDN。 https://getbootstrap.com/ 图书管理-渲染列表
自己的图书数据给自己起个外号并告诉服务器每个人的图书数据都不一样默认会有三本书基于这三本书做数据的增删改查
图书管理-添加图书
点击添加按钮弹框添加/取消渲染页面
图书管理-删除图书
绑定点击事件获取图书ID调用删除接口刷新-图书列表
图书管理 - 编辑图书
编辑图书-弹框显示隐藏表单数据回显保存修改刷新列表
要从服务器中获取不能直接从表单里拿
02 图片上传
1、获取图片文件对象
2、使用 FormData 携带图片文件
const fd new FormData()
fd.append(参数名值)
这里的参数名与接口文档中定义的 img 保持一致
参数名字一定要写单引号fd.append(avatar, e.target.files[0])fd.append(creator, creator)3、提交表单数据到服务器使用图片 url 网址
body!-- 文件选择元素 --input typefile classuploadimg src alt classmyImgscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标图片上传显示到网页上* 1. 获取图片文件* 2. 使用 FormData 携带图片文件* 3. 提交到服务器获取图片url网址使用*/// 文件选择元素change改变事件document.querySelector(.upload).addEventListener(change,e {// 获取图片文件console.log(e.target);console.log(e.target.files);console.log(e.target.files[0]);// 使用 FormData 携带图片文件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 {console.log(result);const imgURL result.data.data.urldocument.querySelector(.myImg).src imgURL})})/script
/body
03 更换图片
表单关联label和input的值关联这样点击label 就能触发表单 04 个人信息设置
步骤
信息渲染头像修改信息修改 提交表单结果提示
怎么分析步骤网址一打开首先肯定要渲染页面然后再分析修改功能
信息渲染
自己的用户信息给自己起个外号并告诉服务器获取对应的用户信息
获取数据渲染信息
头像修改
获取到用户选择的头像文件提交到服务器返回服务器上 图片的URL网址 渲染
补充知识点label扩大表单的范围
label 扩大表单的范围用 label 中for属性的值关联了 input 表单里面 ID的值所以点在 label 上就等于点在了文件选择表单上
