开发

前端（Vue.js）使用组件库vue3适配element-plus

npm install element-plus -S

创建Vue组件：在src/components目录下创建用于显示选择题和提交答案的Vue组件。例如，创建一个名为Question.vue的组件：

{{ choice }}

集成后端API：在Vue组件中，使用axios（一个流行的HTTP客户端库）与Django后端进行通信。首先，安装axios： npm install axios 然后，在Vue组件中引入axios并使用它发送请求：

import axios from 'axios';

// ...

methods: { submitAnswer() { axios.post('/api/submit_answer/', { questionId: this.question.id, selectedChoice: this.selectedChoice, }).then(response => { // 处理响应 }).catch(error => { // 处理错误 }); }, }, 后端（Django）安装Python和Django：请确保您已安装了Python和Django。如果没有，请访问Python官方网站（https://www.python.org/downloads/）下载并安装适合您操作系统的Python版本，然后使用pip安装Django： pip install django 创建Django项目和应用： django-admin startproject quiz_project cd quiz_project python manage.py startapp quiz_app 配置数据库和模型：在quiz_app/models.py中定义问题和答案的模型： from django.db import models

class Question(models.Model): title = models.CharField(max_length=200) correct_choice = models.IntegerField()

class Choice(models.Model): question = models.ForeignKey(Question, on_delete=models.CASCADE) content = models.CharField(max_length=200) 创建数据库表：运行以下命令以应用模型更改： python manage.py makemigrations python manage.py migrate 配置URL和视图：在quiz_app/views.py中创建视图函数以处理提交答案的请求： from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from .models import Question, Choice

@csrf_exempt def submit_answer(request): question_id = int(request.POST['questionId']) selected_choice = int(request.POST['selectedChoice'])

question = Question.objects.get(id=question_id)
is_correct = question.correct_choice == selected_choice

return JsonResponse({'is_correct': is_correct})

配置URL：在quiz_app/urls.py中配置URL： from django.urls import path from . import views

urlpatterns = [ path('api/submit_answer/', views.submit_answer, name='submit_answer'), ] 在quiz_project/urls.py中包含quiz_app的URL配置：

from django.contrib import admin from django.urls import path, include

urlpatterns = [ path('admin/', admin.site.urls), path('', include('quiz_app.urls')), ] 运行Django服务器：

python manage.py runserver 现在，您应该可以运行Vue.js前端和Django后端，并通过前端提交选择题答案。请注意，这只是一个基本示例，您可能需要根据实际需求进行调整和优化。例如，您可以添加用户认证、错误处理、分页等功能。

开发

{{ question.title }}