手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」

前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天，今天来教大家制作一个聊天机器人，这样就不会无聊了，在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下 (😃) )

----

这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦!

----

效果图:

----

一.准备工作

----

通过分析我们需要以下的具体准备:

对于界面的分析,我们需要用到的插件:jQuery，

我们采用的是flex弹性布局，

既然使用的是图灵机器人那么就需要图灵机器人的api

二.项目开始

----

1.页面布局:

----

在前面说过我们需要采用flex来进行布局,那么我们来看看大概代码:

我们需要引入的文件:

HTML:

2.样式层:

----

当然仅仅有HTML代码并不能看出大概的效果,我们通过css来进行渲染一下:

CSS:

/* css初始化 */



* { 

   

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



ul li { 

   

    list-style: none;

}





/* 设置整体布局的样式 */



.action { 

   

    width: 500px;

    height: 700px;

    border: 1px solid #999;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    flex-direction: column;

}



.action h3 { 

   

    text-align: center;

}





/* 设置消息装载容器 */



.action .top { 

   

    flex: 15;

    background-color: #ddd;

}



.action .top .menu { 

   

    position: relative;

}



.action .top img { 

   

    width: 50px;

    height: 50px;

    border-radius: 50%;

}



.action .top .message { 

   

    border: 5px solid black;

    border-radius: 6px;

    max-width: 290px;

    border-radius: 12px;

    font-size: 16px;

    color: black;

    margin-left: 13px;

    line-height: 24px;

}



.action .top .top_left { 

   

    left: 0;

    display: block;

}



.action .top .top_right { 

   

    position: absolute;

    right: 0;

}





/* 设置输入消息容器 */



.action .bottom { 

   

    flex: 1;

    background-color: #333;

    display: flex;

}



.bottom input { 

   

    flex: 4;

}



.bottom button { 

   

    flex: 1;

}

3.逻辑实现:

----

前面已经进行了布局和样式的设计,那么我们具体来看看怎么实现,我们需要的是图灵机器人的api,那么我们要去图灵机器人官网去申请,当我们注册认证成功后,那么我们会有以下界面:

我们需要的是其中的apikey来进行与机器人具体的操作!

由大概界面知道,我们是通过点击发送按钮来进行消息的传输,那么我们就需要发送按钮的点击事件;

// 点击发送按钮

    $('.btn').click(function() { 

   

        // 获取到文本框的值

        var text1 = $("#text1").val();

        // 判断是否为空值

        if (text1.trim().length > 0) { 

   

        //添加节点

            $(".menu").append(` ${ 

     text1}  
`);

            // 文本框值进行清空

            $("#text1").val('');

            // 调用对话函数(在下面会进行书写)

            getTL(text1);

        } else { 

   

        //输入框内容清空

            $("#text1").val('');

        };

    });

发送了消息后怎么处理呢?这时候我们来书写消息处理对话函数;

   //【2】进行对话操作

    function getTL(text) { 

   

    //data对象存储apikey和返回的消息

        var data = { 

   

            key: '758ecd943dd644b59ff2d1f73759500d',

            info: text

        };

        //提交数据

        $.post("http://www.tuling123.com/openapi/api", data, (result) => { 

   

            console.log(result);

            // 可以正常聊天的code

            if (result.code === 100000) { 

   

                $(".menu").append(`  ${ 

     result.text}
`);

            } 

            //为40004时候就是我们的激活使用完了,当然每天100次哦

            else if (result.code === 40004) { 

   

                $(".menu").append(`  今天的俺有点瞌睡了,让俺好好休息休息,明天再来看你哦!
`);

            };

        });

    };

当然我们可以采用按下回车建的方法来进行消息的发送,如下:

$('#text1').on("keyup", function(e) { 

   

        // 回车键

        if (e.keyCode === 13) { 

   

        //调用点击事件

            $('.btn').click();

        }

    });

----

这样简单的聊天机器人就实现了,源码地址:https://github.com/JCGG-99977/Roboat(当然你们觉得照片丑的话可以自行更换哦!)

手把手教你制作一个简单的聊天机器人(图灵api)「建议收藏」

目录:

一.准备工作

二.项目开始

1.页面布局:

借愁哥哥

2.样式层:

3.逻辑实现:

相关推荐