Vue + TS + MySQL实战示例二：用户认证功能实现

在前面的实战示例中，我们搭建了Vue + TS + MySQL项目标底子架构，包括创建项目、设置数据库连接以及定义了底子的数据模型。本日，我们将在此底子上继续深入，实现用户认证功能，包括用户注册和登录。这是许多Web应用步伐的核心功能之一，通过本示例，你将学习如何在Vue.js应用步伐中使用TypeScript处理惩罚用户输入、与后端API交互以及在MySQL数据库中存储和验证用户数据。
一、创建用户注册组件

• 生成注册组件
  在Vue项目中，使用命令行工具生成一个名为Register.vue的组件。在项目目录下打开终端，运行以下命令（假设你的项目使用了Vue Router，假如没有，请根据实际环境调整）：
  

1. vue generate component Register

复制代码

这将在src/components目录下创建Register.vue文件以及相干的测试文件（假如选择生成测试文件）。

• 编写注册组件模板
  打开Register.vue文件，在<template>标签内编写用户注册的表单模板。示例代码如下：
  

1. <template>
2.   <div class="register-container">
3.     <h2>注册新用户</h2>
4.     <form @submit.prevent="registerUser">
5.       <label for="name">姓名：</label>
6.       <input type="text" id="name" v-model="name" required />
7.       <label for="email">邮箱：</label>
8.       <input type="email" id="email" v-model="email" required />
9.       <label for="password">密码：</label>
10.       <input type="password" id="password" v-model="password" required />
11.       <button type="submit">注册</button>
12.     </form>
13.   </div>
14. </template>

复制代码

在这个模板中，我们创建了一个包含姓名、邮箱和密码输入框的表单，并绑定了相应的v-model指令，以便实时获取用户输入的数据。表单提交时，会调用registerUser方法（我们将在下一步定义）。

• 编写注册组件逻辑
  在<script lang="ts">标签内，定义Register.vue组件的逻辑。起首，导入须要的依靠，包括axios（用于发送HTTP哀求）和之前定义的User模型：
  

1. import axios from 'axios';
2. import User from '@/models/user.model';
4. export default {
5.   name:'Register',
6.   data() {
7.     return {
8.       name: '',
9.       email: '',
10.       password: ''
11.     };
12.   },
13.   methods: {
14.     async registerUser() {
15.       try {
16.         const newUser: User = {
17.           name: this.name,
18.           email: this.email,
19.           password: this.password
20.         };
21.         await axios.post('/api/register', newUser);
22.         // 注册成功后的逻辑，例如跳转到登录页面或显示提示信息
23.         alert('注册成功，请登录');
24.       } catch (error) {
25.         console.error('注册失败：', error);
26.         // 注册失败后的逻辑，例如显示错误提示信息
27.         alert('注册失败，请检查输入信息');
28.       }
29.     }
30.   }
31. };

复制代码

在registerUser方法中，我们起首创建一个User范例的对象，将用户输入的数据赋值给它。然后，使用axios.post方法将用户数据发送到后端的/api/register接口（我们将在后端实现这个接口）。根据哀求的结果，表现相应的提示信息。
二、创建用户登录组件

• 生成登录组件
  类似地，使用命令行工具生成一个名为Login.vue的组件：
  

1. vue generate component Login

复制代码

• 编写登录组件模板
  在Login.vue文件的<template>标签内编写用户登录的表单模板：
  

1. <template>
2.   <div class="login-container">
3.     <h2>用户登录</h2>
4.     <form @submit.prevent="loginUser">
5.       <label for="email">邮箱：</label>
6.       <input type="email" id="email" v-model="email" required />
7.       <label for="password">密码：</label>
8.       <input type="password" id="password" v-model="password" required />
9.       <button type="submit">登录</button>
10.     </form>
11.   </div>
12. </template>

复制代码

• 编写登录组件逻辑
  在<script lang="ts">标签内编写登录组件的逻辑，同样导入axios：
  

1. import axios from 'axios';
3. export default {
4.   name: 'Login',
5.   data() {
6.     return {
7.       email: '',
8.       password: ''
9.     };
10.   },
11.   methods: {
12.     async loginUser() {
13.       try {
14.         const userData = {
15.           email: this.email,
16.           password: this.password
17.         };
18.         const response = await axios.post('/api/login', userData);
19.         // 登录成功后的逻辑，例如保存用户信息到本地存储或Vuex，跳转到应用程序的主页面
20.         console.log('登录成功：', response.data);
21.       } catch (error) {
22.         console.error('登录失败：', error);
23.         // 登录失败后的逻辑，例如显示错误提示信息
24.         alert('登录失败，请检查邮箱和密码');
25.       }
26.     }
27.   }
28. };

