手把手教你制作一个简单的聊天机器人(图灵api)

前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天，今天来教大家制作一个聊天机器人，这样就不会无聊了。

一.准备工作

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

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

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

 二.项目开始

        1.页面布局:

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

我们需要引入的文件:

  <!-- 自己书写的css样式 -->    <link rel="stylesheet" href="./css/index.css">    <!-- 引入jQuery插件 -->    <script src="./js/jquery-3.5.1.min.js"></script>    <!-- 书写的js逻辑层 -->    <script src="./js/index.js"></script>    <!-- 滚动条插件 -->    <link rel="stylesheet" href="./css/optiscroll.css">    <!-- js版本 -->    <script src="./js/optiscroll.js"></script>    <!-- 或者作为jQuery插件 -->    <script src="./js/jquery.optiscroll.js"></script>

HTML：

<div class="action">        <h3>借愁哥哥</h3>        <!-- 中间聊天部分 -->        <div class="top optiscroll" id="scroll">            <ul class="menu">                <li class="top_left">                    <img src="./img/you.jpg" class="left">                    <!--开始默认机器人说的话-->                    <span class="message">借愁哥哥下发的小可爱</span>                </li>            </ul>            <div class="drag_bar" style="display: none;">                <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>            </div>        </div>        <div class="bottom">            <input type="text" id="text1" placeholder="想要说点什么呢?">            <button class="btn">发送</button>        </div>    </div>

         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`来进行与机器人具体的操作!

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

// 点击发送按钮    $('.btn').click(function() {        // 获取到文本框的值        var text1 = $("#text1").val();        // 判断是否为空值        if (text1.trim().length > 0) {        //添加节点            $(".menu").append(`<li class="top_right" style="margin-top:20px;">            <span class="message">${text1}</span>            <img src="./img/me.jpg" class="left">        </li>`);            // 文本框值进行清空            $("#text1").val('');            // 调用对话函数(在下面会进行书写)            getTL(text1);        } else {        //输入框内容清空            $("#text1").val('');        };    });

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

 //【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(`<li class="top_left" style="margin-top: 100px;">                <img src="./img/you.jpg" /> <span class="message">${result.text}</span></li>`);            }             //为40004时候就是我们的激活使用完了,当然每天100次哦            else if (result.code === 40004) {                $(".menu").append(`<li class="top_left">                <img src="./img/you.jpg" style="margin-top: 80px;" /> <span class="message">今天的俺有点瞌睡了,让俺好好休息休息,明天再来看你哦!</span></li>`);            };        });    };

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

$('#text1').on("keyup", function(e) {        // 回车键        if (e.keyCode === 13) {        //调用点击事件            $('.btn').click();        }    });   

这样简单的聊天机器人就实现了,源码地址:

`https://github.com/JCGG-99977/Roboat`借愁哥哥