与机器人愉快的聊天~~~

通过vue.js完成聊天

• 机器人接口
  
• css代码

 /**重置标签默认样式*/
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      font-family: '微软雅黑';
    }

    #container {
      width: 450px;
      height: 780px;
      background: #eee;
      margin: 20px auto 0;
      position: relative;
      box-shadow: 20px 20px 55px #777;
    }

    .header {
      background: #000;
      height: 40px;
      color: #fff;
      line-height: 34px;
      font-size: 20px;
      padding: 0 10px;
    }

    .footer {
      width: 430px;
      height: 50px;
      background: #666;
      position: absolute;
      bottom: 0;
      padding: 10px;
    }

    .footer input {
      width: 275px;
      height: 45px;
      outline: none;
      font-size: 20px;
      text-indent: 10px;
      position: absolute;
      border-radius: 6px;
      right: 80px;
    }

    .footer span {
      display: inline-block;
      width: 62px;
      height: 48px;
      background: #ccc;
      font-weight: 900;
      line-height: 45px;
      cursor: pointer;
      text-align: center;
      position: absolute;
      right: 10px;
      border-radius: 6px;
    }

    .footer span:hover {
      color: #fff;
      background: #999;
    }

    #user_face_icon {
      display: inline-block;
      background: red;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      position: absolute;
      bottom: 6px;
      left: 14px;
      cursor: pointer;
      overflow: hidden;
    }

    img {
      width: 60px;
      height: 60px;
    }

    .content {
      font-size: 20px;
      width: 435px;
      height: 662px;
      overflow: auto;
      padding: 5px;
    }

    .content li {
      margin-top: 10px;
      padding-left: 10px;
      width: 412px;
      display: block;
      clear: both;
      overflow: hidden;
    }

    .content li img {
      float: left;
    }

    .content li span {
      background: #7cfc00;
      padding: 10px;
      border-radius: 10px;
      float: left;
      margin: 6px 10px 0 10px;
      max-width: 310px;
      border: 1px solid #ccc;
      box-shadow: 0 0 3px #ccc;
    }

    .content li img.imgleft {
      float: left;
    }

    .content li img.imgright {
      float: right;
    }

    .content li span.spanleft {
      float: left;
      background: #fff;
    }

    .content li span.spanright {
      float: right;
      background: #7cfc00;
    }

• html代码

 <div id="container">
    <div class="header">
      <span style="float: left;">机器人</span>
      <span style="float: right;"></span>
    </div>
    <ul class="content">
      <!-- 自己 右边 -->
      <li>
        <img src="./img/right.png" class="imgright" /><span class="spanright">你好吗？</span>
      </li>
      <!-- 机器人 左边 -->
      <li>
        <img src="./img/left.png" class="imgleft" /><span class="spanleft">不好</span>
      </li>
      <!-- 渲染部分 -->
      <!-- 给属性添加绑定事件 v-bind: 简写直接冒号:即可 
      判断是否是自己发送的内容 isMe=true 自己发的 isMe=false 机器人发的
      这里图片自己选择喜欢的图片导入即可-->
      <li v-for='item in list'>
        <!-- 遍历中的isMe 要用item点出来 -->
        <img :src="item.isMe?'./img/right.png':'./img/left.png'" :class="item.isMe?'imgright':'imgleft'" /><span :class="item.isMe?'spanright':'spanleft'">{{item.text}}</span>
        <!-- 发送的内容设置为text 遍历中用item点出来 -->
      </li>
    </ul>
    <div class="footer">
      <div id="user_face_icon">
        <img src="./img/right.png" alt="" />
      </div>
      <!-- 通过v-model与msg实现数据双向绑定 修饰符.trim 去除首尾空格
      通过@keyup 键盘弹起 并且修饰符.enter 回车或者点击发送按钮触发send()方法-->
      <input id="text" type="text" placeholder="说点什么吧..." v-model.trim='msg' @keyup.enter='send()' />
      <span id="btn" @click='send()'>发送</span>
    </div>
  </div>

• js代码

<!-- 开发环境版本，包含了有帮助的命令行警告 jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
  var app = new Vue({
    el: '#container',
    data: {
      msg: '',
      // 聊天内容都放在数组中
      list:[]

    },
    methods: {
      send(){
        //发送的文本不能为空
        if(this.msg==''){
          alert('不能为空');
          // return 让后面代码不在执行
          return;
        }
        this.list.push({
          text:this.msg,
          isMe:true,
        });
        //清空文本框内容
        this.msg=''
        //自己发送后 发送ajax请求让机器人回复
        $.ajax({
          type:'post',
          url:'http://www.tuling123.com/openapi/api',
          data:{
            //注意 测试用 key：如果次数都用完了建议自己注册一个机器人即可，免费的
            //智能机器人接口，使用需要注册，官网地址是 http://www.turingapi.com/
            key:'9fbb98effab142c9bb324f804be542ba',
            // info自己发送的内容
            info:this.msg
          },
          success:backData=>{
            console.log(backData);
            //把机器人的回复添加到list数组中
            this.list.push({
              text:backData.text,
              isMe:false
            });
          }
        })
      }
    },
    //钩子函数 
    //updated函数 就是数据更新后才执行
    updated() {
      // 确保数据更新完成后执行滚动条滚动底部
      $('.content').scrollTop(99999)
    },
  })
</script>

• 更多接口