好的，我可以为您提供一个基本的 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 数据库中。
最低0.47元/天 解锁文章
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
