### 实现基于Vue3和Django的用户管理系统 #### 创建Django REST API 为了支持教师用户的注册、登录以及密码找回功能，首先需要创建相应的RESTful接口。这可以通过`django-rest-framework`来快速实现。 ```bash pip install djangorestframework ``` 在Django项目的设置文件中添加： ```python INSTALLED_APPS = [ ... 'rest_framework', ] ``` 对于每个操作（如注册、登录），可以定义独立的API视图函数或类[^1]。 #### 构建Vue前端界面 ##### 安装依赖项 确保已经安装了必要的包，比如Axios用于HTTP请求处理。 ```bash npm install axios pinia vue-router@next --save ``` ##### 配置Pinia Store 在`src/stores/userStore.js`中配置存储逻辑以便管理和持久化用户会话数据。 ```javascript import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ user: null, token: '' }), actions: { setUserToken(token) { this.token = token; } }, }) ``` ##### 开发Login.vue组件 此组件负责收集用户名和密码，并通过POST请求发送给服务器验证身份。 ```html <template> <div class="login"> <!-- 表单 --> <form @submit.prevent="handleLogin()"> Email:<input v-model="email" type="text"/> Password:<input v-model="password" type="password"/> <button>Login</button> </form> </div> </template> <script setup> import { ref } from 'vue' import axios from 'axios'; import { useRouter } from 'vue-router'; import { useUserStore } from '../stores/userStore'; const email = ref(''); const password = ref(''); let router = useRouter(); let store = useUserStore(); async function handleLogin() { try { let response = await axios.post('/api/login/', { email: email.value, password: password.value }); console.log(response.data); // 存储token至store store.setUserToken(response.data.access_token); // 路由跳转到主页或其他页面 router.push({ name: 'home' }); } catch (error) { alert(error.response?.data || error.message); } } </script> ``` ##### Register.vue 组件设计 类似于登录流程，但目标是向服务器发出带有新账户详情的新POST请求以完成注册过程。 ```html <template> <div class="register"> <h2>Register New Account</h2> <form @submit.prevent="handleSubmit()"> Name:<input v-model="name" required /> Email:<input v-model="email" required /> Password:<input v-model="password" type="password" required /> Confirm Password:<input v-model="confirmPassword" type="password" required /> <button :disabled="!isFormValid">Submit</button> </form> </div> </template> <script setup> // ...省略部分代码... function handleSubmit(){ if(password !== confirmPassword){ alert("Passwords do not match"); return false; } axios.post("/api/register/",{ username:name, email:email, password:password }).then((response)=>{ console.log(response); // 成功后可导航回登录页或者其他地方 }).catch(err=>{ console.error(err); }) } computed(() => ({ isFormValid })) </script> ``` #### 处理忘记密码场景下的邮件恢复机制 利用Python内置模块`smtplib`或者第三方服务SendGrid/Sendinblue等发送含有重设链接的安全电子邮件给用户。该链接应指向一个专门用来更改密码的路由地址，在那里允许输入新的密码并更新数据库记录[^2]。 #### 结合Vue Router进行页面间导航 最后一步就是把所有的这些单独的功能连接起来形成完整的用户体验流线。使用`vue-router`可以帮助轻松地管理不同状态之间的转换，例如从登陆界面向主应用程序界面过渡。 ```javascript import { createRouter, createWebHistory } from 'vue-router' import LoginView from './views/LoginView.vue' import MainView from './views/MainView.vue' const routes = [ { path: '/', component: LoginView }, { path: '/main', component: MainView }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ```