API JQuery и Vuejs не передают и не извлекают данные из базы данных Django
Я работал над веб-приложением, используя Django, и мне пришлось сделать перерыв на 3 месяца. Я решил продолжить, и вдруг весь мой код jquery и vuejs не работает, хотя 3 месяца назад он прекрасно работал. (И, возможно, я мог сделать изменения в последнюю минуту перед перерывом, которые повлияли на JS до того, как я ушел на перерыв)
Это мой base.html
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<!-- Vue Js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- JQuery script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
urls.py
from conversation.api import api_add_message
urlpatterns = [
path('api/add_message/', api_add_message, name='api_add_message'),
]
api.py
import json
from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import ConversationMessage
@login_required
def api_add_message(request):
data = json.loads(request.body)
content = data['content']
conversation_id = data['conversation_id']
message = ConversationMessage.objects.create(conversation_id=conversation_id, content=content, created_by=request.user)
template.html
<li class="chat-left" v-for="message in messages">
<div class="chat-avatar">
<img :src="message.image"alt="Retail Admin">
<div class="chat-name">[[ message.user ]]</div>
</div>
<div class="chat-text">[[ message.content ]]</div>
<div class="chat-hour">[[ message.user ]]</div>
</li>
А это мой скрипт в шаблоне
{% block script %}
<script>
var conversationapp = new Vue({
el: '#conversationapp',
delimiters: ['[[', ']]'],
data () {
return {
messages: [],
content: '',
user: '{{ request.user.username }}',
created_at: 'Now',
image: '{% if request.user.profile.image %}{{ request.user.profile.image.url }}{% endif %}'
}
},
methods: {
submitMessage() {
if (this.content.length > 0) {
var message = {
'content': this.content,
'user': this.user,
'created_at': this.created_at,
'image': this.image,
'conversation_id': '{{ conversation.id }}'
};
this.messages.unshift(message);
fetch('/api/add_message/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
credentials: 'same-origin',
body: JSON.stringify(message)
})
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error);
})
this.content = '';
}
}
}
})
</script>
{% endblock %}
После рендеринга шаблона, вместо того, чтобы получить данные для замены в скобках [[]], он просто показывает скобки как есть. А когда я хочу передать данные в базу данных, он не делает этого.
Это пример одного из JS скриптов в моем проекте, однако, все JS в проекте не работают. Единственная ошибка, которую обнаруживает моя консоль, это ошибка CORS, при которой я не запрашиваю данные из другого домена. Я предполагаю, что получаю эту ошибку только потому, что использую иконки из fontawesome CDN. А когда я запускаю vuejs devtools для vuejs скриптов, он не обнаруживает никаких vuejs компонентов, хотя vuejs скрипты загружаются на сайт.
Учитывая, что он работал, я не знаю, с чего начать поиск неисправности, и какую область кода я должен показать здесь, чтобы увеличить мои шансы на помощь. Предложения будут приняты с благодарностью.
используйте {{имя_поля}} вместо []. и в django api всегда должен возвращать ответ, убедитесь, что ваш api возвращает ответ. как
return render(request, 'template_name.html', context={'message': message})