html制作一个聊天软件-526互联

需要的物件：

1.一个云服务器

2.一双会cv的手

3.出了问题会自己百度的脑子

首先，直接粘代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HEAD>
<TITLE>Vue学习</TITLE>
</HEAD>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 100%;
        width: 100%;
    }
    .box{
        height: auto;
        width: 300px;
        border: 1px solid #000;
    }
    span{
        margin: auto 1%;
    }
    td{
        text-align: center;

    }
    img{
        max-width: 100%;
        height: auto;
    }
    .active{
        background-color: aqua;
    }
    .biaotou{
        background-color: grey;
        height: 20px;
    }
    .red{
        color: red;
    }
    .biege{
        background-color: beige;
    }
    .one_fruit{
        height: 10%;
    }
</style>
<BODY>
    <div id="talk">
        <div style="width: 30%;height: 400px;border: 1px solid #000;margin: 5% auto;overflow-y: scroll;">
            <p v-for="(item , index) in history" :key="item.id">{{ item.price}}:{{ item.name  }}</p>
        </div>
        <div style="width: 30%;margin: 5% auto;">
            <input type="text" style="height: 20px;" v-model="one.name">
            <button @click="Send()">发送</button>
            <button @click="del_all()">清空全部聊天记录</button>
        </div>
    </div>
    <script>
        const talk=new Vue({
            el:'#talk',
            data:{
                timecheck:'',
                history:[],
                one:{
                    //云服务器的申请对象
                }
            },
            methods:{
                getData() {
                    this.refresh()
                    this.timecheck=setTimeout(this.getData, 500);
                },
                async refresh(){
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
                        //云服务器的申请对象
                    })
                    this.history = res.data.data
                    console.log(res)
                },
                async Send(){
                    const res = await axios.post('云服务器的网址',this.one)
                    this.refresh()
                    this.one.name=''
                },
                async del_all(){
                    for(let i=0;i<this.history.length;i++){
                        const res = await axios.delete(`云服务器的网址`)
                    }
                    this.refresh()
                }
            },
            mounted(){
                this.getData()
            },
            beforeDestroy(){
                this.timecheck.delete()
            }
        })
    </script>
</BODY>
</HTML>

出线任何问题，自己去百度，评论我代码有问题，我就骂你傻逼