掌握Vue Element与MySQL，企业级项目实战指南！一步到位，从零开始轻松构建全栈应用

引言

随着前端技术的发展，Vue.js 已经成为了最受欢迎的前端框架之一。而Vue Element UI 作为官方组件库，提供了丰富的组件，极大地提高了开发效率。同时，MySQL 作为一款开源的关系型数据库，广泛应用于企业级项目。本文将带领读者从零开始，掌握Vue Element与MySQL，并实战构建一个企业级全栈应用。

一、环境准备

在开始之前，请确保以下环境已安装：

Node.js（推荐版本：v14.x）
npm（Node.js 的包管理器）
MySQL（推荐版本：5.7.x）
Vue CLI（Vue.js 的命令行工具）

二、项目初始化

创建一个新项目：

vue create vue-element-mysql-project

cd vue-element-mysql-project

安装 Vue Element UI：

npm install element-ui --save

在 main.js 中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

三、数据库设计

创建数据库：

CREATE DATABASE vue_element_mysql_db;

创建表结构：

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  email VARCHAR(100),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

四、后端开发

安装 Express：

npm install express --save

创建 server.js 文件：

const express = require('express')
const mysql = require('mysql')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.json())

// 数据库连接配置
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'vue_element_mysql_db'
})

db.connect((err) => {
  if (err) throw err
  console.log('数据库连接成功')
})

// 用户列表接口
app.get('/users', (req, res) => {
  const sql = 'SELECT * FROM users'
  db.query(sql, (err, results) => {
    if (err) throw err
    res.json(results)
  })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动成功，监听端口：3000')
})

启动服务器：

node server.js

五、前端开发

创建用户列表组件 UserList.vue：

<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    fetchUsers() {
      const axios = require('axios')
      axios.get('/users')
        .then(response => {
          this.users = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

在 App.vue 中引入 UserList 组件：

<template>
  <div id="app">
    <UserList></UserList>
  </div>
</template>

<script>
import UserList from './components/UserList.vue'

export default {
  name: 'App',
  components: {
    UserList
  }
}
</script>

六、项目运行

启动前端项目：

npm run serve

打开浏览器，访问 http://localhost:8080，即可看到用户列表。

七、总结

通过本文的介绍，读者可以了解到如何使用 Vue Element 和 MySQL 构建企业级全栈应用。在实际开发过程中，还可以根据需求添加更多功能和组件。希望本文能对读者有所帮助。