devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

django-websocket打造简单的聊天室

作者：AllinToyou | 2024-03-27 23:16:45

赞

踩

django-websocket打造简单的聊天室

1，框架DJANGO,VUE 

2，前端VUE代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>聊天窗口</title>
  8.     {% load static %}
  9.     <script src="{% static '/vue/vue.js'%}"></script>
  10. </head>
  11. <style>
  12.     *{margin:0;padding:0}
  13.     .head1{
  14.         width: 600px;
  15.         height: 1000px;
  16.         position: absolute;
  17.         left:50%; top:50%;
  18.         transform:translate(-50%,-50%);
  19.         margin-top: 200px;
  20.         /* border: 6px solid rgb(148, 241, 26);
  21.         border-radius: 2px;
  22.         border-color: rgb(187, 248, 248); */
  23.     }
  24.     .head2{
  25.         width: 600px;
  26.         height: 400px;
  27.         border: 6px solid red;
  28.         border-color: rgb(187, 248, 248);
  29.     }
  30.     .head3{
  31.         width: 600px;
  32.         height: 200px;
  33.         border-color: aqua;
  34.         border: 6px solid rgb(245, 164, 42);
  35.     }
  36.     .chatlog{
  37.         width: 600px;
  38.         height: 400px;
  39.     }
  40. </style>
  41. <body>
  42.     <div id="go" class="head1">
  43.         <h1>留言窗口</h1>
  44.         <div class="head2">
  45.             <textarea id="chat-log" class='chatlog' v-model="textareacontent" cols="100" rows="20"  v-on:keyup.enter="search"></textarea><br>
  46.         </div>
  47.         <div class="head3">
  48.             <button class="button1"  @click="sendinfo">点击发送</button>
  49.             <div>
  50.                 <input v-model="content" type="text" placeholder="此处聊天" >
  51.             </div>
  52.         </div>
  53.     </div>
  54.     <script type="text/javascript">
  55.         Vue.config.productionTip=false
  56.         new Vue ({
  57.             el:'#go',
  58.             data:{
  59.                 name:'
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/327511
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。