使用 Vue.js、Node.js 和 MySQL 构建全栈应用

在现代的 Web 开发中，前后端分离的架构越来越受到欢迎。Vue.js 是一个流行的前端框架，而 Node.js 和 MySQL 则是后端开发和数据库存储的热门选择。本文将介绍如何使用这三者构建一个简单的全栈应用。

技术栈介绍

  • Vue.js：一个用于构建用户界面的渐进式 JavaScript 框架。其核心库专注于视图层，易于上手，并与其他库或已有项目进行整合。
  • Node.js：一个运行在服务器端的 JavaScript 环境，使用了事件驱动、非阻塞I/O模型，使其性能优越，非常适合构建 I/O 密集型应用。
  • MySQL：一个流行的关系型数据库管理系统，使用 SQL（结构化查询语言）来存储和管理数据。

项目结构

在开始之前，我们需要确定我们的项目结构，如下所示：

/myapp
|-- /client      # Vue.js 前端
|-- /server      # Node.js 后端
|-- /database     # MySQL 数据库

1. 创建 Vue.js 前端

首先，我们需要创建 Vue.js 项目。在终端执行以下命令：

npm install -g @vue/cli
vue create client

在创建过程中选择 "Default" 预设。

1.1 添加一个简单组件

我们将在 client/src/components 目录下创建一个名为 HelloWorld.vue 的组件：

<template>
  <div>
    {{ message }}
    <button @click="fetchData">获取数据</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎使用 Vue.js',
      items: []
    };
  },
  methods: {
    fetchData() {
      fetch('http://localhost:3000/api/items')
        .then(response => response.json())
        .then(data => {
          this.items = data;
        });
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

2. 创建 Node.js 后端

在项目根目录下创建 server 目录，并在其中初始化 Node.js 应用：

mkdir server
cd server
npm init -y
npm install express mysql cors

2.1 创建简单的 API

在 server 目录中创建一个名为 index.js 的文件：

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express();
const PORT = 3000;

// middleware
app.use(cors());
app.use(express.json());

// MySQL 数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

// 创建数据库连接
db.connect(err => {
  if (err) {
    console.error('数据库连接失败:', err);
  } else {
    console.log('数据库连接成功');
  }
});

// 提供 API 接口
app.get('/api/items', (req, res) => {
  db.query('SELECT * FROM items', (err, results) => {
    if (err) {
      return res.status(500).send(err);
    }
    res.json(results);
  });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器在 http://localhost:${PORT} 上运行`);
});

3. 数据库设计

假设我们有一个名为 items 的表，结构如下：

CREATE TABLE items (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);

你可以使用 MySQL 客户端工具创建这个表，并插入一些示例数据：

INSERT INTO items (name) VALUES ('Item 1'), ('Item 2'), ('Item 3');

4. 启动项目

4.1 启动后端

在 server 目录中启动 Node.js 服务器：

node index.js

4.2 启动前端

在 client 目录中启动 Vue.js 前端：

npm run serve

5. 流程图

以下是应用的基本流程图：

flowchart TD
    A[用户请求] --> B[Vue.js 前端发送请求]
    B --> C[Node.js 后端接收请求]
    C --> D[查询 MySQL 数据库]
    D --> E[返回数据给 Node.js]
    E --> F[Node.js 返回数据给前端]
    F --> G[Vue.js 显示数据]

结尾

通过以上步骤，我们成功地构建了一个简单的全栈应用，其中包含 Vue.js 前端、Node.js 后端以及 MySQL 数据库。在实际开发中，我们会面对更复杂的需求和挑战，但本项目提供的基础逻辑可以作为进一步探索的出发点。希望你能在此基础上深入学习和扩展自己的全栈开发能力！