Vue + TS + MySQL实战示例二：用户认证功能实现
在前面的实战示例中，我们搭建了Vue + TS + MySQL项目标底子架构，包括创建项目、设置数据库连接以及定义了底子的数据模型。本日，我们将在此底子上继续深入，实现用户认证功能，包括用户注册和登录。这是许多Web应用步伐的核心功能之一，通过本示例，你将学习如何在Vue.js应用步伐中使用TypeScript处理惩罚用户输入、与后端API交互以及在MySQL数据库中存储和验证用户数据。一、创建用户注册组件
[*]生成注册组件
在Vue项目中，使用命令行工具生成一个名为Register.vue的组件。在项目目录下打开终端，运行以下命令（假设你的项目使用了Vue Router，假如没有，请根据实际环境调整）：
vue generate component Register
这将在src/components目录下创建Register.vue文件以及相干的测试文件（假如选择生成测试文件）。
[*]编写注册组件模板
打开Register.vue文件，在<template>标签内编写用户注册的表单模板。示例代码如下：
<template>
<div class="register-container">
<h2>注册新用户</h2>
<form @submit.prevent="registerUser">
<label for="name">姓名：</label>
<input type="text" id="name" v-model="name" required />
<label for="email">邮箱：</label>
<input type="email" id="email" v-model="email" required />
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" required />
<button type="submit">注册</button>
</form>
</div>
</template>
在这个模板中，我们创建了一个包含姓名、邮箱和密码输入框的表单，并绑定了相应的v-model指令，以便实时获取用户输入的数据。表单提交时，会调用registerUser方法（我们将在下一步定义）。
[*]编写注册组件逻辑
在<script lang="ts">标签内，定义Register.vue组件的逻辑。起首，导入须要的依靠，包括axios（用于发送HTTP哀求）和之前定义的User模型：
import axios from 'axios';
import User from '@/models/user.model';
export default {
name:'Register',
data() {
return {
name: '',
email: '',
password: ''
};
},
methods: {
async registerUser() {
try {
const newUser: User = {
name: this.name,
email: this.email,
password: this.password
};
await axios.post('/api/register', newUser);
// 注册成功后的逻辑，例如跳转到登录页面或显示提示信息
alert('注册成功，请登录');
} catch (error) {
console.error('注册失败：', error);
// 注册失败后的逻辑，例如显示错误提示信息
alert('注册失败，请检查输入信息');
}
}
}
};
在registerUser方法中，我们起首创建一个User范例的对象，将用户输入的数据赋值给它。然后，使用axios.post方法将用户数据发送到后端的/api/register接口（我们将在后端实现这个接口）。根据哀求的结果，表现相应的提示信息。
二、创建用户登录组件
[*]生成登录组件
类似地，使用命令行工具生成一个名为Login.vue的组件：
vue generate component Login
[*]编写登录组件模板
在Login.vue文件的<template>标签内编写用户登录的表单模板：
<template>
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="loginUser">
<label for="email">邮箱：</label>
<input type="email" id="email" v-model="email" required />
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" required />
<button type="submit">登录</button>
</form>
</div>
</template>
[*]编写登录组件逻辑
在<script lang="ts">标签内编写登录组件的逻辑，同样导入axios：
import axios from 'axios';
export default {
name: 'Login',
data() {
return {
email: '',
password: ''
};
},
methods: {
async loginUser() {
try {
const userData = {
email: this.email,
password: this.password
};
const response = await axios.post('/api/login', userData);
// 登录成功后的逻辑，例如保存用户信息到本地存储或Vuex，跳转到应用程序的主页面
console.log('登录成功：', response.data);
} catch (error) {
console.error('登录失败：', error);
// 登录失败后的逻辑，例如显示错误提示信息
alert('登录失败，请检查邮箱和密码');
}
}
}
};
在loginUser方法中，将用户输入的邮箱和密码构成一个对象，发送到后端的/api/login接口。根据后端返回的结果举行相应的处理惩罚。
三、后端API实现（使用Express.js为例）
[*] 创建API路由文件
在项目标后端部分（假设你使用Express.js作为后端框架），创建一个名为user.routes.js的文件，用于定义用户相干的API路由。
[*] 实现注册路由
在user.routes.js文件中，编写注册路由的处理惩罚逻辑。起首，导入须要的依靠，包括express、bcryptjs（用于密码加密）和之前定义的User模型：
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const User = require('../models/user.model');
router.post('/register', async (req, res) => {
try {
const { name, email, password } = req.body;
// 检查邮箱是否已被注册
const existingUser = await User.findOne({ where: { email } });
if (existingUser) {
return res.status(400).json({ message: '邮箱已被注册' });
}
// 加密密码
const hashedPassword = await bcrypt.hash(password, 10);
// 创建新用户
const newUser = await User.create({
name,
email,
password: hashedPassword
});
res.status(201).json({ message: '注册成功' });
} catch (error) {
console.error('注册失败：', error);
res.status(500).json({ message: '注册失败，请稍后重试' });
}
});
在这个路由处理惩罚函数中，起首从哀求体中获取用户输入的姓名、邮箱和密码。然后，查抄邮箱是否已被其他用户注册。假如邮箱可用，使用bcrypt.hash方法对密码举行加密，并创建一个新的用户记录存储到数据库中。根据操纵结果返回相应的状态码和消息。
[*]实现登录路由
继续在user.routes.js文件中编写登录路由的处理惩罚逻辑：
router.post('/login', async (req, res) => {
try {
const { email, password } = req.body;
// 查找用户
const user = await User.findOne({ where: { email } });
if (!user) {
return res.status(404).json({ message: '用户不存在' });
}
// 验证密码
const isPasswordValid = await bcrypt.compare(password, user.password);
if (!isPasswordValid) {
return res.status(401).json({ message: '密码错误' });
}
// 登录成功，生成并返回令牌（这里简化处理，实际应用中可能需要更完善的令牌机制）
const token = 'your_generated_token';
res.status(200).json({ token });
} catch (error) {
console.error('登录失败：', error);
res.status(500).json({ message: '登录失败，请稍后重试' });
}
});
在登录路由处理惩罚函数中，根据用户输入的邮箱查找用户记录。假如用户存在，使用bcrypt.compare方法验证密码是否精确。假如密码精确，生成一个令牌（这里简单返回一个固定字符串，实际应用中需要根据具体的令牌战略生成）并返回给前端。根据不同的环境返回相应的状态码和消息。
[*]注册路由到应用步伐
在后端应用步伐的入口文件（通常是app.js或index.js）中，将user.routes.js文件中定义的路由注册到应用步伐中：
const userRoutes = require('./routes/user.routes');
app.use('/api', userRoutes);
通过以上步骤，我们实现了用户注册和登录功能的前端组件和后端API。用户可以在前端界面输入注册信息或登录凭据，前端将数据发送到后端举行处理惩罚，后端验证数据并与MySQL数据库举行交互，完成用户认证的流程。在后续的实战示例中，我们将进一步美满这个应用步伐，例如添加用户信息的展示、权限管理等功能。盼望本示例对你理解Vue + TS + MySQL在用户认证方面的应用有所帮助，假如你有任何题目或发起，欢迎在评论区留言。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]