实现留言板功能

时间：2024-03-11 16:56:26

demo.css

*{
     margin: 0 auto;
     padding: 0;
     font-family: "Microsoft YaHei","sans-serif";
 }
 .container{
    margin-top:20px;
 }
.btn {
     padding: 5px 10px;
}

 

index.html

<!DOCTYPE>
 <html lang="zh-en">
 <head>
     <title>js实现简单留言板</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
     <link href="css/bootstrap.min.css" rel="stylesheet"/>
     <link href="css/demo.css" rel="stylesheet"/> 
     <script src="js/jquery-1.11.0.min.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
 </head> 
 <body>
     <div class="container">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">昵称：</label>
                <div class="col-sm-11">
                    <input type="email" class="form-control name" id="inputEmail3" placeholder="请输入昵称">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">留言：</label>
                <div class="col-sm-11">
                    <textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <button type="submit" class="btn btn-success submit">提交留言</button>
                </div>
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">留言列表</div>
                <div class="panel-body">
                    <ul class="list-group messageList">
                        <!-- <li class="list-group-item">张三
                            <span>说：</span>大家好！
                        </li> -->
                    </ul>
                </div>
        </div>
    </div>
</body>
</html>

A

//箭头函数没有自己的this，指向的是定义时的，而不是执行时的this;
// function fun(name){
//     return document.querySelector(name)
// }
// fun(\'.submit\');
let obj ={
    m:new Map(),
    init:function(){
        this.bind();
    },
    $:function(name){
        return document.querySelector(name);
    },
    bind:function(){
        this.$(\'.submit\').onclick = ()=>{
            let _name = this.$(".name").value,
                _msg = this.$(".message").value;
            if(_name ==\'\' || _msg ==\'\'){
                alert(\'请输入信息\')
            }else {
                this.m.set(_name,_msg);
                this.$(".name").value=\'\';
                this.$(".message").value=\'\';
                this.list();
            }
        }
    },
    list:function(){
        let str = \'\';
        for(let [key,value] of this.m){
            str+=`<li class="list-group-item">${key}<span>说：</span>${value}</li>`;
        };
         this.$(".messageList").innerHTML = str;
    }
}
window.onload = function(){
   obj.init();
}

B

$(function(){
    let m = new Map();
    $(".container .submit").click(()=>{
        let _name = $(".name").val(),
            _msg = $(".message").val();
        if(_name ==\'\' || _msg ==\'\'){
            alert(\'请输入信息\')
        }else {
            m.set(_name,_msg);
            $(".name,.message").val(\'\');
            list();
        }
    });
    //列表
    var list = () =>{
        let str = \'\';
        for(let [key,value] of m){
            str+=`<li class="list-group-item">${key}
                            <span>说：</span>${value}
                        </li>`;
        };
        $(".messageList").html(str);
    }
})

C

//箭头函数没有自己的this，指向的是定义时的，而不是执行时的this;
let obj ={
    m:new Map(),
    init:function(){
        this.bind();
    },
    bind:function(){
        $(".container .submit").click(()=>{
            let _name = $(".name").val(),
                _msg = $(".message").val();
            if(_name ==\'\' || _msg ==\'\'){
                alert(\'请输入信息\')
            }else {
                this.m.set(_name,_msg);
                $(".name,.message").val(\'\');
                this.list();
            }
        });
    },
    list:function(){
        let str = \'\';
        for(let [key,value] of this.m){
            str+=`<li class="list-group-item">${key}<span>说：</span>${value}</li>`;
        };
        $(".messageList").html(str);
    }
}
$(function(){
   obj.init();
})

 Ajax

//箭头函数没有自己的this，指向的是定义时的，而不是执行时的this;
let obj ={
   // m:new Map(),
    init:function(){
        this.bind();
    },
    bind:function(){
        $(".container .submit").click(()=>{
            let _name = $(".name").val(),
                _msg = $(".message").val();
            if(_name ==\'\' || _msg ==\'\'){
                alert(\'请输入信息\')
            }else {
                //this.m.set(_name,_msg);
                this.add(_name,_msg);
                $(".name,.message").val(\'\');
            }
        });
    },
    add:function(name,msg){ 
        //var self = this;
        $.ajax({
            type:\'post\',
            url:\'http://localhost:3000/add\',
            async:true, //异步
            data:{name:name,message:msg},  //返回给后端
            dataType:\'json\',
            success:(res)=>{    //后端返回的值
                if(res.code ==\'200\'){
                    this.getData();
                }
            },
            error:function(error){

            }
        })
       
    },
    getData:function(){
        $.ajax({
            type:\'get\',
            url:\'http://localhost:3000/get\',
            async:true, //异步
            dataType:\'json\',
            success:function(res){    //后端返回的值
                if(res.code ==\'200\'){
                    let str = \'\';
                    for(let item of res.result){
                        str+=`<li class="list-group-item">${item.name}<span>说：</span>${item.message}</li>`;
                    };
                    $(".messageList").html(str);
                }
            },
            error:function(error){

            }
        })
    }
}
$(function(){
   obj.init();
})

 Vue

window.onload = function(){
    new Vue({
        el:\'#my\',  //element 元素   挂载元素
        data:{    //数据  键值对  
           name:\'orange\' ,
           message:\'报错\',
           lists:[{name:\'a\',message:\'aa\'},{name:\'b\',message:\'bb\'}]
        },
        methods:{   //方法
            add:function(){
                if(this.name ==\'\'|| this.message ==\'\') return;
                this.lists.unshift({name:this.name,message:this.message});
                this.name =\'\';
                this.message =\'\';
            }
        }
    });
}

 

相关文章