### Vue3 登录页面连接 Django PyCharm 数据库实现前后端交互 #### 创建Django项目并配置数据库 为了使Vue3前端能够与Django后端以及PyCharm中的MySQL数据库进行交互，首先需要确保Django项目已经正确设置了数据库连接。这可以通过编辑`autotest_plat/settings.py`文件来完成，在此文件内指定数据库的相关参数[^4]。 ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'your_database_name', # 替换成实际的数据库名称 'USER': 'root', 'PASSWORD': 'your_password', # 输入自己的密码 'HOST': '127.0.0.1', 'PORT': '3306' } } ``` #### 构建API接口供前端调用 接着定义用于处理登录请求的应用视图函数于`views.py`中，这里展示了一个简单的例子用来返回字符串响应给客户端作为测试目的[^1]： ```python from django.http import JsonResponse def login(request): if request.method == "POST": username = request.POST.get('username') password = request.POST.get('password') # 此处应加入验证逻辑... response_data = {'status': True, 'message': f'Welcome {username}'} return JsonResponse(response_data) else: return JsonResponse({'error': 'Invalid Request Method'}, status=405) ``` 上述代码片段展示了如何接收来自HTTP POST方法的数据，并通过JSON格式向客户端发送消息；对于真实的场景应当在此基础上增加安全性措施如身份认证等。 #### 设置URL路由映射 为了让浏览器可以访问到这个新的视图函数，还需要更新`autotest_plat/urls.py`内的路径规则以指向新创建的方法: ```python from django.urls import path from . import views urlpatterns = [ ... path('api/login/', views.login), ] ``` 这样就完成了基本的服务端准备工作，使得当用户提交表单时能触发对应的Python脚本执行相应的业务流程。 #### 安装必要的依赖项 在开始之前，请确认已经在本地安装了Node.js和npm工具链。之后可以在命令行里依次输入以下指令获取所需的包（假设当前工作目录位于Vue项目的根部）： ```bash npm install axios vue-router vuex --save ``` 这些软件包分别提供了发起Ajax请求的能力、管理应用程序状态变化的功能和支持SPA(Single Page Application)模式下的导航机制。 #### 编写Vue组件 下面给出一段简化版的HTML模板配合JavaScript部分共同构成完整的登录窗体结构： ```html <template> <div class="login-container"> <form @submit.prevent="handleLogin()"> <!-- 用户名 --> <label>Username:</label><br /> <input v-model.trim="formData.username" type="text"/><br /><br /> <!-- 密码 --> <label>Password:</label><br /> <input v-model.trim="formData.password" type="password"/><br /><br /> <!-- 提交按钮 --> <button type="submit">Sign In</button> </form> {{ message }} </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import axios from 'axios'; const formData = ref({ username: '', password: '' }); let message = ''; async function handleLogin() { try { const res = await axios.post('/api/login/', formData.value); console.log(res.data); alert(`Success! ${res.data.message}`); } catch (err) { console.error(err.response?.data || err.toString()); message = `Error occurred during sign-in process.`; } } </script> ``` 这段代码实现了数据绑定、事件监听器注册等功能，同时利用Axios库来进行异步通信操作从而达到与远程服务器交换信息的目的。