前端学习——ajax (Day2)

news2024/10/5 20:26:40

案例 - 图书管理

在这里插入图片描述

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()
   })
 })

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/777582.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小程序分类如何移动顺序

小程序分类如何移动顺序

小程序的分类排序功能可以帮助商家根据自己的需求来调整展示在前端页面上的分类顺序&#xff0c;以便更好地呈现商品和提升用户体验。下面将介绍如何在小程序中进行分类移动顺序的操作步骤。 在小程序管理员后台->分类管理&#xff0c;可以看到所有的分类。 向上移动分类&a…
阅读更多...
基于Go/Grpc/kubernetes/Istio开发微服务的最佳实践尝试

基于Go/Grpc/kubernetes/Istio开发微服务的最佳实践尝试

Jgrpc 本项目为基于 Go/Grpc/kubernetes/Istio 开发微服务的最佳实践提供参考。 并基于 Jenkins/Gitlab/Harbor 实现了CICD。 并使用 grpc-gateway 作为网关代理。 本最佳实践分为三个部分&#xff1a; 创建一个 pingservice 的微服务创建一个 pongservice 的微服务基于Je…
阅读更多...
万宾管网水质监测仪 | 守护城市水生态环境

万宾管网水质监测仪 | 守护城市水生态环境

WITBEE万宾 管网水质监测仪EN400-WQ&#xff0c;新一代城市生命线智能监测仪器&#xff0c;可选 COD、氨氮和电导率等7项组合监测指标&#xff0c;4G无线通信适应地下排水管网极端恶劣环境&#xff0c;3年自供电长续航&#xff01;
阅读更多...
【远程访问】文件同步工具：本地搭建免费开源的Syncthing自动文件同步服务器

【远程访问】文件同步工具：本地搭建免费开源的Syncthing自动文件同步服务器

文章目录 1.前言2. Syncthing网站搭建2.1. Syncthing下载和安装2.2. Syncthing网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据爆炸的当下&#xff0c;每天都会产生海量的数据&#xff0c;这些数据可…
阅读更多...
手劈二叉树

手劈二叉树

二叉树 概念 二叉树是一种常见的树状数据结构&#xff0c;每个节点最多有两个子节点&#xff0c;称为左子节点 和右子节点。它可以为空树&#xff08;没有任何节点&#xff09;&#xff0c;或者由根节点及其子节点组成。特点 具有层级结构&#xff0c;其中顶层的节点被称为根…
阅读更多...
请求头/响应头、POST的使用方法、常用协议状态码

请求头/响应头、POST的使用方法、常用协议状态码

POST请求方法&#xff1a;添加资源 常用的几种数据格式&#xff1a; 1、XML的格式 2、表单数据格式 3、JSON数据格式 请求地址 请求方法 请求头 请求参数 COOKI E&#xff1a; 1、反爬虫 2、身份认证 Referer:请求是从哪个页面发送过来的 User-Agent&#xff1a;通…
阅读更多...
机器学习---经验误差与过拟合、方差与偏差、性能度量、比较检验

机器学习---经验误差与过拟合、方差与偏差、性能度量、比较检验

1. 经验误差与过拟合 第三张图建立的模型&#xff0c;在训练集中通过x可以很好的预测y&#xff0c;然而我们不能预期该模型能够很好的预 测集外的数据&#xff0c;换句话说&#xff0c;这个模型没有很好的泛化能力。 第一张图建立了一个线性模型&#xff0c;但是该模型并没有…
阅读更多...
PHP中常用数组排序算法

PHP中常用数组排序算法

一&#xff1a;冒泡排序 1&#xff1a;算法步骤 比较相邻项的值&#xff0c;如果前者比后者大&#xff0c;交换顺序。 进行一轮比较后&#xff0c;最后一个值为最大的值。 进行下一轮比较&#xff0c;比上次少比较一项。 以此类推&#xff0c;比较剩下最后一项的时候&#…
阅读更多...
【Hive】group by 分组聚合后使用窗口函数

【Hive】group by 分组聚合后使用窗口函数

文章目录 1. group by 分组聚合后使用排序窗口函数1.1 两种思路 与 简单例子1.2 新思路的解释 2. group by 分组聚合后使用聚合窗口函数3. group by 分组聚合后使用分析窗口函数 1. group by 分组聚合后使用排序窗口函数 1.1 两种思路 与 简单例子 group by 之后&#xff0c;…
阅读更多...
AI时代带来的图片造假危机，该如何解决

AI时代带来的图片造假危机，该如何解决

一、前言 当今&#xff0c;图片造假问题非常泛滥&#xff0c;已经成为现代社会中一个严峻的问题。随着AI技术不断的发展&#xff0c;人们可以轻松地通过图像编辑和AI智能生成来篡改和伪造图片&#xff0c;使其看起来真实而难以辨别&#xff0c;之前就看到过一对硕士夫妻为了骗…
阅读更多...
【Linux】进程信号 -- 信号保存与递达 | 信号捕捉 | 僵尸进程的信号处理方法

