Vue连接数据库实现登录注册

傷城~ 2023-10-09 23:53 2阅读 0赞

在前端开发中，经常需要将用户的注册和登录信息存储到数据库中，然后再进行登录验证。本文将介绍如何使用Vue连接数据库实现登录注册功能。

##### 前提条件 #####

在开始之前，需要安装并配置好以下环境：

1.  Vue.js
2.  Node.js
3.  `MongoDB`

安装依赖

安装Vue.js和相关依赖：

npm install vue vue-router axios --save

安装MongoDB的Node.js驱动程序：

npm install mongodb --save

创建数据库

在MongoDB中创建一个数据库（例如`user`），并创建两个集合 (`users` 和 `sessions`)。

实现注册功能

在Vue.js中创建一个注册页面，并在该页面的`methods`中添加一个`register`方法，该方法将通过`axios`将数据发送到后端服务器，并将用户数据保存到MongoDB数据库中。

<template>
      <div>
        <h1>Registration Page</h1>
        <form>
          <input type="text" v-model="username" placeholder="Username"/><br/>
          <input type="password" v-model="password" placeholder="Password"/><br/>
          <button @click.prevent="register">Register</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    export default {
        
      data() {
        
        return {
        
          username: '',
          password: ''
        }
      },
      methods: {
        
        register() {
        
          axios.post('/api/register', {
        
            username: this.username,
            password: this.password
          }).then(function (response) {
        
            console.log(response);
          }).catch(function (error) {
        
            console.log(error);
          });
        }
      }
    }
    </script>

后端服务器代码：

实现登录功能

在Vue.js中创建一个登录页面，并在该页面的`methods`中添加一个`login`方法，该方法将通过`axios`将数据发送到后端服务器，并与数据库中存储的用户信息进行比较。如果匹配成功，将在MongoDB中创建一个会话记录，并在前端代码中存储一个会话ID。

<template>
      <div>
        <h1>Login Page</h1>
        <form>
          <input type="text" v-model="username" placeholder="Username"/><br/>
          <input type="password" v-model="password" placeholder="Password"/><br/>
          <button @click.prevent="login">Login</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    export default {
        
      data() {
        
        return {
        
          username: '',
          password: ''
        }
      },
      methods: {
        
        login() {
        
          axios.post('/api/login', {
        
            username: this.username,
            password: this.password
          }).then(function (response) {
        
            console.log(response);
            localStorage.setItem('sessionId', response.data.sessionId);
          }).catch(function (error) {
        
            console.log(error);
          });
        }
      }
    }
    </script>

后端服务器代码：

app.post('/api/login', (req, res) => {
        
      MongoClient.connect(url, {
         useNewUrlParser: true }, function(err, client) {
        
        if (err) throw err;
    
        const db = client.db(dbName);
        const collection = db.collection('users');
    
        collection.findOne({
        
          username: req.body.username,
          password: req.body.password
        }, (err, result) => {
        
          if (err) throw err;
    
          if (result) {
        
            const sessionId = Math.floor(Math.random() * 1000000).toString();
            const sessionCollection = db.collection('sessions');
    
            sessionCollection.insertOne({
        
              sessionId: sessionId,
              username: req.body.username
            }, (err, result) => {
        
              if (err) throw err;
    
              client.close();
              res.status(200).json({
        
                message: 'Login successful.',
                sessionId: sessionId
              });
            });
          } else {
        
            client.close();
            res.status(403).json({
        
              message: 'Username or password is incorrect.'
            });
          }
        });
      });
    });

验证会话

验证会话的过程可以在前端或后端完成。在前端，可以检查本地存储的会话ID是否存在。在后端，可以检查请求头中是否提供了会话ID。

下面是一个在前端检查会话的例子：

import axios from 'axios';
    export default {
        
      created() {
        
        axios.get('/api/verify', {
        
          headers: {
        
            'sessionId': localStorage.getItem('sessionId')
          }
        }).then(function (response) {
        
          console.log(response);
        }).catch(function (error) {
        
          console.log(error);
          // redirect to login page
        });
      }
    }

后端服务器代码：

app.get('/api/verify', (req, res) => {
        
      const sessionId = req.headers.sessionid;
    
      MongoClient.connect(url, {
         useNewUrlParser: true }, function(err, client) {
        
        if (err) throw err;
    
        const db = client.db(dbName);
        const collection = db.collection('sessions');
    
        collection.findOne({
        
          sessionId: sessionId
        }, (err, result) => {
        
          if (err) throw err;
    
          if (result) {
        
            client.close();
            res.status(200).json({
        
              message: 'Session is valid.'
            });
          } else {
        
            client.close();
            res.status(401).json({
        
              message: 'Session is invalid.'
            });
          }
        });
      });
    });

总结

本文介绍了如何使用Vue.js连接MongoDB数据库实现登录和注册功能。我们使用了Node.js作为后端服务器，并通过Axios将数据从前端发送到后端服务器。同时，我们还介绍了如何创建并验证会话，以保护用户数据的安全。希望本文能对您有所帮助。