django和vue实现chatgpt（未精化版）

1.下载相关模块

1.1下载openai模块

pip install openai

1.2 下载rest_framework模块

pip install djangorestframework

关于django中的restframework模块，想了解的话我可以再出一篇文章。评论区见嘻嘻嘻

1.3导入模块

from rest_framework.response import Response
from rest_framework.views import APIView
from openai import OpenAI

2.关于django代码的编写

2.1以下是在你的views.py文件里面写的哈

class ChatbotView(APIView):
    def post(self, request):
        user_input = request.data.get('message')
        api_key = 'YOUR_API_KEY'
        client = OpenAI(api_key=api_key)
        completion = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": user_input}
            ]
        )
        ai_response = completion.choices[0].message.content
        return Response({'message': ai_response})

2.2以下是你在你的urls.py文件里写的哈,相信导入views.py文件大家都会吧，打比方说我是在A01文件夹中的views.py里面写的2.1的代码，我要导入的话我就在urls.py里面from A01.views import ChatbotView

path('chatbotview', ChatbotView.as_view(), name='chatbotview')

这样django里面的代码就结束拉。

3.关于vue代码的编写

我就直接放图了啊

<template>
	<div>
		<h1>Chat with the AI Assistant</h1>
		<div id="chat-container">
			<p v-for="(message, index) in messages" :key="index">{{ message }}</p>
		</div>
		<input v-model="userInput" type="text" placeholder="Type your message here...">
		<button @click="sendMessage">Send</button>
	</div>
</template>

<script>
import { chatbotview } from '../../request/request.js';

export default {
	data() {
		return {
			userInput: '',
			messages: []
		};
	},
	methods: {
		sendMessage() {
			this.messages.push('You: ' + this.userInput);
			this.fetchResponse();
			this.userInput = '';
		},
		async fetchResponse() {
			const data = {
				'message': this.userInput
			};
			this.chatbotview(data);
		},
		chatbotview(data) {
			chatbotview(data).then(res => {
				this.messages.push('AI Assistant: ' + res.data.message);
			});
		}
	}
};
</script>

这里的chatbotview函数我写在了request.js里面

export const chatbotview = (data) =>{
	return api.post('/chatbotview',data)
}

 data是啥都懂吧各位，毕竟是post请求撒，我要把我要问的东西传过去嘛。其它的如果有不懂的话欢迎在评论区留言哈。

3.存在的一些问题

如果各位存在跨域的问题的话，前端后端都可以解决，一般本地我用django解决很快。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',     ！！！！！！！！！！！！！！！！
    'APP01.apps.App01Config'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', ！！！！！！！！！！！
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

我写感叹号的地方就是要添加的东西，要记住这两个必须加到你自己添加的东西上面，才能起作用。

关于corsheaders我们可以通过pip下载

pip install corsheaders

4.结果展示

结果我就直接展示图片了哈，没有调样式，过几天我把他美化了之后，我在写一个美化的教程出来，嘿嘿嘿。