vue nodejs mysql登录注册 实现数据库登陆注册
时间: 2024-01-30 18:03:26 浏览: 23
好的,我可以为您提供一个基本的 Vue + Node.js + MySQL 的登录注册系统实现。首先,您需要安装 Node.js 和 MySQL,然后按照以下步骤进行操作:
1. 创建数据库
首先,您需要在 MySQL 中创建一个名为 `users` 的数据库,并在其中创建一个名为 `users` 的表,该表应包含以下字段:
```
id INT(11) NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL,
PRIMARY KEY (id)
```
2. 创建后端 API
接下来,您需要创建一个 Node.js 项目,并在其中安装以下依赖项:`express`、`mysql`、`body-parser`。
然后,创建一个名为 `index.js` 的文件,并将以下代码复制到其中:
```javascript
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'users'
});
connection.connect((err) => {
if (err) {
console.error('Error connecting to database: ' + err.stack);
return;
}
console.log('Connected to database.');
});
app.post('/register', (req, res) => {
const { username, password } = req.body;
const sql = `INSERT INTO users (username, password) VALUES ('${username}', '${password}')`;
connection.query(sql, (err, result) => {
if (err) {
console.error(err);
res.status(500).send('Error registering user.');
} else {
res.send('User registered successfully.');
}
});
});
app.post('/login', (req, res) => {
const { username, password } = req.body;
const sql = `SELECT * FROM users WHERE username='${username}' AND password='${password}'`;
connection.query(sql, (err, result) => {
if (err) {
console.error(err);
res.status(500).send('Error logging in.');
} else {
if (result.length === 0) {
res.status(401).send('Invalid username or password.');
} else {
res.send('Logged in successfully.');
}
}
});
});
app.listen(3000, () => {
console.log('Server listening on port 3000.');
});
```
这将创建一个 Express 应用程序,并在其上创建两个端点:`/register` 和 `/login`。`/register` 端点用于注册新用户,`/login` 端点用于验证用户凭据并登录用户。
3. 创建前端应用程序
接下来,您需要创建一个 Vue.js 项目,并在其中安装 `axios` 库。
然后,创建一个名为 `App.vue` 的文件,并将以下代码复制到其中:
```vue
<template>
<div>
<h1>Register</h1>
<form @submit.prevent="register">
<label>
Username:
<input type="text" v-model="username" required>
</label>
<br>
<label>
Password:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">Register</button>
</form>
<hr>
<h1>Login</h1>
<form @submit.prevent="login">
<label>
Username:
<input type="text" v-model="username" required>
</label>
<br>
<label>
Password:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
register() {
axios.post('http://localhost:3000/register', { username: this.username, password: this.password })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
},
login() {
axios.post('http://localhost:3000/login', { username: this.username, password: this.password })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
```
这将创建一个包含两个表单的 Vue 组件:一个用于注册新用户,另一个用于登录现有用户。这些表单将使用 `axios` 库与我们的后端 API 进行通信。
4. 运行应用程序
最后,您需要启动前端和后端应用程序。在两个不同的终端窗口中,分别进入前端和后端项目目录,并运行以下命令:
```bash
# 前端项目目录
npm run serve
# 后端项目目录
node index.js
```
现在,您可以在浏览器中访问前端应用程序,并使用它来注册新用户和登录现有用户。所有数据都将存储在 MySQL 数据库中。