前端学习——ajax (Day2)

最新推荐文章于 2024-07-08 18:51:22 发布

肉松拿铁

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量148

点赞数

分类专栏：前端文章标签：前端学习 ajax

本文链接：https://blog.csdn.net/qq_46574748/article/details/131802035

版权

前端专栏收录该内容

40 篇文章 0 订阅

订阅专栏

案例 - 图书管理

在这里插入图片描述

Bootstrap 弹框

在这里插入图片描述

modal官方文档

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 弹框</title>
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- 
    目标：使用Bootstrap弹框
    1. 引入bootstrap.css 和 bootstrap.js
    2. 准备弹框标签，确认结构
    3. 通过自定义属性，控制弹框的显示和隐藏
   -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
    显示弹框
  </button>

  <!-- 弹窗标签 
       bootstrap的modal弹窗标签：添加modal类名（默认隐藏）
  -->
  <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>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 弹框</title>
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- 
    目标：使用JS控制弹框，显示和隐藏
    1. 创建弹框对象
    2. 调用弹框对象内置方法
      .show() 显示
      .hide() 隐藏
   -->
  <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>
    const modalDom = document.querySelector('.name-box')
    const modal = new bootstrap.Modal(modalDom)

    // 编辑姓名->点击->默认姓名->弹框显示
    document.querySelector('.edit-btn').addEventListener('click',()=>{
      document.querySelector('.username').value = '默认姓名'
      // 显示弹窗
      modal.show()
    })

    // 保存->点击->获取姓名->弹窗隐藏
    document.querySelector('.save-btn').addEventListener('click',()=>{
      const username = document.querySelector('.username').value
      console.log('振华',username)
      // 隐藏弹窗
      modal.hide()
    })
  </script>

</body>

</html>

在这里插入图片描述

图书管理 - 渲染列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-图书管理</title>
  <!-- 字体图标 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <style>
    /* 公共*/
    html,
    body {
      width: 100%;
      height: 100%;
    }

    .container {
      width: 1340px;
      margin: 0 auto;
      padding-top: 60px;
      box-sizing: border-box;
    }

    /* alert提示框 */
    .toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
    }

    .toast .toast-body {
      padding: 0 !important;
    }

    .toast .alert-success {
      margin-bottom: 0 !important;
    }

    /* 头部导航 */
    .container .top {
      display: flex;
      justify-content: space-between;
    }

    .container .top h3 {
      font-weight: 900;
    }

    .container .top .plus-btn {
      background-color: #539ACB !important;
      color: #fff;
      border: none;
    }

    /* 表格部分 */
    .table {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
    }

    .table-light th {
      background-color: #939CA7 !important;
      color: #ffffff;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      text-align: center;
      font-weight: 500;
      border-right: 1px solid lightgray;
    }

    .table-light th:last-of-type {
      border-right: none;
    }

    /* 表格内容 */
    .table tbody td {
      color: #696F77;
    }

    .table .del {
      color: #E5964C;
      margin-right: 30px;
    }

    .table .edit {
      color: #539ACB;
    }

    .table tbody tr {
      height: 30px;
      line-height: 30px;
    }

    .table tbody tr td:last-of-type span {
      cursor: pointer;
    }

    /* 弹出层 */
    .modal .top {
      display: flex;
      justify-content: center;
      background-color: #F0F3F7;
      padding: 15px 0;
      width: 100%;
      position: relative;
      color: #1E2023;
    }

    /* 右上角-关闭按钮 */
    .modal .btn-close {
      font-size: 12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 23px;
      /* 覆盖bootstrap样式 */
      margin: 0;
      padding: 0;
    }

    /* 表单容器 */
    .form-wrap {
      box-sizing: border-box;
      background-color: white;
      padding: 40px;
    }

    .form-wrap .form-label {
      color: #696F77;
    }

    /* 修改输入框默认占位文字
    webkit内核, firefox18-, firfox19+, 其他
    */
    .form-wrap input::-webkit-input-placeholder {
      color: #BFBFBF !important;
      font-size: 14px;
    }


    /* 底部按钮组 */
    .modal-footer {
      border-top: 0;
    }

    .btn-group {
      text-align: center;
      width: 100%;
    }

    /* 修改bs的按钮弹性布局-改成自己设置大小 */
    .btn-group,
    .btn-group-vertical {
      display: block;
    }

    .btn-group button {
      width: 120px
    }

    .btn-group button:first-of-type {
      border: 1px solid #E3E3E3;
      background-color: #fff;
      color: black;
      margin-right: 60px;
    }

    .btn-group button:last-of-type {
      background-color: #539ACB;
    }

    .alert-success {
      border-color: transparent;
    }

    .toast {
      border: none;
    }
  </style>
