前端学习——ajax (Day1)

news2025/2/3 4:59:41

AJAX 概念和 axios 使用

在这里插入图片描述
在这里插入图片描述

axios 使用

在这里插入图片描述
练习
在这里插入图片描述

<!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>Document</title>
</head>

<body>
  <p class="my-p"></p>
   <!-- 1. 引入axios库 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    // 2.使用axios函数
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result =>{
      // console.log(result.data.list.join('<br>'))

      // 把准备好省份列表插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

认识 URL

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
练习
在这里插入图片描述

<!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>2.认识URL</title>
</head>

<body>
  <!-- 
    新闻数据地址: http://hmajax.itheima.net/api/news
  -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url:'http://hmajax.itheima.net/api/news'
    }).then(result =>{
      console.log(result)
    })
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

URL 查询参数

在这里插入图片描述
在这里插入图片描述

<!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>03.查询参数</title>
</head>
<body>
  <p></p>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url:'http://hmajax.itheima.net/api/city',
      params:{
        pname:'吉林省'
      }
    }).then(result=>{
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </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>04.案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */

    // 1. 查询按钮-点击事件
    document.querySelector('.sel-btn').addEventListener('click', () => {
      // 2. 获取省份和城市名字
      let pName = document.querySelector('.province').value
      let cName = document.querySelector('.city').value

      // 3. 基于axios请求地区列表数据
      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname: pName,
          cname: cName
        }
      }).then(result => {
        let list = result.data.list
        console.log(list)
        let theLi = list.map(areaName=>`<li class="list-group-item">${areaName}</li>`)
        console.log(theLi)
        document.querySelector('.list-group').innerHTML = theLi
      })
    })



  </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>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户：http://hmajax.itheima.net/api/register
      请求方法：POST
      参数名：
        username：用户名（中英文和数字组成，最少8位）
        password：密码  （最少6位）

      目标：点击按钮，通过axios提交用户和密码，完成注册
    */
    document.querySelector('.btn').addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'itheima1238',
          password: '7654321'
        }
      })
    })
  </script>
</body>

</html>

在这里插入图片描述

axios 错误处理

在这里插入图片描述
在这里插入图片描述

<!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>axios错误处理</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
      需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户
    */
   document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
   })
  </script>
</body>

</html>

在这里插入图片描述

HTTP 协议－请求报文

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

接口文档

在这里插入图片描述

https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

在这里插入图片描述

案例－用户登录

在这里插入图片描述

<!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>
  <!-- 引入bootstrap.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <!-- 公共 -->
  <style>
    html,
    body {
      background-color: #EDF0F5;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 520px;
      height: 540px;
      background-color: #fff;
      padding: 60px;
      box-sizing: border-box;
    }

    .container h3 {
      font-weight: 900;
    }
  </style>
  <!-- 表单容器和内容 -->
  <style>
    .form_wrap {
      color: #8B929D !important;
    }

    .form-text {
      color: #8B929D !important;
    }
  </style>
  <!-- 提示框样式 -->
  <style>
    .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success" role="alert">
      提示消息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form>
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    // 2.1 获取提示框
    const myAlert = document.querySelector('.alert')
    /**
     * 2.2 封装提示框函数，重复调用，满足提示需求
     * 功能：
     * 1. 显示提示框
     * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
     * 3. 过2秒后，让提示框自动消失
    */
    function alertFn(msg, isSuccess) {
      // 1> 显示提示框
      myAlert.classList.add('show')

      // 2> 实现细节
      myAlert.innerText = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)

      // 3> 过2秒隐藏
      setTimeout(() => {
        myAlert.classList.remove('show')
        // 提示：避免类名冲突，重置背景色
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }
    
    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 1.2 获取用户名和密码
      const username = document.querySelector('.username').value
      const password = document.querySelector('.password').value
      // console.log(username, password)

      // 1.3 判断长度
      if (username.length < 8) {
        alertFn('用户名必须大于等于8位', false)
        console.log('用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        alertFn('密码必须大于等于6位', false)
        console.log('密码必须大于等于6位')
        return // 阻止代码继续执行
      }

      // 1.4 基于axios提交用户名和密码
      // console.log('提交数据到服务器')
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(result => {
        alertFn(result.data.message, true)
        console.log(result)
        console.log(result.data.message)
      }).catch(error => {
        alertFn(error.response.data.message, false)
        console.log(error)
        console.log(error.response.data.message)
      })
    })
  </script>
</body>

</html>

在这里插入图片描述

form-serialize 插件

在这里插入图片描述

在这里插入代码片<!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>form-serialize插件使用</title>
</head>

