聊天室案例实现保姆级教学

老样子先看效果图

准备工作

1.需要用到样式重置文件reset.css，emmm没有自己写也行将padding margin等去除；

2.下载并引入axios；

3.接口文档（不用担心跨域），或者使用自己的接口；

        接口：http://www.liulongbin.top:3006/api/robot

        请求：GET

        参数：spoken 表示我们输入的内容

        返回：
                {
                  "data": {
                            "type": 5000,
                            "info": {
                              "text": "我是瓦利～"
                                      }
                              },
                  "message": "success"
                }

4.开始冻手。。。

js部分

// 首先创建一个自执行函数
(function () {
    // 获取元素
    let header = document.querySelector('.header')
    let ipt = document.querySelector('.ipt')
    let send = document.querySelector('.send')
    // 注册事件
    send.addEventListener('click', sendHandler)
    // 回车发送
    ipt.addEventListener('keyup', function (e) {
        if (e.keyCode == '13') {
            sendHandler()
        }
    })
    // 信息数组
    let msgArr = [
 
    ]
    // 发送事件
    function sendHandler() {
        let value = ipt.value // 输入框的值
        if (value === '') return // 输入框为空不执行以下代码
        console.log(value.length);
        // 控制输入字数，可自定义
        if (value.length < 10) {
            // 将自己的信息存储到数组
            msgArr.push({
                type: 'person', // 信息类型（用于判断谁发出的信息）
                content: value
            })
            renderMsg(msgArr)// 渲染信息
            ipt.value = '' // 清空输入框
            header.innerText = '正在输入中....' // 更改对方输入状态
            // 发起请求
            axios.get('http://www.liulongbin.top:3006/api/robot',
                {
                    params: {
                        spoken: value
                    }
                }
            ).then(res => {
                // console.log(res.data.data.info.text);
                // 将对方返回的信息添加进数组
                msgArr.push({
                    type: 'robot', // 信息类型（用于判断谁发出的信息）
                    content: res.data.data.info.text
                })
                header.innerText = '瓦利'
                renderMsg(msgArr) // 对方响应后再次调用此函数将信息渲染出来
            }).catch(err => {
                console.log(err);
            }).finally(() => {
                console.log('消息列表:', msgArr);
            })
        } else {
            alert('字数超过限制')
        }
 
    }
    // 渲染信息
    function renderMsg(arr) {
        let html = arr.map((msg) => {
            // 判断信息的类型
            if (msg.type === 'person') {
                return `
                
                    
${msg.content}
                    
                
 `