正文

Vue.js MVC模式数据库操作入门实例：从零开始，轻松实现数据管理

/0 浏览量
0621

在Web开发中，Vue.js因其简洁的语法和响应式的数据绑定而受到广泛欢迎。而MVC（Model-View-Controller）模式是一种常用的软件设计模式，它将应用程序分为三个核心部分：模型（Model）、视图（View）和控制器（Controller）。本篇文章将带你从零开始，学习如何在Vue.js中实现MVC模式的数据库操作。

1. 环境准备

在开始之前，我们需要准备以下环境：

  • Node.js和npm
  • Vue CLI（Vue.js命令行工具）
  • 一个数据库（如MySQL、MongoDB等）

2. 创建Vue项目

首先，我们需要使用Vue CLI创建一个Vue项目。打开命令行，执行以下命令：

vue create vue-mvc-project

然后，按照提示选择项目配置，最后进入项目目录：

cd vue-mvc-project

3. 安装数据库连接库

在项目中安装数据库连接库。以MySQL为例，我们可以使用mysql模块：

npm install mysql

4. 创建MVC组件

在Vue项目中，我们可以创建以下三个组件：

  • Model：负责与数据库进行交互，如执行查询、插入、更新和删除操作。
  • View：负责显示数据，如用户界面。
  • Controller：负责处理用户输入，并调用Model进行数据操作。

4.1 创建Model组件

在src目录下创建一个名为database.js的文件，用于封装数据库操作：

const mysql = require('mysql');

// 创建数据库连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'vue-mvc-project'
});

// 连接数据库
connection.connect(err => {
  if (err) throw err;
  console.log('Connected to the MySQL server.');
});

// 获取所有数据
function getAllData() {
  return new Promise((resolve, reject) => {
    connection.query('SELECT * FROM users', (err, results) => {
      if (err) reject(err);
      resolve(results);
    });
  });
}

// 添加数据
function addData(user) {
  return new Promise((resolve, reject) => {
    connection.query('INSERT INTO users SET ?', user, (err, results) => {
      if (err) reject(err);
      resolve(results);
    });
  });
}

// 更新数据
function updateData(user) {
  return new Promise((resolve, reject) => {
    connection.query('UPDATE users SET ? WHERE id = ?', [user, user.id], (err, results) => {
      if (err) reject(err);
      resolve(results);
    });
  });
}

// 删除数据
function deleteData(id) {
  return new Promise((resolve, reject) => {
    connection.query('DELETE FROM users WHERE id = ?', id, (err, results) => {
      if (err) reject(err);
      resolve(results);
    });
  });
}

module.exports = {
  getAllData,
  addData,
  updateData,
  deleteData
};

4.2 创建View组件

在src目录下创建一个名为UserList.vue的文件，用于显示用户列表：

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="editUser(user)">Edit</button>
        <button @click="deleteUser(user.id)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="addUser">
      <input v-model="newUser.name" placeholder="Name" />
      <input v-model="newUser.email" placeholder="Email" />
      <button type="submit">Add User</button>
    </form>
  </div>
</template>

<script>
import { getAllData, addData, updateData, deleteData } from '../database';

export default {
  data() {
    return {
      users: [],
      newUser: {}
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const users = await getAllData();
        this.users = users;
      } catch (err) {
        console.error(err);
      }
    },
    async addUser() {
      try {
        const result = await addData(this.newUser);
        this.users.push(result.insertId);
        this.newUser = {};
      } catch (err) {
        console.error(err);
      }
    },
    async editUser(user) {
      this.newUser = { ...user };
    },
    async updateUser() {
      try {
        const result = await updateData(this.newUser);
        const index = this.users.findIndex(u => u.id === this.newUser.id);
        this.users[index] = this.newUser;
        this.newUser = {};
      } catch (err) {
        console.error(err);
      }
    },
    async deleteUser(id) {
      try {
        await deleteData(id);
        this.users = this.users.filter(u => u.id !== id);
      } catch (err) {
        console.error(err);
      }
    }
  },
  created() {
    this.fetchUsers();
  }
};
</script>

4.3 创建Controller组件

在src目录下创建一个名为App.vue的文件，用于控制用户列表组件：

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

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

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

5. 运行项目

在命令行中运行以下命令，启动Vue项目：

npm run serve

然后在浏览器中访问http://localhost:8080，你将看到一个用户列表界面，可以添加、编辑和删除用户。

6. 总结

通过本文的学习，你掌握了如何在Vue.js中实现MVC模式的数据库操作。希望这个实例能帮助你更好地理解Vue.js和MVC模式在Web开发中的应用。

-- 展开阅读全文 --