<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1. 把插件引入到自己网页中
  -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      /**
       * 2. 使用serialize函数，快速收集表单元素的值
       * 参数1：要获取哪个表单的数据
       *  表单元素设置name属性，值会作为对象的属性名
       *  建议name属性的值，最好和接口文档参数名一致
       * 参数2：配置对象
       *  hash 设置获取数据结构
       *    - true：JS对象（推荐）一般请求体里提交给服务器
       *    - false: 查询字符串
       *  empty 设置是否获取空值
       *    - true: 获取空值（推荐）数据结构和标签结构一致
       *    - false：不获取空值
      */
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      // const data = serialize(form, { hash: false, empty: true })
      // const data = serialize(form, { hash: true, empty: false })
      console.log(data)
    })
  </script>
</body>

</html>```

### 案例![在这里插入图片描述](https://img-blog.csdnimg.cn/8106d28b8fb249bab9a28b4975567a83.png)

```javascript
<!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>
  <!-- 引入bootstrap.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <!-- 公共 -->
  <style>
    html,
    body {
      background-color: #EDF0F5;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 520px;
      height: 540px;
      background-color: #fff;
      padding: 60px;
      box-sizing: border-box;
    }

    .container h3 {
      font-weight: 900;
    }
  </style>
  <!-- 表单容器和内容 -->
  <style>
    .form_wrap {
      color: #8B929D !important;
    }

    .form-text {
      color: #8B929D !important;
    }
  </style>
  <!-- 提示框样式 -->
  <style>
    .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success" role="alert">
      提示消息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form class="login-form">
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username" name="username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password" name="password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <!-- 3.1 引入插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    // 目标3：使用form-serialize插件，收集用户名和密码

    // 2.1 获取提示框
    const myAlert = document.querySelector('.alert')
    /**2.2 封装提示框函数，重复调用，满足提示需求
     * 功能：
     * 1. 显示提示框
     * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
     * 3. 过2秒后，让提示框自动消失
    */
    function alertFn(msg, isSuccess) {
      // 1> 显示提示框
      myAlert.classList.add('show')

      // 2> 实现细节
      myAlert.innerText = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)

      // 3> 过2秒隐藏
      setTimeout(() => {
        myAlert.classList.remove('show')
        // 提示：避免类名冲突，重置背景色
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }

    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 3.2 使用serialize函数，收集登录表单里用户名和密码
      const form = document.querySelector('.login-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)
      // {username: 'itheima007', password: '7654321'}
      const { username, password } = data

      // 1.2 获取用户名和密码
      // const username = document.querySelector('.username').value
      // const password = document.querySelector('.password').value
      console.log(username, password)

      // 1.3 判断长度
      if (username.length < 8) {
        alertFn('用户名必须大于等于8位', false)
        console.log('用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        alertFn('密码必须大于等于6位', false)
        console.log('密码必须大于等于6位')
        return // 阻止代码继续执行
      }

      // 1.4 基于axios提交用户名和密码
      // console.log('提交数据到服务器')
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(result => {
        alertFn(result.data.message, true)
        console.log(result)
        console.log(result.data.message)
      }).catch(error => {
        alertFn(error.response.data.message, false)
        console.log(error)
        console.log(error.response.data.message)
      })
    })
  </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>
  <!-- 引入bootstrap.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <!-- 公共 -->
  <style>
    html,
    body {
      background-color: #EDF0F5;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 520px;
      height: 540px;
      background-color: #fff;
      padding: 60px;
      box-sizing: border-box;
    }

    .container h3 {
      font-weight: 900;
    }
  </style>
  <!-- 表单容器和内容 -->
  <style>
    .form_wrap {
      color: #8B929D !important;
    }

    .form-text {
      color: #8B929D !important;
    }
  </style>
  <!-- 提示框样式 -->
  <style>
    .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success" role="alert">
      提示消息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form class="login-form">
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username" name="username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password" name="password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <!-- 3.1 引入插件 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    // 目标3：使用form-serialize插件，收集用户名和密码

    // 2.1 获取提示框
    const myAlert = document.querySelector('.alert')
    /**2.2 封装提示框函数，重复调用，满足提示需求
     * 功能：
     * 1. 显示提示框
     * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
     * 3. 过2秒后，让提示框自动消失
    */
    function alertFn(msg, isSuccess) {
      // 1> 显示提示框
      myAlert.classList.add('show')

      // 2> 实现细节
      myAlert.innerText = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)

      // 3> 过2秒隐藏
      setTimeout(() => {
        myAlert.classList.remove('show')
        // 提示：避免类名冲突，重置背景色
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }

    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 3.2 使用serialize函数，收集登录表单里用户名和密码
      const form = document.querySelector('.login-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)
      // {username: 'itheima007', password: '7654321'}
      const { username, password } = data

      // 1.2 获取用户名和密码
      // const username = document.querySelector('.username').value
      // const password = document.querySelector('.password').value
      console.log(username, password)

      // 1.3 判断长度
      if (username.length < 8) {
        alertFn('用户名必须大于等于8位', false)
        console.log('用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        alertFn('密码必须大于等于6位', false)
        console.log('密码必须大于等于6位')
        return // 阻止代码继续执行
      }

      // 1.4 基于axios提交用户名和密码
      // console.log('提交数据到服务器')
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(result => {
        alertFn(result.data.message, true)
        console.log(result)
        console.log(result.data.message)
      }).catch(error => {
        alertFn(error.response.data.message, false)
        console.log(error)
        console.log(error.response.data.message)
      })
    })
  </script>
</body>

</html>

在这里插入图片描述
url好像失效了

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

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

相关文章

docker-compose安装redis高可用哨兵集群（一主二从三哨兵）

docker-compose安装redis高可用哨兵集群（一主二从三哨兵）

以redis 7.0为例子 直接上代码 docker-compose.yaml version: 3.3 services:master:image: redis:7.0container_name: redis-master#restart: alwayscommand: redis-server --port 6379 --requirepass root --appendonly yes --masterauth root --replica-announce-ip 192.1…
阅读更多...
什么是 TCP 和 UDP？Java 中如何实现 TCP 和 UDP 协议

什么是 TCP 和 UDP？Java 中如何实现 TCP 和 UDP 协议

在计算机网络中&#xff0c;TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;是两种最常用的传输层协议。它们都用于在网络上传输数据&#xff0c;但是它们之间有很多不同之处。本文将介绍TCP和UDP的基本概念&#xff0c;以及在Java中如何…
阅读更多...
一、基础-4、MySQL启动和客户端连接

一、基础-4、MySQL启动和客户端连接

一、启动 方法一&#xff1a; 1、winR&#xff0c;输入services.msc&#xff0c;按回车 2、找到MySQL&#xff0c;右键-启动/停止 MySQL安装后&#xff0c;默认已启动。 方法二、 1、winR&#xff0c;输入cmd&#xff0c;打开命令行 2、输入启动与停止命令 二、客户端连接 …
阅读更多...
港联证券-“肉签”频出！这周打新看TA们→

港联证券-“肉签”频出！这周打新看TA们→

近期&#xff0c;新股市场有所回暖&#xff0c;“赚钱效应”随之提高。Choice数据显现&#xff0c;上星期8只新股的上市首日均匀涨幅为56%&#xff0c;呈逐周上涨态势。其中&#xff0c;赛维年代首日大涨115.11%&#xff0c;中一签约可赚1.2万元&#xff1b;昊帆生物、英华特、…
阅读更多...
ShardingSphere项目实战集群环境准备

ShardingSphere项目实战集群环境准备

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…
阅读更多...
React06-简单实战案例

React06-简单实战案例

一、计时器 1. 案例场景 计时器在很多网站中都有使用&#xff0c;以时分秒的格式展示当前时间&#xff0c;每秒刷新一次。 2. 案例展示 展示的时间将随着系统时间&#xff0c;每秒刷新一次。 3. 案例代码 import { useState, useEffect } from react;export default func…
阅读更多...
golang中的【数组】相关知识点

golang中的【数组】相关知识点

目录 数组含义数组定义形式数组的声明初始化方式数组变量的类型 arr的特征数组的遍历遍历的用法二数组的值传递数组的引用&取地址 传送二维数组的相关操作定义二维数组初始化遍历 Golang是一种高效的编程语言&#xff0c;具有很多特性和优点&#xff0c;其中之一就是其对数…
阅读更多...
查看服务器GPU使用情况，以及使用GPU的用户

查看服务器GPU使用情况，以及使用GPU的用户

查看服务器GPU使用情况&#xff0c;以及使用GPU的用户 1.查看gpu使用情况 nvidia-smi2.查看是谁在占用gpu ps -f -p PID例如 ps -f -p 1986875就可以看到是谁在用了
阅读更多...
谷歌发布ALBERT V2和中文模型

谷歌发布ALBERT V2和中文模型

2019年9月推出时&#xff0c;谷歌的ALBERT语言模型在GLUE、RACE和SQuAD 2.0等流行的自然语言理解&#xff08;NLU&#xff09;基准上取得了SOTA结果。谷歌现在发布了一个主要的V2 ALBERT更新和开源的中国ALBERT模型。 正如全名“A Lite BERT”所示&#xff0c;ALBERT是该公司B…
阅读更多...
组件的状态

组件的状态

组件的状态 react hook出来之前&#xff0c;函数式组件是没有自己状态的。 ​ jsx 就和原生js编写差不多&#xff0c;所有就当作在定义类&#xff0c;在类方法中使用变量&#xff0c;就要通过this来调用。 ​ 主义要写在state中&#xff0c;数据驱动视图&#xff0c;我们想要修…
阅读更多...
Vite 3.0 核心盘点与分析

Vite 3.0 核心盘点与分析

自2021 年2月&#xff0c;Vite 2.0版本发布以来&#xff0c;Vite项目在的用户量方面发生了非常迅速的增长&#xff0c;很快达到了每周 100 万的npm下载量&#xff0c;成为npm下载量最高的几个项目之一。同时&#xff0c;Vite 的社区也越来越活跃&#xff0c;目前已经形成非常庞…
阅读更多...
如何用手机实现三维可视化

如何用手机实现三维可视化

三维可视化是一种强大的工具&#xff0c;可以将复杂的数据、概念或场景以直观、具体的形式展现出来。它将数据或模型转化成三维图像&#xff0c;使人们能够更清晰地理解和分析其中的关系和特征。三维可视化不仅可以用于科学研究和工程设计&#xff0c;还广泛应用于教育、娱乐和…
阅读更多...
linux内核调试工具记录

linux内核调试工具记录

Linux性能测试使用的工具在github网站可见&#xff0c;网址如下&#xff1a; slides: http://www.slideshare.net/brendangregg/linux-performance-analysis-new-tools-and-old-secrets video: https://www.usenix.org/conference/lisa14/conference-program/presentation/greg…
阅读更多...
在线考试系统源码搭建：springboot+mybatis+mysql+vue

在线考试系统源码搭建：springboot+mybatis+mysql+vue

下载源码 在线考试 刷题小程序 题库答题小程序 : 适用机构场景&#xff1a;在线考试系统适用于企业考核、员工职评测、培训机构考证刷题等场景&#xff1b;用户端功能&#xff1a;顺序练习&#xff0c;真题模拟&#xff0c;我的错题&#xff0c;我的收藏、错题重练(答对自动移…
阅读更多...
【Atcoder】 [ARC156C] Tree and LCS

【Atcoder】 [ARC156C] Tree and LCS

题目链接 Luogu方向 Atcoder方向 题目解法 手玩几个小数据之后可以猜测最小的最大相似度一定为1 考虑构造&#xff1a;每次找到2个叶子&#xff0c;交换权值&#xff0c;然后删掉&#xff08;最后如果剩下一个点权值不变&#xff09; 证明&#xff1a; 首先可以证明最大的相…
阅读更多...
【微服务实战之Docker容器】第三章-镜像仓库

【微服务实战之Docker容器】第三章-镜像仓库

系列文章目录 【微服务实战之Docker容器】第一章-下载及安装 文章目录 系列文章目录Docker镜像提交本地镜像发布到阿里云阿里云镜像下载到本地使用本地镜像发布到私有库 Docker镜像提交 docker commit提交容器副本使之成为一个新的镜像docker commit -m“提交的描述信息” -a…
阅读更多...
2023年网络安全需把握十大趋势

2023年网络安全需把握十大趋势

过去的2022年&#xff0c;网络安全继续成为全社会的关注焦点。网络战在俄乌冲突中风头尽出&#xff1b;勒索攻击给企业造成的损失触目惊心&#xff1b;数据泄露事件愈发频繁、甚至威胁社会安全&#xff1b;供应链攻击无处不在……网络安全已经成为发展的先决条件。 2023年是贯…
阅读更多...
【大模型】AutoDL 快速使用

【大模型】AutoDL 快速使用

网站&#xff1a;https://www.autodl.com/ BUY 性价比之选&#xff1a;NVIDIA RTX A5000 / 24GB PS&#xff1a;CUDA版本 -12.0 PS&#xff1a;Pytorch/2.0.0/3.8(ubuntu20.04)/11.8 Use Tips git clone 慢 学术资源加速 source /etc/network_turbo切换pip 阿里源
阅读更多...
TCP文件传输功能

TCP文件传输功能

实现代码 tcp.h #ifndef _TCP_H_ #define _TCP_H_#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/socket.h> #include <netinet/in.h> #include <netinet/tcp.h> #include <strings.h> #include <…
阅读更多...
链表的简单示意

链表的简单示意

链表的实质就是指针。存放下一个元素的地址。 typedef struct spy {char * name ;struct spy * next; }spy ,*p_spy;spy A {A,NULL}; spy B {B,NULL}; spy C {C,NULL};int main() {p_spy &A;A.next&B;//A是一个结构体变量&#xff0c;A.next是对这个结构体变量的引用。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023