大家好,又见面了,我是你们的朋友全栈君。
前言:在无聊的时候打打游戏、听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址
借愁哥哥机器人(可能有点丑,大家将就一下 (?) )
这个接口就目前的一天100次聊天机会,大家要珍惜哦,源码在文章末尾哦!
效果图:
一.准备工作
通过分析我们需要以下的具体准备:
- 对于界面的分析,我们需要用到的插件:
jQuery
,- 我们采用的是
flex
弹性布局,- 既然使用的是图灵机器人那么就需要图灵机器人的
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
来进行与机器人具体的操作!
- 由大概界面知道,我们是通过点击发送按钮来进行消息的传输,那么我们就需要发送按钮的点击事件;
// 点击发送按钮
$('.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】进行对话操作
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>`);
};
});
};
- 当然我们可以采用按下回车建的方法来进行消息的发送,如下:
$('#text1').on("keyup", function(e) {
// 回车键
if (e.keyCode === 13) {
//调用点击事件
$('.btn').click();
}
});
这样简单的聊天机器人就实现了,源码地址:https://github.com/JCGG-99977/Roboat
(当然你们觉得照片丑的话可以自行更换哦!)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161215.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...