同城手机网站开发,策划设计网站,云服务器是虚拟技术吗,百度推广助手app下载文章目录 前言一、成果展示 1、ai女友2、留言板二、实现思路三、难点问题四、总结 前言
在免费API寻找过程中#xff0c;发现了ai女友的接口#xff0c;打算从这个接口入手#xff0c;做出给人一种有女朋友的、温柔的、亲近的、容易给的感觉#xff01; 一、成果展示 1、A…
文章目录 前言一、成果展示 1、ai女友2、留言板二、实现思路三、难点问题四、总结 前言
在免费API寻找过程中发现了ai女友的接口打算从这个接口入手做出给人一种有女朋友的、温柔的、亲近的、容易给的感觉 一、成果展示 1、AI女友回应功能 2、留言板功能
二、实现思路
1、ai女友 利用AI女友接口我输入一句女友回答一句然后将对话存入数据库按照时间顺序查询出来显示即可。 ai女友接口https://api.lolimi.cn/API/AI/jj.php?msg你好 例如我输入你好 回答 {code: 200,data: {output: 哼你今天终于想起我了看在你这么诚心的份上我就勉为其难地回应你吧。,content: 你好}
}html代码 div classcontainerdiv classcontentdiv classitem item-centerspan昨天 12:35/span/divdiv classitem item-centerspan你已添加了凡繁烦现在可以开始聊天了。/span/divdiv classitem item-leftdiv classavatarimg srchttps://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u25668084,2889217189fm26gp0.jpg //divdiv classbubble bubble-left您好,我在武汉你可以直接送过来吗我有时间的话可以自己过去拿br/br/123/div/divdiv classitem item-rightdiv classbubble bubble-righthellobr/你好呀/divdiv classavatarimg srchttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u3313909130,2406410525fm15gp0.jpg //div/divdiv classitem item-centerspan昨天 13:15/span/divdiv classitem item-rightdiv classbubble bubble-right刚刚不在不好意思/divdiv classavatarimg srchttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u3313909130,2406410525fm15gp0.jpg //div/divdiv classitem item-leftdiv classavatarimg srchttps://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u25668084,2889217189fm26gp0.jpg //divdiv classbubble bubble-left没事br/你继续/div/divdiv classitem item-leftdiv classavatarimg srchttps://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u25668084,2889217189fm26gp0.jpg //divdiv classbubble bubble-left看到了br/在下面/div/divdiv classitem item-leftdiv classavatarimg srchttps://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u25668084,2889217189fm26gp0.jpg //divdiv classbubble bubble-left你发一个br/刚刚网卡了/div/divdiv classitem item-rightdiv classbubble bubble-right可以br/一会儿再发给你/divdiv classavatarimg srchttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u3313909130,2406410525fm15gp0.jpg //div/div/divdiv classinput-areatextarea nametext idtextarea/textareadiv classbutton-areabutton idsend-btn onclicksend()发 送/button/div/div/divcss代码 *{padding: 0;margin: 0;}body{height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;}.container{height: 760px;width: 900px;border-radius: 4px;border: 0.5px solid #e0e0e0;background-color: #f5f5f5;display: flex;flex-flow: column;overflow: hidden;}.content{width: calc(100% - 40px);padding: 20px;overflow-y: scroll;flex: 1;}.content:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);}.bubble{max-width: 400px;padding: 10px;border-radius: 5px;position: relative;color: #000;word-wrap:break-word;word-break:normal; }.item-left .bubble{margin-left: 15px;background-color: #fff;}.item-left .bubble:before{content: ;position: absolute;width: 0;height: 0;border-left: 10px solid transparent;border-top: 10px solid transparent;border-right: 10px solid #fff;border-bottom: 10px solid transparent;left: -20px;}.item-right .bubble{margin-right: 15px;background-color: #9eea6a;}.item-right .bubble:before{content: ;position: absolute;width: 0;height: 0;border-left: 10px solid #9eea6a;border-top: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid transparent;right: -20px;}.item{margin-top: 15px;display: flex;width: 100%;}.item.item-right{justify-content: flex-end;}.item.item-center{justify-content: center;}.item.item-center span{font-size: 12px;padding: 2px 4px;color: #fff;background-color: #dadada;border-radius: 3px;-moz-user-select:none; /*火狐*/-webkit-user-select:none; /*webkit浏览器*/-ms-user-select:none; /*IE10*/-khtml-user-select:none; /*早期浏览器*/user-select:none;}.avatar img{width: 42px;height: 42px;border-radius: 50%;}.input-area{border-top:0.5px solid #e0e0e0;height: 150px;display: flex;flex-flow: column;background-color: #fff;}textarea{flex: 1;padding: 5px;font-size: 14px;border: none;cursor: pointer;overflow-y: auto;overflow-x: hidden;outline:none;resize:none;}.button-area{display: flex;height: 40px;margin-right: 10px;line-height: 40px;padding: 5px;justify-content: flex-end;}.button-area button{width: 80px;border: none;outline: none;border-radius: 4px;float: right;cursor: pointer;}/* 设置滚动条的样式 */::-webkit-scrollbar {width:10px;}/* 滚动槽 */::-webkit-scrollbar-track {-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);border-radius:8px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {border-radius:10px;background:rgba(0,0,0,0);-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);}js代码 function send(){let text document.querySelector(#textarea).value;if(!text){alert(请输入内容);return ;}let item document.createElement(div);item.className item item-right;item.innerHTML div classbubble bubble-left${text}/divdiv classavatarimg srchttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u3313909130,2406410525fm15gp0.jpg //div;document.querySelector(.content).appendChild(item);document.querySelector(#textarea).value ;document.querySelector(#textarea).focus();//滚动条置底let height document.querySelector(.content).scrollHeight;document.querySelector(.content).scrollTop height;}效果图
2、留言板功能 我输入留言存入数据库然后按照时间顺手查询出来即可。 源代码如下 templatediv classmessage-boarddiv classmessage-inputinput v-modelnewMessage keyup.enterpostMessage placeholder在这里留言...button clickpostMessage发送/button/divdiv classmessagesdiv v-for(message, index) in messages :keyindex classmessagediv classmessage-content{{ message.content }}/divdiv classmessage-metaspan classmessage-time{{ message.time }}/span/div/div/div/div
/templatescript
export default {data() {return {newMessage: ,messages: []};},methods: {postMessage() {if (this.newMessage.trim() ! ) {this.messages.push({content: this.newMessage,time: this.getCurrentTime()});this.newMessage ;}},getCurrentTime() {const now new Date();const hours now.getHours().toString().padStart(2, 0);const minutes now.getMinutes().toString().padStart(2, 0);return ${hours}:${minutes};}}
};
/scriptstyle scoped
.message-board {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.message-input {display: flex;align-items: center;margin-bottom: 20px;
}.message-input input {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;
}.message-input button {padding: 10px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;
}.message-input button:hover {background-color: #0056b3;
}.messages {max-height: 300px;overflow-y: auto;
}.message {background-color: #f0f0f0;padding: 10px;margin-bottom: 10px;border-radius: 5px;
}.message-meta {display: flex;justify-content: flex-end;
}.message-time {font-size: 12px;color: #999;
}
/style 三、难点问题
1、如何在前端显示两个人的对话 设置各自的userId例如我的userId为1女友的userId为2按照时间顺序在后端进行查询。在前端查询显示时使用v-if和v-else如果userId为1则显示我否则显示女友。 div v-foritem in list :keyitem.iddiv v-ifitem.userId 2 classitem item-leftdiv classavatarimg :srcitem.avatar //divdiv classbubble bubble-left{{item.content}}/div/divdiv v-else classitem item-rightdiv classbubble bubble-right{{item.content}}/divdiv classavatarimg :srcitem.avatar //div/div/div 2、如何或去textarea输入的值
textarea namecontent idcontent /textareaconst content document.getElementById(content).value; 3、如何让滚动条始终在最底端
var container document.querySelector(.container);
container.scrollTop container.scrollHeight;四、总结
过程很难但也很有成就感有问题在网上基本上都能找得到只不过需要一个一个去试。
如果这篇文章对你有帮助的话请点点赞和收藏。如果文章有问题的话也可以私信我或指出来
感谢你的支持
