网站空间怎么续费,低代码开发软件,为什么要建微信网站,装修图片效果图 现代简约目录 1. HTML 部分#xff08;前端页面结构#xff09;
HTML 结构解析#xff1a;
2. JavaScript 部分#xff08;信息渲染逻辑#xff09;
JavaScript 解析#xff1a;
3. 完整流程
4. 总结
5. 适用场景 本文将介绍如何通过 Axios 从服务器获取用户信息#xff0…目录 1. HTML 部分前端页面结构
HTML 结构解析
2. JavaScript 部分信息渲染逻辑
JavaScript 解析
3. 完整流程
4. 总结
5. 适用场景 本文将介绍如何通过 Axios 从服务器获取用户信息并将这些信息动态渲染到个人信息设置页面。用户可以通过表单来查看和更新他们的资料如邮箱、昵称、性别、个人简介等。为了更直观地理解本文提供了完整的 HTML 和 JavaScript 示例代码用户可以直接复制并使用。 1. HTML 部分前端页面结构
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.2.3/dist/css/bootstrap.min.css relstylesheetlink relstylesheet href./css/index.csstitle个人信息设置/title
/head
body!-- toast 提示框 --div classtoast my-toast data-bs-delay1500div classtoast-bodydiv classalert alert-success info-box操作成功/div/div/div!-- 核心内容区域 --div classcontainerul classmy-navli classactive基本设置/lili安全设置/lili账号绑定/lili新消息通知/li/uldiv classcontentdiv classinfo-wraph3 classtitle基本设置/h3form classuser-form actionjavascript:;div classform-itemlabel foremail邮箱/labelinput idemail nameemail classemail typetext placeholder请输入邮箱 autocompleteoff/divdiv classform-itemlabel fornickname昵称/labelinput idnickname namenickname classnickname typetext placeholder请输入昵称 autocompleteoff/divdiv classform-itemlabel性别/labellabel classmale-labelinput typeradio namegender classgender value0男/labellabel classmale-labelinput typeradio namegender classgender value1女/label/divdiv classform-itemlabel fordesc个人简介/labeltextarea iddesc namedesc classdesc placeholder请输入个人简介 cols20 rows10 autocompleteoff/textarea/divbutton classsubmit提交/button/form/divdiv classavatar-boxh4 classavatar-title头像/h4img classprew src./img/头像.png altlabel forupload更换头像/labelinput idupload typefile classupload/div/div/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.2.3/dist/js/bootstrap.min.js/scriptscript src./lib/form-serialize.js/scriptscript src./js/index.js/script
/body
/htmlHTML 结构解析
页面头部使用了 Bootstrap CSS 样式库和自定义样式设置了页面的基本样式。toast 提示框用于在操作成功时显示提示消息。个人信息表单包括邮箱、昵称、性别单选框、个人简介等输入项用户可以编辑这些信息。头像更换部分用户可以选择新头像并上传通过 input typefile 实现文件选择。按钮与提示框提交表单后页面会弹出一个提示框显示操作是否成功。 2. JavaScript 部分信息渲染逻辑
/*** 目标1信息渲染* 1.1 获取用户的数据* 1.2 回显数据到标签上*/axios({url: http://hmajax.itheima.net/api/settings, // 确保 URL 是正确的method: get, // GET 请求方法params: {creator: 小宁 // 请求参数假设是根据用户名获取设置}
}).then(result {const userObj result.data.data; // 假设返回的数据结构是 { data: { ... } }console.log(userObj);// 1. 遍历用户数据并渲染到页面Object.keys(userObj).forEach(key {if (key avatar) {// 设置头像document.querySelector(.prew).src userObj[key];} else if (key gender) {// 设置性别const RadioList document.querySelectorAll(.gender);const gNum userObj[key]; // 性别值是 0 或 1RadioList[gNum].checked true; // 根据性别值选择相应的单选框} else {// 对其他字段如姓名、邮箱、简介等设置值document.querySelector(.${key}).value userObj[key];}});
}).catch(error {console.error(请求失败:, error); // 错误处理
});JavaScript 解析
发送 GET 请求 使用 axios 发送 GET 请求params 参数传递给服务器以获取用户设置数据。这里以 creator: 小宁 为请求参数表示获取小宁的用户设置。 遍历并渲染数据 Object.keys(userObj) 获取返回数据的所有字段名。根据不同字段渲染到页面 头像如果字段名为 avatar则通过 document.querySelector(.prew) 获取头像图片元素更新其 src 属性。性别如果字段名为 gender根据返回的性别值0 或 1更新相应的单选框。其他字段通过 document.querySelector(\.${key})获取相应的输入框或文本区域并设置其value 为返回的数据值。 错误处理 使用 .catch() 捕获请求中的任何错误方便调试。 3. 完整流程
页面加载时JavaScript 发送 GET 请求至服务器获取小宁的用户数据。服务器返回的数据后JavaScript 将数据逐个渲染到页面上的输入框、单选框、头像等元素。用户可以查看和编辑个人信息修改内容后可以提交表单。 4. 总结
这个示例展示了如何使用 Axios 从服务器获取用户的个人设置并将这些设置动态渲染到 HTML 页面中。使用这种方法可以轻松实现用户资料显示和编辑功能并通过简单的表单更新用户数据。 5. 适用场景
个人信息设置页面用户可以查看和修改自己的信息如邮箱、昵称、性别等。用户资料展示适用于展示用户信息并允许编辑的场景如社交网站、论坛等。后台管理系统管理员可以通过类似的方法展示并更新用户资料。
通过这个简单的代码示例你可以轻松实现一个功能完备的个人资料管理页面提升用户体验。