复制代码

在loginUser方法中，将用户输入的邮箱和密码构成一个对象，发送到后端的/api/login接口。根据后端返回的结果举行相应的处理惩罚。
三、后端API实现（使用Express.js为例）

• 创建API路由文件
  在项目标后端部分（假设你使用Express.js作为后端框架），创建一个名为user.routes.js的文件，用于定义用户相干的API路由。
  
• 实现注册路由
  在user.routes.js文件中，编写注册路由的处理惩罚逻辑。起首，导入须要的依靠，包括express、bcryptjs（用于密码加密）和之前定义的User模型：
  

1. const express = require('express');
2. const router = express.Router();
3. const bcrypt = require('bcryptjs');
4. const User = require('../models/user.model');
6. router.post('/register', async (req, res) => {
7.   try {
8.     const { name, email, password } = req.body;
9.     // 检查邮箱是否已被注册
10.     const existingUser = await User.findOne({ where: { email } });
11.     if (existingUser) {
12.       return res.status(400).json({ message: '邮箱已被注册' });
13.     }
14.     // 加密密码
15.     const hashedPassword = await bcrypt.hash(password, 10);
16.     // 创建新用户
17.     const newUser = await User.create({
18.       name,
19.       email,
20.       password: hashedPassword
21.     });
22.     res.status(201).json({ message: '注册成功' });
23.   } catch (error) {
24.     console.error('注册失败：', error);
25.     res.status(500).json({ message: '注册失败，请稍后重试' });
26.   }
27. });

复制代码

在这个路由处理惩罚函数中，起首从哀求体中获取用户输入的姓名、邮箱和密码。然后，查抄邮箱是否已被其他用户注册。假如邮箱可用，使用bcrypt.hash方法对密码举行加密，并创建一个新的用户记录存储到数据库中。根据操纵结果返回相应的状态码和消息。

• 实现登录路由
  继续在user.routes.js文件中编写登录路由的处理惩罚逻辑：
  

1. router.post('/login', async (req, res) => {
2.   try {
3.     const { email, password } = req.body;
4.     // 查找用户
5.     const user = await User.findOne({ where: { email } });
6.     if (!user) {
7.       return res.status(404).json({ message: '用户不存在' });
8.     }
9.     // 验证密码
10.     const isPasswordValid = await bcrypt.compare(password, user.password);
11.     if (!isPasswordValid) {
12.       return res.status(401).json({ message: '密码错误' });
13.     }
14.     // 登录成功，生成并返回令牌（这里简化处理，实际应用中可能需要更完善的令牌机制）
15.     const token = 'your_generated_token';
16.     res.status(200).json({ token });
17.   } catch (error) {
18.     console.error('登录失败：', error);
19.     res.status(500).json({ message: '登录失败，请稍后重试' });
20.   }
21. });

复制代码

在登录路由处理惩罚函数中，根据用户输入的邮箱查找用户记录。假如用户存在，使用bcrypt.compare方法验证密码是否精确。假如密码精确，生成一个令牌（这里简单返回一个固定字符串，实际应用中需要根据具体的令牌战略生成）并返回给前端。根据不同的环境返回相应的状态码和消息。

• 注册路由到应用步伐
  在后端应用步伐的入口文件（通常是app.js或index.js）中，将user.routes.js文件中定义的路由注册到应用步伐中：
  

1. const userRoutes = require('./routes/user.routes');
3. app.use('/api', userRoutes);

复制代码

通过以上步骤，我们实现了用户注册和登录功能的前端组件和后端API。用户可以在前端界面输入注册信息或登录凭据，前端将数据发送到后端举行处理惩罚，后端验证数据并与MySQL数据库举行交互，完成用户认证的流程。在后续的实战示例中，我们将进一步美满这个应用步伐，例如添加用户信息的展示、权限管理等功能。盼望本示例对你理解Vue + TS + MySQL在用户认证方面的应用有所帮助，假如你有任何题目或发起，欢迎在评论区留言。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。