好的，我可以为你提供一个Vue和Node.js配合
MySQL的简单项目示例，包括登录功能和记事本功能。
1. 创建数据库和表
首先需要创建一个
MySQL数据库和表，用于存储用户信息和记事本内容。
```
CREATE DATABASE myapp;
USE myapp;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(50) NOT NULL
);
CREATE TABLE notes (
id INT AUTO_INCREMENT PRIMARY KEY,
userId INT NOT NULL,
content TEXT NOT NULL,
createdAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (userId) REFERENCES users(id)
);
```
以上代码创建了一个名为“myapp”的数据库，包含两个表：“users”表用于存储用户信息，包括ID、用户名和密码；“notes”表用于存储记事本内容，包括ID、用户ID、内容和创建时间。
2. 创建Node.js
后端API
在新建一个文件夹，用于存放Node.js项目文件，例如“myapp”。
在该文件夹下，创建一个名为“package.json”的文件，用于存放项目依赖和配置信息。在命令行中输入以下命令，按照提示填写项目信息：
```
npm init
```
在“myapp”文件夹下，创建一个名为“server.js”的文件，用于编写Node.js
后端API代码。在该文件中，需要引入Express、body-parser和
MySQL模块，分别用于构建HTTP服务、解析
请求体和连接
MySQL数据库。
```
const express = require('express');
const bodyParser = require('body-parser');
const
mysql = require('
mysql');
const app = express();
const port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const connection =
mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'myapp'
});
connection.connect();
app.post('/api/login', (req, res) => {
const username = req.body.username;
const password = req.body.password;
connection.query(`SELECT * FROM users WHERE username='${username}' AND password='${password}'`, (error, results, fields) => {
if (error) throw error;
if (results.length > 0) {
res.send({ success: true, message: '登录成功', user: results[0] });
} else {
res.send({ success: false, message: '用户名或密码错误' });
}
});
});
app.get('/api/notes', (req, res) => {
const userId = req.query.userId;
connection.query(`SELECT * FROM notes WHERE userId=${userId} ORDER BY createdAt DESC`, (error, results, fields) => {
if (error) throw error;
res.send(results);
});
});
app.post('/api/notes', (req, res) => {
const userId = req.body.userId;
const content = req.body.content;
connection.query(`INSERT INTO notes (userId, content) VALUES (${userId}, '${content}')`, (error, results, fields) => {
if (error) throw error;
res.send({ success: true, message: '保存成功' });
});
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
```
以上代码创建了一个HTTP服务，包含三个API
接口：
- “/api/login”用于用户登录，接收用户名和密码，查询数据库中是否存在对应记录，并
返回登录结果和用户信息；
- “/api/notes”用于
获取用户的记事本内容，接收用户ID，查询数据库中对应用户的所有记录，并按照创建时间倒序排列
返回；
- “/api/notes”用于保存用户的记事本内容，接收用户ID和内容，将记录插入数据库，并
返回保存结果。
3. 创建Vue前端界面
在“myapp”文件夹下，创建一个名为“client”的子文件夹，用于存放Vue项目文件。
在命令行中输入以下命令，创建一个基于Webpack模板的Vue项目：
```
vue init webpack client
```
按照提示填写项目信息，等待依赖安装完成后，进入“client”文件夹，输入以下命令运行Vue项目：
```
npm run dev
```
在浏览器中打开http://localhost:8080，应该能看到Vue项目的默认界面。
在“client”文件夹下，进入“src/components”子文件夹，创建一个名为“Login.vue”的文件，用于编写用户登录界面。在该文件中，需要引入
axios模块，用于发送HTTP
请求。
```
<template>
<div>
<h1>用户登录</h1>
<form>
<div>
<label>用户名：</label>
<input type="text" v-model="username">
</div>
<div>
<label>密码：</label>
<input type="password" v-model="password">
</div>
<div>
<button type="button" @click="login">登录</button>
</div>
</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(
response => {
if (
response.data.success) {
this.$emit('login',
response.data.user);
} else {
alert(
response.data.message);
}
}).catch(error => {
console.error(error);
});
}
}
};
</script>
```
以上代码创建了一个包含用户名、密码输入框和登录按钮的用户登录界面。当用户点击登录按钮时，会向
后端发送一个“/api/login”
接口的POST
请求，传递用户名和密码参数，并根据
返回结果执行相应的操作。
在“client”文件夹下，进入“src/components”子文件夹，创建一个名为“Notebook.vue”的文件，用于编写记事本界面。在该文件中，需要引入
axios模块，用于发送HTTP
请求。
```
<template>
<div>
<h1>记事本</h1>
<form>
<div>
<textarea v-model="content"></textarea>
</div>
<div>
<button type="button" @click="save">保存</button>
</div>
</form>
<ul>
<li v-for="note in notes" :key="note.id">{{ note.content }}</li>
</ul>
</div>
</template>
<script>
import
axios from '
axios';
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
content: '',
notes: []
};
},
created() {
this.loadNotes();
},
methods: {
loadNotes() {
axios.get(`/api/notes?userId=${this.user.id}`).then(
response => {
this.notes =
response.data;
}).catch(error => {
console.error(error);
});
},
save() {
axios.post('/api/notes', {
userId: this.user.id,
content: this.content
}).then(
response => {
if (
response.data.success) {
this.loadNotes();
this.content = '';
} else {
alert(
response.data.message);
}
}).catch(error => {
console.error(error);
});
}
}
};
</script>
```
以上代码创建了一个包含文本输入框、保存按钮和记事本列表的记事本界面。当用户点击保存按钮时，会向
后端发送一个“/api/notes”
接口的POST
请求，传递用户ID和内容参数，并根据
返回结果执行相应的操作。同时，页面会重新加载并显示更新后的记事本列表。
4. 创建Vue根组件
在“client”文件夹下，进入“src”子文件夹，打开“App.vue”文件，用于编写整个Vue项目的根组件。在该文件中，需要引入Login和Notebook组件，根据用户登录状态切换显示。
```
<template>
<div>
<login v-if="!user" @login="user = $event"></login>
<notebook v-if="user" :user="user"></notebook>
</div>
</template>
<script>
import Login from './components/Login.vue';
import Notebook from './components/Notebook.vue';
export default {
components: {
Login,
Notebook
},
data() {
return {
user: null
};
}
};
</script>
```
以上代码根据用户登录状态切换显示Login和Notebook组件，并将用户信息通过props传递给Notebook组件。
5. 编译和运行Vue项目
在命令行中进入“client”文件夹，输入以下命令编译Vue项目：
```
npm run build
```
编译完成后，在“client/dist”子文件夹下会生成一个名为“index.html”的文件和一些静态资源文件。
在“myapp”文件夹下，修改“server.js”文件，添加以下代码，用于引入Vue项目的静态资源：
```
app.use(express.static(__dirname + '/client/dist'));
```
在命令行中输入以下命令运行Node.js
后端API服务：
```
node server.js
```
在浏览器中访问http://localhost:3000，应该能看到Vue项目的登录界面。输入正确的用户名和密码后，应该能进入记事本界面，进行内容输入和保存操作。
以上就是一个使用Vue和Node.js配合
MySQL的简单项目示例，包括登录功能和记事本功能。希望对你有所帮助！
最低0.47元/天 解锁文章
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
