こんにちは、
私はグエンです。
Djangoでシンプルなチャトサイトを作ってみます。
問題点がありました。解決方法がご存知でしたら、ご教示頂けないでしょうか。
詳細は以下に記載致します。
日本語のROOMを選択すると、ブラウザの上でURLがROOMのIDを表示したいです。
IIS 本番環境で日本語のROOMを選択すると、エラーが発生しました。
英語や数字のROOMは特に問題なし。
問題として、ブラウザの上にURLが日本語になってるので、エラーが発生しました。
ちなみに、ローカルのIIS 環境で日本語のROOMを選択しても、問題がなく、入れました。
https://www.flickr.com/photos/195350134@N06/shares/6LB04W
https://www.flickr.com/photos/195350134@N06/shares/126vv6
■urls.py from django.urls import path from . import views app_name = 'chat' urlpatterns = [ path('', views.home, name='home'), path('<str:room>/', views.room, name='room'), path('checkview', views.checkview, name='checkview'), path('send', views.send, name='send'), path('getMessages/<str:room>/', views.getMessages, name='getMessages'), ]
■models.py from django.db import models from datetime import datetime from django.utils import timezone # Room class Room(models.Model): name = models.CharField(max_length=100) class Meta: managed = False db_table = 'Room' # Message class Message(models.Model): value = models.CharField(max_length=4000) date = models.DateTimeField(default=timezone.now, blank=True) user = models.CharField(max_length=100) room = models.CharField(max_length=100) class Meta: managed = False db_table = 'Message'
■views.py from django.shortcuts import render, redirect from chat.models import Room, Message from django.http import HttpResponse, JsonResponse # 2021/10/05 グエン MOD START # def home(request): # return render(request, 'home.html') def home(request): room_data = Room.objects.order_by('id') user_data = Message.objects.all() return render(request, 'home.html', { 'room_data': room_data, 'user_data': user_data }) # 2021/10/05 グエン MOD END def room(request, room): username = request.GET.get('username') # 2021/10/05 グエン MOD START room_data = Room.objects.order_by('id') # 2021/10/05 グエン MOD END # 2021/09/28 グエン mod Start # room_details = Room.objects.get(name=room) try: room_details = Room.objects.get(name=room) except Room.DoesNotExist: room_details = None # 2021/09/28 グエン mod End return render(request, 'room.html', { 'username': username, 'room': room, 'room_details': room_details, # 2021/10/05 グエン MOD START 'room_data' : room_data # 2021/10/05 グエン MOD END }) def checkview(request): # 2021/10/05 グエン MOD START # room = request.POST['room_name'] # username = request.POST['username'] room = request.POST.get('room_name') username = request.POST.get('username') # 2021/10/05 グエン MOD END if Room.objects.filter(name=room).exists(): return redirect('/'+room+'/?username='+username) else: new_room = Room.objects.create(name=room) new_room.save() return redirect('/'+room+'/?username='+username) def send(request): message = request.POST['message'] username = request.POST['username'] room_id = request.POST['room_id'] new_message = Message.objects.create(value=message, user=username, room=room_id) new_message.save() return HttpResponse('Message sent successfully') def getMessages(request, room): room_details = Room.objects.get(name=room) messages = Message.objects.filter(room=room_details.id) return JsonResponse({"messages":list(messages.values())})
■HTML & JS {% extends 'chat_base.html' %} {% load static %} {% block contents %} {# 2021/10/05 グエン ADD START ※左側にRoomリスト表示の為 #} <div align="center"> <img src="{% static 'img/chat_messages.ico' %}" width="70" height="70"> <h2>{{ room }} Django チャット</h2> </div> <div class="body_chat"> <div class="row"> <div class="col"> <div class="body-content"> <form id="post-form" method="POST" action="checkview"> {% csrf_token %} <h3>List Room</h3> {% for room in room_data %} <p style="margin-left:20px;"> <a href="{% url 'chat:home' %}{{ room.name }}/?username={{ username }}">{{ room.name }}</a> </p> {% endfor %} </form> </div> </div> <div class="col-9"> <div id="display"></div> <div class="container"> <form id="post-form"> {% csrf_token %} <p>{{ username }}さん</p> <input type="hidden" name="username" id="username" value="{{username}}"/> <input type="hidden" name="room_id" id="room_id" value="{{room_details.id}}"/> <input type="text" name="message" id="message" width="100px" /> <input type="submit" id="send" value="送信"> </form> </div> </div> </div> <script> $(document).ready(function(){ setInterval(function(){ $.ajax({ type: 'GET', url : "/getMessages/{{room}}/", success: function(response){ console.log(response); $("#display").empty(); for (var key in response.messages) { var temp="<div class='container darker'><b>"+response.messages[key].user+"さん</b><p>"+response.messages[key].value+"</p><span class='time-left'>"+response.messages[key].date+"</span></div>"; $("#display").append(temp); } }, error: function(response){ alert('エラーが発生しました。') } }); },1000); }) </script> {% comment %} <script src="{% static 'Scripts/chat.js' %}?time=202110050930"></script> {% endcomment %} <script type="text/javascript"> $(document).on('submit','#post-form',function(e){ e.preventDefault(); $.ajax({ type:'POST', url:'/send', data:{ username:$('#username').val(), room_id:$('#room_id').val(), message:$('#message').val(), csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), }, success: function(data){ //alert(data) } }); document.getElementById('message').value = '' }); </script> </div> {# 2021/10/05 グエン ADD END ※左側にRoomリスト表示の為 #} {% endblock %}