技术视角全方位拆解Vue+Express+Mysql全栈项目之增删改查、分页排序导出功能

前端

2023-12-06 19:28:17

绪论

在Web开发领域，增删改查（CRUD）功能是必不可少的核心操作。它允许用户在数据库中创建、检索、更新和删除数据。此外，分页、排序和数据导出等功能也经常被用于提升用户体验和数据管理效率。

在本文中，我们将以Vue.js、Express.js和MySQL作为技术栈，构建一个全栈Web应用程序，并详细介绍如何实现增删改查、分页、排序和数据导出功能。通过对这些功能的深入理解，您将能够构建更强大、更易用的Web应用程序。

技术栈介绍

Vue.js

Vue.js是一个渐进式的JavaScript框架，用于构建用户界面。它采用组件化开发模式，可以轻松地创建可重用的组件，从而提高开发效率。

Express.js

Express.js是一个基于Node.js的Web框架，用于构建Web应用程序。它提供了丰富的中间件支持，可以轻松地处理HTTP请求和响应。

MySQL

MySQL是一个开源的关系型数据库管理系统，广泛应用于Web开发领域。它以其高性能、稳定性和可靠性著称。

项目结构

我们的项目将采用以下结构：

├── client
│   ├── src
│   │   ├── App.vue
│   │   ├── components
│   │   │   ├── PersonForm.vue
│   │   │   └── PersonTable.vue
│   │   ├── pages
│   │   │   └── Home.vue
│   │   ├── router.js
│   │   └── store.js
│   └── index.html
├── server
│   ├── app.js
│   ├── config.js
│   ├── controllers
│   │   └── PersonController.js
│   ├── models
│   │   └── Person.js
│   ├── routes.js
│   └── views
│       └── home.pug
├── package.json
└── README.md

实现增删改查功能

创建数据

在我们的项目中，用户可以在页面上新建数据，新建的数据内容包括人名、年龄、家乡和备注。

首先，我们需要在数据库中创建一个名为"Person"的表，并定义其字段。

CREATE TABLE Person (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  age INT NOT NULL,
  hometown VARCHAR(255),
  remark TEXT,
  PRIMARY KEY (id)
);

然后，我们需要在前端页面上创建一个表单，用于收集用户输入的数据。

<template>
  <form @submit.prevent="createPerson">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="person.name">
    </div>
    <div class="form-group">
      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="person.age">
    </div>
    <div class="form-group">
      <label for="hometown">家乡：</label>
      <input type="text" id="hometown" v-model="person.hometown">
    </div>
    <div class="form-group">
      <label for="remark">备注：</label>
      <textarea id="remark" v-model="person.remark"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">创建</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '',
        age: 0,
        hometown: '',
        remark: ''
      }
    }
  },
  methods: {
    createPerson() {
      this.$axios.post('/api/people', this.person).then((response) => {
        this.$router.push('/');
      });
    }
  }
};
</script>

最后，我们需要在后端代码中定义创建数据的路由和控制器。

// routes.js
router.post('/api/people', PersonController.create);

// PersonController.js
create(req, res) {
  const person = new Person({
    name: req.body.name,
    age: req.body.age,
    hometown: req.body.hometown,
    remark: req.body.remark
  });

  person.save((err, person) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).send(person);
    }
  });
}

检索数据

在我们的项目中，用户可以检索之前创建的数据。

首先，我们需要在前端页面上创建一个表格，用于显示检索到的数据。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>家乡</th>
        <th>备注</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="person in people" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.hometown }}</td>
        <td>{{ person.remark }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      people: []
    }
  },
  created() {
    this.$axios.get('/api/people').then((response) => {
      this.people = response.data;
    });
  }
};
</script>

最后，我们需要在后端代码中定义检索数据的路由和控制器。

// routes.js
router.get('/api/people', PersonController.index);

// PersonController.js
index(req, res) {
  Person.find((err, people) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(people);