用Django写一个简单的前后端分离的问答系统
时间: 2023-11-29 14:07:19 浏览: 51
好的,下面是一个简单的前后端分离的问答系统的实现步骤:
1. 后端实现
使用Django框架,创建一个新的Django项目和应用,并安装必要的依赖,如`djangorestframework`和`django-cors-headers`。
在应用中创建一个`models.py`文件,定义一个问题`Question`和一个答案`Answer`的模型,如下所示:
```python
from django.db import models
class Question(models.Model):
question_text = models.CharField(max_length=200)
class Answer(models.Model):
question = models.ForeignKey(Question, on_delete=models.CASCADE)
answer_text = models.CharField(max_length=200)
```
在应用中创建一个`serializers.py`文件,定义一个问题`QuestionSerializer`和一个答案`AnswerSerializer`的序列化器,如下所示:
```python
from rest_framework import serializers
from .models import Question, Answer
class AnswerSerializer(serializers.ModelSerializer):
class Meta:
model = Answer
fields = ('id', 'answer_text')
class QuestionSerializer(serializers.ModelSerializer):
answers = AnswerSerializer(many=True, read_only=True)
class Meta:
model = Question
fields = ('id', 'question_text', 'answers')
```
在应用中创建一个`views.py`文件,定义一个问题`QuestionViewSet`和一个答案`AnswerViewSet`的视图集,如下所示:
```python
from rest_framework import viewsets
from .models import Question, Answer
from .serializers import QuestionSerializer, AnswerSerializer
class QuestionViewSet(viewsets.ModelViewSet):
queryset = Question.objects.all()
serializer_class = QuestionSerializer
class AnswerViewSet(viewsets.ModelViewSet):
queryset = Answer.objects.all()
serializer_class = AnswerSerializer
```
在项目的`settings.py`文件中,配置`INSTALLED_APPS`和`DATABASES`,如下所示:
```python
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'qa',
]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
CORS_ORIGIN_ALLOW_ALL = True
```
2. 前端实现
使用Vue.js框架,创建一个新的Vue.js项目,并安装必要的依赖,如`axios`和`bootstrap-vue`。
在项目中创建一个`components`目录,包含一个`QuestionList.vue`和一个`QuestionForm.vue`组件,如下所示:
```vue
<template>
<div>
<b-form @submit.prevent="onSubmit">
<b-form-group label="Question">
<b-form-input v-model="question" required></b-form-input>
</b-form-group>
<b-button type="submit">Ask</b-button>
</b-form>
<b-list-group>
<b-list-group-item v-for="question in questions" :key="question.id">
<b>{{ question.question_text }}</b>
<ul>
<li v-for="answer in question.answers" :key="answer.id">
{{ answer.answer_text }}
</li>
</ul>
</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
question: '',
questions: []
}
},
mounted() {
axios.get('http://localhost:8000/api/questions/').then(response => {
this.questions = response.data
})
},
methods: {
onSubmit() {
axios.post('http://localhost:8000/api/questions/', {
question_text: this.question
}).then(response => {
this.questions.push(response.data)
this.question = ''
})
}
}
}
</script>
```
在项目的`App.vue`文件中,使用`QuestionList`组件,如下所示:
```vue
<template>
<div class="container py-3">
<h1>Question Answering System</h1>
<QuestionList />
</div>
</template>
<script>
import QuestionList from './components/QuestionList.vue'
export default {
name: 'app',
components: {
QuestionList
}
}
</script>
```
3. 运行服务
在命令行中,运行以下命令启动Django开发服务器:
```
python manage.py runserver
```
在另一个命令行窗口中,运行以下命令启动Vue.js开发服务器:
```
npm run serve
```
现在,您可以在浏览器中打开`http://localhost:8080`,并使用问答系统进行交互。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)