【Linux】进程信号 -- 信号保存与递达 | 信号捕捉 | 僵尸进程的信号处理方法

阻塞信号信号相关概念内核中的表示sigset_t信号集操作函数sigprocmasksigpending 小实验 - 观察pending表 信号的捕捉流程sigaction1.小实验&#xff1a;如果进程在处理2号信号&#xff0c;那我们继续发送2号信号会怎么样&#xff1f;2.如何正在处理这个信号&#xff0c;同时屏…
阅读更多...
js - 关于防抖和节流函数的使用和细节

js - 关于防抖和节流函数的使用和细节

文章目录 一、什么是防抖二、应用场景三、实现原理1&#xff0c;第一个问题&#xff1a;为什么使用了闭包&#xff08;也就是说timer为什么定义到了外面&#xff09;2&#xff0c;第二个问题&#xff1a;防抖函数中this的指向问题&#xff1a; 四、节流函数 一、什么是防抖 事…
阅读更多...
【【51单片机的I2C总线】】

【【51单片机的I2C总线】】

51单片机的I2C总线 学会总线&#xff0c;掌控芯片。了解串口&#xff0c;真理全有。 I&#xff12;C时序 &#xff11;.起始条件&#xff1a;　 SCL在高电平期间&#xff0c;SDA从高电平切换到低电平 终止条件&#xff1a; SCL在高电平期间&#xff0c;SDA从低电平切换为高电…
阅读更多...
【go语言学习笔记】01 Go语言快速入门

【go语言学习笔记】01 Go语言快速入门

文章目录 一、基础入门1. 示例程序2. 安装与环境变量设置3. 项目构建和编译发布3.1 go build和go install对比3.2 跨平台编译 二、数据类型1. 基础类型1.1 整型1.2 浮点数1.3 布尔型1.4 字符串1.5 零值 2. 变量2.1 变量声明2.1.1 指定变量类型2.1.2 根据值自行判定变量类型2.1.…
阅读更多...
深入学习 Redis - 深挖经典数据类型之 list

深入学习 Redis - 深挖经典数据类型之 list

目录 前言 一、list 类型 1.1、操作命令 lpush / rpush&#xff08;插入元素&#xff09; lrange&#xff08;查看范围元素&#xff09; lpushx / rpushx &#xff08;有约束的插入&#xff09; lpop / rpop&#xff08;头删尾删&#xff09; lindex&#xff08;获取下…
阅读更多...
2023年第三届能源、电力与电气工程国际会议 (CoEEPE 2023)

2023年第三届能源、电力与电气工程国际会议 (CoEEPE 2023)

会议简介 Brief Introduction 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023) 会议时间&#xff1a;2023年11月22日-24日 召开地点&#xff1a;澳大利亚墨尔本 大会官网&#xff1a;www.coeepe.org 2023年第三届能源、电力与电气工程国际会议(CoEEPE 2023)由安徽大学、…
阅读更多...
使用GGML和LangChain在CPU上运行量化的llama2

使用GGML和LangChain在CPU上运行量化的llama2

Meta AI 在本周二发布了最新一代开源大模型 Llama 2。对比于今年 2 月发布的 Llama 1&#xff0c;训练所用的 token 翻了一倍&#xff0c;已经达到了 2 万亿&#xff0c;对于使用大模型最重要的上下文长度限制&#xff0c;Llama 2 也翻了一倍。 在本文&#xff0c;我们将紧跟趋…
阅读更多...
JavaScript基础语法及小案例

JavaScript基础语法及小案例

目录 JavaScript基础语法1. 变量声明和赋值2. 数据类型1) 基本数据类型2) 复合数据类型(引用类型)3) 特殊数据类型 3. 运算符1) 算术运算符2) 赋值运算符3) 比较运算符4) 逻辑运算符5) 三元运算符 4. 控制流程1) 条件语句2) 循环语句 5. 函数1) 函数的基本使用① 什么是函数② …
阅读更多...
DXFReader.NET 2023 Crack

DXFReader.NET 2023 Crack

DXFReader.NET 是一个 .NET 组件&#xff0c;允许直接从 AutoCAD 图形文件格式 DXF&#xff08;也称为图形交换格式&#xff09;查看、操作和打印。 DXFReader.NET 之 DXF 是 Drawing eXchange Format 的首字母缩写。DXF 是图形文件内容的复制&#xff0c;支持将文件从一个 CA…
阅读更多...
机器学习深度学习——预备知识（上）

机器学习深度学习——预备知识（上）

深大的夏令营已经结束&#xff0c;筛选入营的保研er就筛选了1/3&#xff0c;280多的入营总人数里面双非只有30左右。 最终虽然凭借机试拿到offer了&#xff0c;但是我感受到了自己的明显短板&#xff0c;比如夏令营的舍友就都有一篇核心论文&#xff0c;甚至还有SCI一区一作的。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023