</head>

<body>
  <!-- 主体区域 -->
  <div class="container">
    <!-- 头部标题和添加按钮 -->
    <div class="top">
      <h3>图书管理</h3>
      <button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal"> + 添加
      </button>
    </div>
    <!-- 数据列表 -->
    <table class="table">
      <thead class="table-light">
        <tr>
          <th style="width: 150px;">序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th style="width: 180px;">操作</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td>1</td>
          <td>JavaScript程序设计</td>
          <td>马特·弗里斯比</td>
          <td>人民邮电出版社</td>
          <td>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- 新增-弹出框 -->
  <div class="modal fade add-modal">
    <!-- 中间白色区域 -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header top">
          <span>添加图书</span>
          <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body form-wrap">
          <!-- 新增表单 -->
          <form class="add-form">
            <div class="mb-3">
              <label for="bookname" class="form-label">书名</label>
              <input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
            </div>
            <div class="mb-3">
              <label for="author" class="form-label">作者</label>
              <input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
            </div>
            <div class="mb-3">
              <label for="publisher" class="form-label">出版社</label>
              <input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
            </div>
          </form>
        </div>
        <div class="modal-footer btn-group">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
          <button type="button" class="btn btn-primary add-btn"> 保存 </button>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑-弹出框 -->
  <div class="modal fade edit-modal">
    <!-- 中间白色区域 -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header top">
          <span>编辑图书</span>
          <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body form-wrap">
          <!-- 编辑表单 -->
          <form class="edit-form">
            <input type="hidden" class="id" name="id">
            <div class="mb-3">
              <label for="bookname" class="form-label">书名</label>
              <input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
            </div>
            <div class="mb-3">
              <label for="author" class="form-label">作者</label>
              <input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
            </div>
            <div class="mb-3">
              <label for="publisher" class="form-label">出版社</label>
              <input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
            </div>
          </form>
        </div>
        <div class="modal-footer btn-group">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button>
          <button type="button" class="btn btn-primary edit-btn"> 修改 </button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
  <!-- 核心逻辑 -->
  <script src="./ajax+nodejs+webpack+git/ajax/Day02_AJAX综合案例/04-素材（模板代码）/02.案例_图书管理/js/index.js"></script>
</body>

</html>

index.js
/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
// 封装-获取并渲染图书列表函数
const creator = '林杨'
function getBooksList() { 
    // 1.1 获取数据
    axios({
        url:'http://hmajax.itheima.net/api/books',
        params:{
            creator:creator
        }
    }).then(result=>{
        console.log(result)
        const bookList = result.data.data
        console.log(result.data.data)
        // 渲染数据
        const htmlStr = bookList.map((item,index) => {
            return `<tr>
            <td>${1+index}</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()

在这里插入图片描述

图书管理 - 新增图书

在这里插入图片描述

index.js
/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
// 封装-获取并渲染图书列表函数
const creator = '林杨'
function getBooksList() {
    // 1.1 获取数据
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
            creator: creator
        }
    }).then(result => {
        console.log(result)
        const bookList = result.data.data
        console.log(result.data.data)
        // 渲染数据
        const htmlStr = bookList.map((item, index) => {
            return `<tr>
            <td>${1 + index}</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('')
        document.querySelector('.list').innerHTML = htmlStr
    })
}

//  网页加载运行，获取并渲染一次
getBooksList()

/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->获取姓名->弹窗隐藏
document.querySelector('.add-btn').addEventListener('click', () => {
    // 2.2 收集表单数据，并提交到服务器保存
    const addForm = document.querySelector('.add-form')
    const bookObj = serialize(addForm, { hash: true, empty: true })
    // 提交到服务器
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
            ...bookObj,
            creator
        }
    }).then(result => {
        console.log(results)
        // 2.3 添加成功后，重新请求并渲染列表
        getBooksList()
        // 重置表单
        addForm.reset()
    })
    // 隐藏弹窗
    addModal.hide()

})

