引言
随着前端技术的不断发展,Vue.js 已经成为最受欢迎的前端框架之一。Vue3 作为 Vue.js 的下一代版本,带来了许多新特性和优化。在开发过程中,与后端数据库的对接是必不可少的环节。本文将详细介绍如何使用 Vue3 与 MySQL 数据库进行高效对接。
准备工作
在开始之前,请确保以下准备工作已完成:
- 安装 Node.js 和 npm。
- 安装 Vue3 开发环境,例如 Vue CLI 或 Vite。
- 准备一个 MySQL 数据库环境。
使用 axios 进行 HTTP 请求
Vue3 中可以使用 axios 库进行 HTTP 请求,从而实现与后端服务的通信。以下是一个简单的示例:
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:3000', // 后端服务地址
timeout: 1000 // 请求超时时间
});
// 发送 GET 请求
instance.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// 发送 POST 请求
instance.post('/api/users', {
username: 'test',
password: '123456'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
使用 JSON Web Tokens (JWT) 进行身份验证
为了确保数据安全,您可以使用 JWT 进行用户身份验证。以下是一个简单的示例:
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:3000',
timeout: 1000
});
// 用户登录
function login(username, password) {
return instance.post('/api/login', {
username,
password
});
}
// 用户注册
function register(username, password) {
return instance.post('/api/register', {
username,
password
});
}
// 获取 JWT
function getJWT() {
return localStorage.getItem('jwt');
}
// 设置 JWT
function setJWT(jwt) {
localStorage.setItem('jwt', jwt);
}
// 发送请求前设置 JWT
instance.interceptors.request.use(config => {
const jwt = getJWT();
if (jwt) {
config.headers.Authorization = `Bearer ${jwt}`;
}
return config;
}, error => {
return Promise.reject(error);
});
使用 Sequelize 进行数据库操作
Sequelize 是一个流行的 Node.js 数据库 ORM(对象关系映射)库,可以方便地操作 MySQL 数据库。以下是一个简单的示例:
import { Sequelize, DataTypes } from 'sequelize';
import User from './models/user';
const sequelize = new Sequelize('database', 'username', 'password', {
host: 'localhost',
dialect: 'mysql'
});
// 创建 User 模型
User.init({
username: {
type: DataTypes.STRING,
allowNull: false
},
password: {
type: DataTypes.STRING,
allowNull: false
}
}, { sequelize, modelName: 'user' });
// 同步数据库模型
sequelize.sync();
// 添加用户
function addUser(username, password) {
return User.create({ username, password });
}
// 查询用户
function findUser(username) {
return User.findOne({ where: { username } });
}
总结
本文介绍了如何使用 Vue3 与 MySQL 数据库进行高效对接。通过使用 axios 进行 HTTP 请求、JWT 进行身份验证以及 Sequelize 进行数据库操作,可以轻松实现前后端分离的开发模式。希望本文对您的开发工作有所帮助。
