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

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

AJAX

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

HTML
用图灵机器人2.0实现聊天机器人_第1张图片

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

CSS

  • 设置文本框为不可拖拽问题
    这个问题比较好解决,只是因为我比较健忘,所以在这里设置一下
 resize: none;
  • 聊天框内容溢出问题
    我们希望在内容不溢出的时候,不出现滚动条,当内容溢出的时候出现滚动条
overflow-y:auto

JS

  • 消息框长度
    用图灵机器人2.0实现聊天机器人_第2张图片
    我想尽力的把消息框做的好看,所以我设置了当消息框内字符串长度少于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
            }

你可能感兴趣的:(前端基础)