用图灵机器人2.0实现聊天机器人

聊天机器人是我最近写的一个项目，本来以为这个项目的难点是请求ajax，但是真正实现起来，发现，聊天机器人这样的一个小demo对前端的基础的要求还是挺大的，下面我将从AJAX、HTML、CSS、JS四个方面来阐述我在做这个项目的过程中遇到的一些问题。

AJAX

跨域问题
说来还挺痛苦的，写机器人的第一天就让我碰到了跨域不被允许的问题。不被允许的意思是，浏览器还是会发出这个请求，但是它会拦截响应内容，如果发现响应header中"Access-Control-Allow-Origin"设置的允许访问的源没有包含当前源，则拒绝将数据返回给当前源。对于这个问题，有两个解决方案，一个是对谷歌浏览器的安全性进行设置，具体方法在 https://mp.csdn.net/mdeditor/84451706# ，一个是后端的：在响应头header中添加"Access-Control-Allow-Origin"，指定允许访问的源。（强烈推荐）由于接口是图灵机器人所设置的，我没有办法改变，所以我采取了前端的解决方案。
xhr的格式问题
解决了跨域问题之后我很兴奋，我以为问题已经几乎被我全部解决了，没想到这只是刚开始，接下来我又碰到了棘手的传送数据格式错误的问题。原因在于我对于请求头的content-Type属性的不熟悉，content-Type指的是发送到服务器的数据类型，https://blog.csdn.net/ganlubaba666/article/details/84192495 ，我在这篇文章的背后有提及。

HTML
在这里插入图片描述

文本框自动换行问题
我想做一个字到头之后就自动换行的文本框，我一开始用的是<input type="text">，然后我发现没有办法实现input内的自动换行，所以我换成了<textarea></textarea>，这里要注意的是1、input是单标签，textarea是双标签2、textarea标签存在value值，虽然编辑器并没有提示。

CSS

设置文本框为不可拖拽问题
这个问题比较好解决，只是因为我比较健忘，所以在这里设置一下

 resize: none;

聊天框内容溢出问题
我们希望在内容不溢出的时候，不出现滚动条，当内容溢出的时候出现滚动条

overflow-y:auto

消息框长度

我想尽力的把消息框做的好看，所以我设置了当消息框内字符串长度少于27时，消息框的长度是跟随着字符串长度的变化而变化的。

if(str.length<27){
            message.style.width = str.length*20+"px";
            if (className =="my"){
                message.style.marginLeft = 460-parseInt(message.style.width )+"px";
            }else {
                message.style.marginLeft = "35px";
            }
        }else {
            message.style.marginLeft = "35px";
        }

设置值
有一个要注意的点，就是如果要用element.style.attr的形式设置一个值，那么这个元素是带单位的，所以最后是以字符串的形式呈现的，如果忘了加上单位，它的值就会设置不上去

message.style.width = str.length*20+"px";

滚动条始终保持在最下端：让滚动条相对于其顶部的偏移等于元素内容的总高度（包括溢出）

ul.scrollTop = ul.scrollHeight;

输出框设置为空
当我们的消息点击发送按钮的时候，我们就把输入框设置为空，可是这里涉及到同步异步的问题，我们把li元素添加到ul中是同步的，但是我们把输入框中的数值发送给后台是异步的，异步的东西是放在一边执行的，为了解决这个问题，我在函数中设置了一个str保存聊天框的值，并且在函数执行之后返回保存在外部变量中，然后再把str作为data中inputText的值发送给后台，其实如果我的能力足够的话，我想做一个像qq那样的，如果消息没有发送出去，就出现一个红点，我在这里先记录一下，等到我之后有能力了再实现

 var str = addChilds(text.value,"my");
  function addChilds(str,className) {
     	...
        var str = text.value;
        text.value="";
        return str;
    }
	...
 var data = {
            "inputText": {
                "text":str
            }

用图灵机器人2.0实现聊天机器人

猜你喜欢