Vue CLI3 连接 MySQL：构建高效前端与后端交互的解决方案 在当今快速迭代的前端开发中，Vue.js凭借其高效的数据绑定和组件化设计，已经成为众多开发者首选的前端框架

    而 Vue CLI3 作为 Vue.js 的脚手架工具，更是极大简化了项目的初始化和配置过程

    然而，一个完整的应用不仅需要强大的前端表现，还需要稳定可靠的后端支持

    MySQL 作为一款开源的关系型数据库管理系统，凭借其高性能、可靠性和灵活性，在后端开发中占据重要地位

    本文将详细介绍如何使用 Vue CLI3创建一个前端项目，并通过 Node.js 和 Express框架连接 MySQL 数据库，从而实现前后端的高效交互

     一、准备工作 在开始之前，请确保你已经安装了以下软件： 1.Node.js：用于运行 JavaScript 代码，特别是在服务器端

     2.Vue CLI 3：用于快速搭建 Vue.js 项目

     3.MySQL：关系型数据库，用于存储和管理数据

     4.MySQL Workbench（可选）：图形化数据库管理工具，方便数据库的设计和管理

     二、创建 Vue CLI3 项目 首先，我们需要使用 Vue CLI3创建一个新的 Vue.js 项目

    如果你还没有安装 Vue CLI3，可以通过以下命令全局安装： bash npm install -g @vue/cli 安装完成后，使用以下命令创建一个新项目： bash vue create my-vue-app 按照提示选择预设或自定义配置，完成项目初始化

    进入项目目录： bash cd my-vue-app 启动开发服务器，确保前端项目正常运行： bash npm run serve 三、设置后端服务器 接下来，我们将在项目根目录下创建一个新的目录`backend`，用于存放后端代码

    进入该目录并初始化一个新的 Node.js 项目： bash mkdir backend cd backend npm init -y 安装必要的依赖，包括 Express 和 MySQL 的 Node.js客户端`mysql2`： bash npm install express mysql2 body-parser cors 创建一个名为`server.js` 的文件，并编写基本的服务器代码： javascript const express = require(express); const mysql = require(mysql2); const bodyParser = require(body-parser); const cors = require(cors); const app = express(); const port =3000; //允许跨域请求 app.use(cors()); // 解析 JSON 请求体 app.use(bodyParser.json()); // 配置 MySQL 连接 const db = mysql.createConnection({ host: localhost, user: root, password: your_mysql_password, database: my_database }); //连接到数据库 db.connect(err =>{ if(err){ console.error(Error connecting to the database:, err.stack); return; } console.log(Connected to the MySQL server.); }); //示例路由：获取用户列表 app.get(/api/users,(req, res) =>{ const sql = SELECTFROM users; db.query(sql,(err, results) =>{ if(err) throw err; res.json(results); }); }); // 启动服务器 app.listen(port,() =>{ console.log(`Server is running on http://localhost:${port}`); }); 在上面的代码中，我们创建了一个简单的 Express 服务器，并配置了跨域请求处理、JSON 请求体解析和 MySQL 数据库连接

    同时，我们定义了一个示例路由`/api/users`，用于从数据库中获取用户列表

     四、创建 MySQL 数据库和表 在继续之前，请确保你已经启动了 MySQL 服务，并创建了数据库和相应的表

    你可以使用 MySQL Workbench 或命令行工具来完成这些操作

    以下是一个示例 SQL脚本，用于创建数据库和表： sql CREATE DATABASE my_database; USE my_database; CREATE TABLE users( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL UNIQUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); 执行上述脚本后，你将拥有一个名为`my_database` 的数据库和一个包含`id`、`name`、`email` 和`created_at`字段的`users` 表

     五、前后端交互 现在，我们已经在前端使用 Vue CLI3 创建了一个项目，在后端使用 Node.js 和 Express 连接了 MySQL 数据库

    接下来，我们将实现前后端的交互

     在 Vue.js 项目中，安装`axios`，这是一个基于 Promise 的 HTTP客户端，用于发送 HTTP 请求： bash npm install axios 在`src/components`目录下创建一个新的组件`UserList.vue`，用于显示用户列表： vue 在`src/App.vue` 中引入并使用`UserList`组件： vue 现在，当你启动前端开发服务器并访问应用时，它将通过 Axios 向后端服务器发送 HTTP GET 请求，获取用户列表并显示在页面上

     六、扩展功能 为了进一步完善应用，你可