在这里插入图片描述

图书管理 - 删除图书

在这里插入图片描述

图书管理 - 编辑图书

在这里插入图片描述

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
// 封装-获取并渲染图书列表函数
const creator = '林杨'
function getBooksList() {
    // 1.1 获取数据
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
            creator: creator
        }
    }).then(result => {
        console.log(result)
        const bookList = result.data.data
        // console.log(result.data.data)
        // 渲染数据
        const htmlStr = bookList.map((item, index) => {
            return `<tr>
            <td>${1 + index}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td data-id=${item.id}>
              <span class="del">删除</span>
              <span class="edit">编辑</span>
            </td>
          </tr>`
        }).join('')
        document.querySelector('.list').innerHTML = htmlStr
    })
}

//  网页加载运行，获取并渲染一次
getBooksList()

/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->获取姓名->弹窗隐藏
document.querySelector('.add-btn').addEventListener('click', () => {
    // 2.2 收集表单数据，并提交到服务器保存
    const addForm = document.querySelector('.add-form')
    const bookObj = serialize(addForm, { hash: true, empty: true })
    // 提交到服务器
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
            ...bookObj,
            creator
        }
    }).then(result => {
        console.log(result)
        // 2.3 添加成功后，重新请求并渲染列表
        getBooksList()
        // 重置表单
        addForm.reset()
    })
    // 隐藏弹窗
    addModal.hide()
})

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */
// 3.1 删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {
    // 获取触发事件目标元素
    if (e.target.classList.contains('del')) {
        // 获取图书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(() => {
            // 刷新图书列表
            getBooksList()
        })
    }
})


/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
// 4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {
    // 判断点击的是否为编辑元素
    if (e.target.classList.contains('edit')) {
        // 4.2 获取当前编辑图书数据->回显到编辑表单中
        const theId = e.target.parentNode.dataset.id
        axios({
            url: `http://hmajax.itheima.net/api/books/${theId}`
        }).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]
            })
        })
        editModal.show()
    }
})
// 修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', () => {
    // 4.3 提交保存修改，并刷新列表
    const editForm = document.querySelector('.edit-form')
    const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
    // 保存正在编辑的图书id，隐藏起来：无需让用户修改
    // <input type="hidden" class="id" name="id" value="84783">
    axios({
        url: `http://hmajax.itheima.net/api/books/${id}`,
        method: 'PUT',
        data: {
            bookname,
            author,
            publisher,
            creator
        }
    }).then(() => {
        // 修改成功以后，重新获取并刷新列表
        getBooksList()
        // 隐藏弹窗
        editModal.hide()
    })
})

图片上传

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传</title>
</head>

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：图片上传，显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器，获取图片url网址使用
    */
  //  文件选择元素->change改变事件
  document.querySelector('.upload').addEventListener('change',e=>{
    // 获取图片文件
    // e.target.files[0]
    // 使用FormData携带图片文件
    const fd = new FormData(e.target.files[0])
    fd.append('img',)
    // 提交到服务器，获取图片url网址使用
    axios({
      url:'http://hmajax.itheima.net/api/uploadimg',
      method:'POST',
      data:fd
    }).then(result=>{
      console.log(result)
      // 去除图片url网址，用img标签加载显示
      const imgUrl = result.data.data.url
      document.querySelector('my-img').src=imgUrl
    })
  })
    
  </script>
