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>

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

猜你喜欢

转载自blog.csdn.net/weixin_50948265/article/details/120405326