Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 留言板案例改成"智能客服系统",实现机器人回复,附前后端源码(1108)
Blogger Information
Blog 26
fans 0
comment 0
visits 12136
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板案例改成"智能客服系统",实现机器人回复,附前后端源码(1108)
高空中的云
Original
564 people have browsed it


点击自己的信息,是弹出删除提示框,忘记操作了…
源码如下,

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>微信对话</title>
  9.   <style>
  10.     ul {
  11.       list-style: none;
  12.       display: grid;
  13.       padding: 0;
  14.     }
  15.     ul li.right {
  16.       place-self: end;
  17.     }
  18.     .right > div,
  19.     .left > div {
  20.       background-color: #fff;
  21.       padding: 5px;
  22.       max-width: 280px;
  23.       margin-bottom: 10px;
  24.     }
  25.     .chat {
  26.       width: 375px;
  27.       height: 600px;
  28.       background-color: #fefefe;
  29.       margin: 100px auto 0 auto;
  30.       border: 1px solid #000;
  31.       overflow-y: scroll;
  32.       overflow-x: hidden;
  33.     }
  35.     section.dialog {
  36.       padding: 15px;
  37.       min-height: 520px;
  38.       background-color: rgb(245,245,245);
  39.     }
  41.     footer {
  42.       background-color: aliceblue;
  43.       width: 100%;
  44.       height: 40px;
  45.       position: sticky;
  46.       bottom: 0;
  47.       left: 0;
  48.       padding: 5px;
  49.       display: grid;
  50.       grid-template-columns: 250px auto;
  51.       place-content: center;
  52.     }
  54.     footer>input {
  55.       height: 30px;
  56.       margin-right: 20px;
  57.     }
  59.     footer>button {
  60.       height: 36px;
  61.       width: 80px;
  62.     }
  63.   </style>
  64. </head>
  66. <body>
  67.   <div class="chat">
  68.     <section class="dialog">
  69.       <ul class="list">
  70.         <!-- 其实每一条新留言,应该添加到ul的起始标签的后面: afterbegin -->
  71.       </ul>
  72.     </section>
  73.     <div id="anchor"></div>
  74.     <footer>
  75.       <input class="input" type="text" onkeydown="insertComment(this)" placeholder="请输入留言" autofocus />
  76.       <button onclick="sendComment()">发送</button>
  77.     </footer>
  78.   </div>
  81.   <script>
  82.     // 计算页面高度,如果聊天内容高于页面窗口高度,则向上滚动一定高度,否则,不动
  83.     const scrollPage = function(){
  84.       let list = document.querySelector('.list');
  85.       let listHeight = list.scrollHeight;
  87.       if(listHeight >= 600){
  88.         window.scrollTo({
  89.     top: 800,
  90.     behavior: "smooth"
  91. });
  92.       }
  93.     }
  94.     const Comment = function (ele) {
  95.       if (ele.value.length === 0) {
  96.           // 提示用户
  97.           alert('留言不能为空');
  98.           // 重置焦点
  99.           ele.focus();
  100.           // 直接返回
  101.           return false;
  102.         } 
  103.         const ul = document.querySelector('.list');
  104.         scrollPage();
  105.         // ele.value += `<button onclick="del(this.parentNode)">删除</button>`;
  106.         ul.insertAdjacentHTML('beforeend', `<li class="right" onclick="del(this)"><div>${ele.value}</div></li>`);
  108.         const url = 'http://chatdemo.com/index.php?msg='+ele.value;
  109.         fetch(url)
  110.         .then(function (response) {
  111.           return response.json();
  112.         })
  113.         .then(function (json) {
  114.         scrollPage();  
  115.         ul.insertAdjacentHTML('beforeend', `<li class="left"><div>${json.content}</div></li>`);
  116.         });
  117.         // 3. 清空输入框
  118.         ele.value = null;
  119.     }
  121.     const insertComment = function (ele) {
  123.       // 只有按下回车键才提交
  124.       if (event.key === 'Enter') {
  125.         Comment(ele);
  126.       }
  127.     };
  129.     const sendComment = function () {
  130.       const ele = document.querySelector('.input');
  131.       Comment(ele);
  132.     };
  134.     // 删除
  135.     const del = function (ele) {
  136.       // console.log(ele);
  137.       // confirm: 有一个确定，还有一个取消,确定:true, 取消:false
  138.       // return confirm('是否删除?') ? ele.remove() : false;
  139.       return confirm('是否删除?') ? (ele.outerHTML = null) : false;
  140.     };
  141.   </script>
  142. </body>
  144. </html>

因为用的这个机器人api不支持前端js跨域,所以写了个php,从后端操作(chatdemo.com/index.php 对应的就是下边这个’站点文件’):

  1. // 允许跨域
  2. header("access-control-allow-origin: *");
  4. $msg = $_GET['msg'] ?? '';
  6. $url = 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=' . $msg;
  7. $ch = curl_init();
  8. curl_setopt($ch, CURLOPT_URL, $url);  //设置访问的url地址
  9. curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  10. curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
  11. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //不输出内容
  12. $result =  curl_exec($ch);
  13. curl_close($ch);
  14. // echo $result;die;
  15. echo $result;
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：效果非常好啊, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post