</body>

</html>

网站-更换背景

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站-更换背景</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 核心样式 -->
  <style>
    html,
    body {
      height: 100%;
      font-size: 14px;
    }

    .nav {
      height: 60px;
      background: rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }

    .nav ul {
      display: flex;
    }

    .nav ul li {
      margin-right: 10px;
      cursor: pointer;
    }

    .nav ul li a {
      color: white;
      text-decoration: none;
    }

    .nav .right label {
      background: #edf2f5;
      padding: 5px 10px;
      border-radius: 10px;
      font-size: 12px;
      cursor: pointer;
    }

    .nav .right input {
      display: none;
    }

    .search-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .search-container .search-box {
      display: flex;
    }

    .search-container img {
      margin-bottom: 30px;
    }


    .search-container .search-box input {
      width: 512px;
      height: 16px;
      padding: 12px 16px;
      font-size: 16px;
      margin: 0;
      vertical-align: top;
      outline: 0;
      box-shadow: none;
      border-radius: 10px 0 0 10px;
      border: 2px solid #c4c7ce;
      background: #fff;
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
    }

    .search-container .search-box button {
      cursor: pointer;
      width: 112px;
      height: 44px;
      line-height: 41px;
      line-height: 42px;
      background-color: #ad2a27;
      border-radius: 0 10px 10px 0;
      font-size: 17px;
      box-shadow: none;
      font-weight: 400;
      border: 0;
      outline: 0;
      letter-spacing: normal;
      color: white;
    }

    body {
      background: no-repeat center /cover;
      background-color: #edf0f5;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="nav">
      <div class="left">
        <ul>
          <li><a href="http://yun.itheima.com/?webzly" target="_blank" rel="nofollow">免费教程</a></li>
          <li><a href="http://resource.ityxb.com/booklist/?webzly" target="_blank" rel="nofollow">原创书籍</a></li>
          <li><a href="http://www.itheima.com/teacher.html?webzly#ajavaee" target="_blank" rel="nofollow">教研团队</a></li>
          <li><a href="http://www.itheima.com/special/hmschool/index.shtml?webzly" target="_blank"
              rel="nofollow">校区汇总</a></li>
          <li><a href="http://www.itheima.com/flow/flow.html?webzly" target="_blank" rel="nofollow">报名流程</a></li>
          <li><a href="https://pip.itcast.cn?hmgw$webzly" target="_blank" rel="nofollow">项目信息站</a></li>
          <li><a href="http://bbs.itheima.com/forum.php?webzly" target="_blank" rel="nofollow">技术社区</a></li>
        </ul>
      </div>
      <div class="right">
        <label for="bg">更换背景</label>
        <input class="bg-ipt" type="file" id="bg">
      </div>
    </div>
    <div class="search-container">
      <img src="https://www.itheima.com/images/logo.png" alt="">
      <div class="search-box">
        <input type="text">
        <button>搜索一下</button>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <!-- 核心代码 -->
  <script>
    /**
 * 目标：网站-更换背景
 *  1. 选择图片上传，设置body背景
 *  2. 上传成功时，"保存"图片url网址
 *  3. 网页运行后，"获取"url网址使用
 * */
    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 imgUrl = result.data.data.url
        document.body.style.backgroundImage = `url(${imgUrl})`

        // 2. 上传成功时，"保存"图片url网址
        localStorage.setItem('bgImg', imgUrl)
      })
    })
    // 3. 网页运行后，"获取"url网址使用
    const bgUrl = localStorage.getItem('bgImg')
    console.log(bgUrl)
    // 本地有背景图才设置
    bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)
  </script>
</body>

</html>

在这里插入图片描述

个人信息设置

在这里插入图片描述

个人信息设置 - 信息渲染

在这里插入图片描述

js.html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>个人信息设置</title>
</head>

