5.30 - 6.5 前端学习

LeonLin_

已于 2022-06-07 16:01:04 修改

阅读量106

点赞数

文章标签：前端学习 javascript 前端框架

于 2022-06-07 15:58:26 首次发布

本文链接：https://blog.csdn.net/weixin_52127518/article/details/125166823

版权

5.30 - 6.5 前端学习

本周因为要忙期末的专业课大作业以及 4+课mini项目的考试，所以学的很少…

学完ES6
Ajax
Vue2 的一些插件的安装以及使用

1. ES6

在这里插入图片描述

2. Ajax

在这里插入图片描述

//服务端响应JSON数据
<!DOCTYPE html>
<html lang="ch">
<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>
        #result {
            width: 200px;
            height: 100px;
            border: 2px solid #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        var result = document.querySelector('#result');
        // 绑定键盘按下事件
        window.addEventListener('keydown', function(e) {
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 设置响应体的数据类型，自动转换
            xhr.responseType = 'json';
            // 初始化
            xhr.open('GET','http://127.0.0.1:8000/JsonServer');
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function() {
                // 判断
                if(xhr.readyState === 4) {
                    if( xhr.status >= 200 && xhr.status < 300 ) {
                        console.log(xhr.response);
                        // result.innerHTML = xhr.response; //直接接收到的数据：{"name":"Leon"}

                        // 手动转换
                        // let data = JSON.parse(xhr.response); //转换为对象
                        // console.log(data);
                        // result.innerHTML = data.name;

                        // 也可以直接在前面自动转换
                        // 设置响应体的数据类型, xhr.responseType = 'json';
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        });
    </script>
</body>
</html>

//后台
// 1. 先引入express
const { request, response } = require('express');
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request  是对请求报文的封装
// response 是对响应报文的封装
app.get('/JsonServer',(request, response) => { // 用于GET
    // 设置响应头, 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    // response.send('HELLO AJAX GET'); 

    // 响应一个数据
    const data = {
        name:'Leon'
    };
    // 对 对象 进行字符串转换
    let str = JSON.stringify(data);
    response.send(str); //接收到的结果：{"name":"Leon"}
});
app.post('/JsonServer',(request, response) => { // 用于POST
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('HELLO AJAX POST');
});
// 4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中...");
});

// 在终端用node命令启动打开
// nodemon.cmd server.js