Блог

Я работал над веб-приложением с использованием Django, и мне пришлось сделать 3-месячный перерыв. Я решил продолжить, и вдруг весь мой код jquery и vuejs не работает, хотя он отлично работал 3 месяца назад. (И, возможно, я мог бы внести изменения в последнюю минуту перед перерывом, которые повлияли на JS, прежде чем я ушел на перерыв)

Это мое base.html

 lt;headgt;  lt;link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet"gt;    lt;!-- Vue Js --gt;  lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"gt;lt;/scriptgt;   lt;!-- JQuery script --gt;  lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;/headgt;  

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

 lt;li class="chat-left" v-for="message in messages"gt;  lt;div class="chat-avatar"gt;  lt;img :src="message.image"alt="Retail Admin"gt;  lt;div class="chat-name"gt;[[ message.user ]]lt;/divgt;  lt;/divgt;  lt;div class="chat-text"gt;[[ message.content ]]lt;/divgt;  lt;div class="chat-hour"gt;[[ message.user ]]lt;/divgt; lt;/ligt;   

И это мой сценарий в шаблоне

 {% block script %} lt;scriptgt;  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 gt; 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) =gt; {  console.log(response)  })  .catch((error) =gt; {  console.log(error);  })   this.content = '';  }  }  }  }) lt;/scriptgt; {% endblock %}  

После отрисовки шаблона вместо извлечения данных для замены в фигурных скобках [[]] он просто показывает фигурные скобки как есть. И когда я хочу передать данные в базу данных, он этого не делает.

Это образец одного из JS-скриптов в моем проекте, однако все JS в проекте не работают. Единственная ошибка, которую обнаруживает моя консоль, — это ошибка CORS, при которой я не запрашиваю данные из другого домена. Я предполагаю, что получаю эту ошибку только потому, что использую значки из CDN fontawesome. И когда я запускаю инструменты разработки vuejs для сценариев vuejs, он не обнаруживает никаких компонентов vuejs, хотя сценарии vuejs загружаются на сайт.

Учитывая, что это работало, я не знаю, с чего начать устранение неполадок и какую область кода я должен отобразить здесь, чтобы повысить свои шансы на помощь. Буду признателен за предложения.

используйте {{имя_поля}} вместо []. и в django api всегда должен возвращать ответ, убедитесь, что вы возвращаете ответ api, как

 return render(request, 'template_name.html', context={'message': message})