### 如何使用 Django 和 Vue 实现用户登录与注册功能 #### 后端部分 (Django) 1. **安装 MySQL 驱动程序** 安装 `mysqlclient` 或者 `pymysql` 来支持 Django 连接 MySQL 数据库[^1]。 ```bash pip install mysqlclient ``` 2. **创建并配置数据库** 创建一个名为 `myprojectdb` 的 MySQL 数据库，并在项目的 `settings.py` 文件中进行如下配置： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'myprojectdb', 'USER': 'root', 'PASSWORD': 'your_password', 'HOST': 'localhost', 'PORT': '3306', } } ``` 3. **创建模型和迁移** 在 Django 中定义用户的模型，例如用户名、密码等字段。通过命令生成迁移文件并应用到数据库中。 ```python from django.contrib.auth.models import AbstractUser class CustomUser(AbstractUser): pass # 可以在此处添加额外的字段 ``` 执行以下命令完成迁移操作： ```bash python manage.py makemigrations python manage.py migrate ``` 4. **实现登录逻辑** 编写视图函数处理用户提交的数据，并验证其合法性。如果合法，则返回 token 给前端用于后续请求认证。 ```python from rest_framework.authtoken.views import ObtainAuthToken from rest_framework.response import Response class LoginView(ObtainAuthToken): def post(self, request, *args, **kwargs): serializer = self.serializer_class(data=request.data, context={'request': request}) if serializer.is_valid(): user = serializer.validated_data['user'] token, created = Token.objects.get_or_create(user=user) return Response({'token': token.key}) else: return Response(serializer.errors, status=400) ``` 5. **设置 URL 映射** 将上述视图绑定至特定路径以便于调用。 ```python urlpatterns = [ path('api/login/', views.LoginView.as_view(), name='login'), ] ``` #### 前端部分 (Vue) 1. **安装 Axios 并全局引入** 使用 Axios 库来简化 HTTP 请求过程，在 main.js 文件里将其挂载到 Vue 原型链上方便各组件访问[^3]。 ```javascript import axios from 'axios'; Vue.prototype.$axios = axios; ``` 2. **构建表单收集数据** 利用 Element UI 提供的 Form 表单项设计界面布局，同时指定校验规则确保输入有效。 ```html <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item prop="pass"> <el-input type="password" v-model="ruleForm.pass"></el-input> </el-form-item> <el-button @click.native.prevent="handleSubmit">Submit</el-button> </el-form> ``` 3. **编写交互逻辑** 当点击按钮触发事件时，先组装好待传输的信息包再发起 POST 请求；成功响应则存储令牌值并重定向页面，反之提示错误消息。 ```javascript methods: { handleSubmit() { const formData = new FormData(); formData.append('username', this.ruleForm.name); formData.append('password', this.ruleForm.pass); this.$axios.post('/api/login/', formData).then(response => { localStorage.setItem('token', response.data.token); // 存储 token this.$router.push({path:'/home'}); // 页面跳转 }).catch(error => { alert("Error submitting form!"); }); } }, ``` 4. **登出机制** 清除本地保存的身份凭证并通过编程手段导航回到初始状态页[^4]。 ```javascript tuichu(){ var storage = window.localStorage; storage.removeItem('token'); this.$router.push('/'); } ``` ---