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

老样子先看效果图

准备工作

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 `
                <div class="msg person">
                    <div class="content">${msg.content}</div>
                    <img width="40" height="40" src="./img/person.jpeg" alt="">
                </div> `
            } else {
                return `
                <div class="msg robot">
                  <img width="40" height="40" src="./img/robot.jpeg" alt="">
                  <div class="content">${msg.content}</div>
                </div>`
            }
        }).join('')
        document.querySelector('.msg-box').innerHTML = html
    }
}())

html部分

<header class="header">瓦利</header>
  <main class="msg-box">
    <!-- 人 -->
    <!-- <div class="msg person">
      <div class="content">要不要吃点什么?</div>
      <img width="40" height="40" src="./img/person.jpeg" alt="">
    </div> -->
    <!-- 机器 -->
    <!-- <div class="msg robot">
      <img width="40" height="40" src="./img/robot.jpeg" alt="">
      <div class="content">我也要算我一份</div>
    </div> -->
  </main>
  <footer class="footer">
    <input class="ipt" type="text">
    <span class="send">发送</span>
  </footer>
  <script src="./js/axios.js"></script>
  <script src="./js/index.js"></script>

css部分

:root {
    font-size: 10px;
}

body {
    background-color: #2b2b2b;
}

.header {
    color: white;
    line-height: 4.4rem;
    text-align: center;
    font-size: 1.6rem;
    height: 4.4rem;
    background-color: #151717;
    width: 100%;
    border-bottom: 1px solid rgb(46, 46, 46);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.msg-box {
    display: flex;
    flex-direction: column;
    padding: 54px 10px 59px;
}

.msg-box .msg {
    display: flex;
    margin-bottom: 10px;
}

.msg-box .msg img {
    border-radius: 3px;
}

.msg-box .msg .content {
    min-height: 40px;
    max-width: calc(100vw - 120px);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    border-radius: 3px;
    line-height: 18px;

}


.msg-box .robot .content {
    background: #282828;
    margin-left: 10px;
}

.msg-box .person .content {
    background: #22b661;
    margin-right: 10px;
}

.msg-box .person {
    align-self: flex-end;
}

.footer {
    height: 4.9rem;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #151717;
    border-top: 1px solid rgb(46, 46, 46);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: space-evenly;
}

.ipt {
    border: none;
    background-color: rgb(58, 58, 58);
    height: 3rem;
    width: 80%;
    border-radius: .5rem;
    padding-left: 1rem;
}

.send {
    width: 16%;
    border-radius: .5rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    color: white;
    background-color: #24b15d;
}