<body>
  <!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-delay="1500">
    <div class="toast-body">
      <div class="alert alert-success info-box">
        操作成功
      </div>
    </div>
  </div>
  <!-- 核心内容区域 -->
  <div class="container">
    <ul class="my-nav">
      <li class="active">基本设置</li>
      <li>安全设置</li>
      <li>账号绑定</li>
      <li>新消息通知</li>
    </ul>
    <div class="content">
      <div class="info-wrap">
        <h3 class="title">基本设置</h3>
        <form class="user-form" action="javascript:;">
          <div class="form-item">
            <label for="email">邮箱</label>
            <input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off">
          </div>
          <div class="form-item">
            <label for="nickname">昵称</label>
            <input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
          </div>
          <div class="form-item">
            <label>性别</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label>
          </div>
          <div class="form-item">
            <label for="desc">个人简介</label>
            <textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea>
          </div>
          <button class="submit">提交</button>
        </form>
      </div>
      <div class="avatar-box">
        <h4 class="avatar-title">头像</h3>
          <img class="prew" src="./img/头像.png" alt="">
          <label for="upload">更换头像</label>
          <input id="upload" type="file" class="upload">
      </div>

    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <!-- 核心逻辑 -->
  <script src="./js/index.js"></script>
</body>

</html>

index.js
/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
 const creator = '播仔'
 // 1.1 获取用户的数据
 axios({
   url: 'http://hmajax.itheima.net/api/settings',
   params: {
     creator
   }
 }).then(result => {
   const userObj = result.data.data
   // 1.2 回显数据到标签上
   Object.keys(userObj).forEach(key => {
     if (key === 'avatar') {
       // 赋予默认头像
       document.querySelector('.prew').src = userObj[key]
     } else if (key === 'gender') {
       // 赋予默认性别
       // 获取性别单选框：[男radio元素，女radio元素]
       const gRadioList = document.querySelectorAll('.gender')
       // 获取性别数字：0男，1女
       const gNum = userObj[key]
       // 通过性别数字，作为下标，找到对应性别单选框，设置选中状态
       gRadioList[gNum].checked = true
     } else {
       // 赋予默认内容
       document.querySelector(`.${key}`).value = userObj[key]
     }
   })
 })
 
 /**
  * 目标2：修改头像
  *  2.1 获取头像文件
  *  2.2 提交服务器并更新头像
  * */
 // 文件选择元素->change事件
 document.querySelector('.upload').addEventListener('change', e => {
   // 2.1 获取头像文件
   console.log(e.target.files[0])
   const fd = new FormData()
   fd.append('avatar', e.target.files[0])
   fd.append('creator', creator)
   // 2.2 提交服务器并更新头像
   axios({
     url: 'http://hmajax.itheima.net/api/avatar',
     method: 'PUT',
     data: fd
   }).then(result => {
     const imgUrl = result.data.data.avatar
     // 把新的头像回显到页面上
     document.querySelector('.prew').src = imgUrl
   })
 })
 
 /**
  * 目标3：提交表单
  *  3.1 收集表单信息
  *  3.2 提交到服务器保存
  */
 /**
  * 目标4：结果提示
  *  4.1 创建toast对象
  *  4.2 调用show方法->显示提示框
  */
 // 保存修改->点击
 document.querySelector('.submit').addEventListener('click', () => {
   // 3.1 收集表单信息
   const userForm = document.querySelector('.user-form')
   const userObj = serialize(userForm, { hash: true, empty: true })
   userObj.creator = creator
   // 性别数字字符串，转成数字类型
   userObj.gender = +userObj.gender
   console.log(userObj)
   // 3.2 提交到服务器保存
   axios({
     url: 'http://hmajax.itheima.net/api/settings',
     method: 'PUT',
     data: userObj
   }).then(result => {
     // 4.1 创建toast对象
     const toastDom = document.querySelector('.my-toast')
     const toast = new bootstrap.Toast(toastDom)
 
     // 4.2 调用show方法->显示提示框
     toast.show()
   })
 })

在这里插入图片描述

肉松拿铁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——ajax (Day2)

案例 - 图书管理Bootstrap 弹框modal官方文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