axios + MySQL初始 + 懒加载(demo含代码) -- 大二上第三周

2021/9/22 2:16:27

编程Tag： js axios get let demo img temp --

本文主要是介绍axios + MySQL初始 + 懒加载(demo含代码) -- 大二上第三周，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

axios

axios用于浏览器和node.js的基于Promise的HTTP客户端，是同构的（可以在具有相同代码库的浏览器和node.js中运行）。在服务器端使用本地node.js的http模块，在客户端（浏览器）使用XMLHttpRequests

执行get请求

const axios = require('axios');

axios.get('/user?ID=12345')
     .then(function (resquest) {
         console.log(resquest);
     })
     .catch(error => {
         console.log(error);
     })
//get里面还可以这样写
     axios.get('/user', {
         params: {
             ID: 12345
         }
     })
    //给加上异步
    async function getUser() {
        try{
            const response = await axios.get('/user?ID=12345');
            console.log(response);
        }catch(error){
            console.log(error);
        }
    }

post请求和get差不多

axios的一些方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKXjFA9z-1632228634990)(1.png)]

使用方法的时候不用指定method，data属性

如果是实例要用的话，就把.换成#

响应模式
响应包含以下内容

{
    data: {},//服务器
    status: 200, //http状态码
    statusText: 'OK', //http 响应服务器
    headers: {}, // http标头（不太理解是什么东西）
    config: {}, // 请求
    request: {} // 是生成这个响应的请求
}

总结一下就是大致和node.js很像，然后有部分实操不一样，需要细看
如果要用环境就必须支持es6

MySQL

数据库就是用来阻止存储和管理数据的仓库

数据组织结构就是数据以什么样的结构进行存储
传统型的组织结构分为数据库(database)，数据表(table)，数据行(row)和字段(field)

实际开发中，一般情况下，每个项目都对应独立的数据库
不同的数据存在不同的表中
表中具体存储的信息由字段来决定

满足开发需求要安装的软件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LIwWTp72-1632228634994)(2.png)]

千万不要随便删环境变量和系统变量

懒加载

简单描述：就是让在滚动条滚动的时候显示下面的图片，最开始只显示最开始的那张照片

<!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>Document</title>
    <style>
        .contioner{
            width: 100%;
        }
        img{
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="contioner">
        <img src="1.jpg" alt="图片失效" title="猫猫真可爱">
        <img src="1.jpg" alt="图片失效" title="猫猫真可爱">
    </div>
    <script>
        let div = document.querySelector('.contioner');
        let h = window.innerHeight;//视口高度

        window.addEventListener('scroll', function () {
            let scrollT = window.pageYOffset;//获取窗口滚动条高度
            let realT = document.body.offsetHeight;//获取实际内容高度

            if (h + scrollT > realT) {//判断条件：让视口高度 + 滚动条高度 > 实际内容的高度
                let temp = document.createElement('img');
                temp.setAttribute("src", "1.jpg");
                temp.setAttribute("alt", "图片失效");
                temp.setAttribute("title", "猫猫真可爱");
                div.appendChild(temp);
            }
        });
    </script>
</body>
</html>

因为过中秋节于是就不是周日发了

这篇关于axios + MySQL初始 + 懒加载(demo含代码) -- 大二上第三周的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

axios + MySQL初始 + 懒加载(demo含代码) -- 大二上第三周

目录

axios

MySQL

懒加载

相关编程文章