Vue MySQL 实现登录注册案例

在现代 web 应用开发中，安全性是一个至关重要的问题，为了确保用户数据的安全性和隐私，我们通常需要实施复杂的验证和授权机制，本篇文章将介绍如何使用 Vue.js 和 MySQL 来构建一个简单的登录注册系统。

环境准备与安装

我们需要安装一些必要的工具和库来开始我们的项目,以下是大致的步骤：

1. 创建新项目： 使用 vue create 命令创建一个新的 Vue 项目。

   vue create login-register-app
   cd login-register-app

2. 安装依赖： 在项目目录下运行以下命令来安装所需的依赖包。

   npm install mysql axios

3. 配置 MySQL 数据库连接： 创建一个新的文件 src/services/mysqlService.js 并添加以下代码来配置 MySQL 连接。

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   export default defineConfig({
     plugins: [vue()],
     server: {
       port: 3000,
     },
     build: {
       target: 'electron-renderer',
       rollupOptions: {
         input: 'index.html',
       },
     },
     resolve: {
       alias: {
         '@': '@/',
       },
     },
   });

4. 创建数据库模型： 在项目的根目录下创建一个名为 db.js 的文件,并编写以下代码来定义数据库模型。

   const Sequelize = require('sequelize');
   const sequelize = new Sequelize('login_register_db', 'root', '', {
     host: 'localhost',
     dialect: 'mysql',
   });
   const User = sequelize.define('User', {
     username: {
       type: Sequelize.STRING,
       allowNull: false,
     },
     password: {
       type: Sequelize.STRING,
       allowNull: false,
     },
   });
   module.exports = sequelize;

5. 配置 Axios 客户端： 在 src/main.js 文件中引入并配置 Axios 客户端以进行 API 调用。

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   import axios from 'axios';
   import db from '../services/db';
   axios.defaults.baseURL = 'http://localhost:3000/api';
   axios.interceptors.request.use((config) => {
     config.headers['Content-Type'] = 'application/json';
     return config;
   }, (error) => Promise.reject(error));
   new Vue({
     router,
     store,
     render: (h) => h(App),
   }).$mount('#app');

6. 创建表单组件： 创建一个新的文件 src/components/LoginRegisterForm.vue 并添加以下代码。

   <template>
     <div class="form-container">
       <form @submit.prevent="handleSubmit">
         <input v-model="username" placeholder="Username" />
         <input v-model="password" type="password" placeholder="Password" />
         <button type="submit">Login</button>
       </form>
     </div>
   </template>
   <script>
   import axios from 'axios';
   export default {
     data() {
       return {
         username: '',
         password: '',
       };
     },
     methods: {
       handleSubmit() {
         if (this.username && this.password) {
           axios.post('/api/login', {
             username: this.username,
             password: this.password,
           })
             .then((response) => {
               console.log(response.data);
             })
             .catch((error) => {
               console.error(error);
             });
         }
       },
     },
   };
   </script>
   <style scoped>
   .form-container {
     width: 300px;
     margin: 0 auto;
   }
   form {
     display: flex;
     flex-direction: column;
   }
   input {
     padding: 10px;
     border-radius: 5px;
     margin-bottom: 10px;
     box-sizing: border-box;
   }
   button {
     padding: 10px;
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   }
   </style>

7. 创建路由和控制器： 配置路由并在 src/router/index.js 中添加以下代码。

   import Vue from 'vue';
   import Router from 'vue-router';
   import LoginRegister from './components/LoginRegisterForm.vue';
   Vue.use(Router);
   const routes = [
     {
       path: '/',
       name: 'LoginRegister',
       component: LoginRegister,
     },
   ];
   const router = new Router({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   export default router;

8. 创建登录控制器： 创建一个名为 src/controllers/AuthenticationController.js 的文件,并添加以下代码。

   import axios from 'axios';
   import UserService from '../../services/userService';
   export async function authenticate(username, password) {
     try {
       const response = await axios.post('/api/authenticate', {
         username,
         password,
       });
       return response.data.token;
     } catch (error) {
       throw error.response.data.message;
     }
   }

9. 修改服务层： 修改 src/services/userService.js 文件以调用认证控制器。

   import AuthenticationController from '../../controllers/AuthenticationController';
   const userService = {
     register: async (data) => {
       // Register logic here
     },
     login: async (data) => {
       const token = await AuthenticationController.authenticate(data.username, data.password);
       return token;
     },
   };
   export default userService;

10. 测试登录功能： 使用 Postman 或任何其他 HTTP 客户端发送 POST 请求到 /api/authenticate,提供正确的用户名和密码即可成功登录。

通过以上步骤，我们可以完成一个简单的 Vue 登录注册系统，这个系统包括了基本的用户注册、登录以及安全性的处理，在实际应用中，你可能还需要考虑更多的安全措施，如防止 SQL 注入攻击、加密传输等，希望本文能为你搭建一个基础的 Vue + MySQL 登录注册系统提供帮助。