下面是详细的攻略。

Spring boot + MyBatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

实现目标

本项目旨在演示如何使用 Spring boot + MyBatis + Vue.js + ElementUI 构建一个简单的增删改查系统。项目实现的功能包括：

显示数据列表
新增数据
删除数据
修改数据
筛选数据

技术要点

本项目使用的技术栈包括：

开发环境

Java 8
Maven 3.6+
Node.js 12+
Vue CLI 4.2+

项目结构

├── backend            后端代码
│   ├── pom.xml        Maven依赖
│   └── src
│       ├── main
│       │   ├── java   Java代码
│       │   └── resources
│       │       ├── application.properties  配置文件
│       │       └── mybatis                  MyBatis mapper配置文件
└── frontend           前端代码
    ├── node_modules   Node.js依赖
    ├── package.json   npm依赖
    ├── public
    │   └── index.html  HTML模板文件
    └── src
        ├── App.vue     Vue组件文件
        ├── main.js     Vue入口文件
        ├── http.js     封装HTTP请求的代码
        ├── assets      静态资源
        └── components  Vue组件

启动项目

启动后端

进入 backend 目录，执行以下命令启动后端：

mvn spring-boot:run

启动前端

进入 frontend 目录，执行以下命令启动前端：

npm install npm run serve

访问 http://localhost:8080 就可以看到网站了。

数据库配置

本项目使用 MySQL 数据库存储数据。需要先在本地安装 MySQL 数据库，并创建一个名为 test 的数据库。

在 application.properties 中，配置 MySQL 数据库连接参数：

spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=root

数据库表设计

创建一个名为 users 的表，包含以下字段：

id        INT(11) AUTO_INCREMENT PRIMARY KEY
name      VARCHAR(50)
email     VARCHAR(50)
password  VARCHAR(50)

MyBatis配置

使用 MyBatis Generator 自动生成 Mapper 接口和 XML 配置文件。

在 pom.xml 中添加如下依赖：

<dependency>
    <groupId>org.mybatis.generator</groupId>
    <artifactId>mybatis-generator-core</artifactId>
    <version>1.4.0</version>
</dependency>

在 generatorConfig.xml 中添加如下配置：

<generatorConfiguration>
    <context id="testTables" targetRuntime="MyBatis">
        <property name="javaFileEncoding" value="UTF-8"/>

        <!-- 配置数据库连接 -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/test"
                        userId="root"
                        password="root"/>

        <!-- 配置Model -->
        <javaModelGenerator targetPackage="com.example.demo.pojo" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
            <property name="suppressDefaultComments" value="false"/>
        </javaModelGenerator>

        <!-- 配置Mapper -->
        <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>

        <!-- 配置Dao -->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.example.demo.mapper" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>

        <!-- 配置生成的表 -->
        <table tableName="users" domainObjectName="User"/>
    </context>
</generatorConfiguration>

在 pom.xml 中添加如下配置：

<build>
    <plugins>
        <plugin>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-maven-plugin</artifactId>
            <version>1.4.0</version>
            <configuration>
                <verbose>true</verbose>
            </configuration>
        </plugin>
    </plugins>
</build>

然后执行以下命令生成代码：

mvn mybatis-generator:generate

后端实现

后端主要实现用户数据的增删改查功能。使用 UserController 处理用户相关的 HTTP 请求。

接口文档

GET /users 获取用户列表
POST /users 新增用户
DELETE /users/{id} 删除用户
PUT /users/{id} 修改用户
GET /users/{id} 获取用户详情

UserController代码实现

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("")
    public List<User> getUsers() {
        return userService.getUsers();
    }

    @PostMapping("")
    public void addUser(@RequestBody User user) {
        userService.addUser(user);
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable("id") int id) {
        userService.deleteUser(id);
    }

    @PutMapping("/{id}")
    public void updateUser(@PathVariable("id") int id, @RequestBody User user) {
        userService.updateUser(id, user);
    }

    @GetMapping("/{id}")
    public User getUser(@PathVariable("id") int id) {
        return userService.getUser(id);
    }
}

Service代码实现

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public List<User> getUsers() {
        return userMapper.selectAll();
    }

    public void addUser(User user) {
        userMapper.insert(user);
    }

    public void deleteUser(int id) {
        userMapper.deleteByPrimaryKey(id);
    }

    public void updateUser(int id, User user) {
        user.setId(id);
        userMapper.updateByPrimaryKey(user);
    }

    public User getUser(int id) {
        return userMapper.selectByPrimaryKey(id);
    }
}

前端实现

使用 Vue 和 ElementUI 实现前端页面。

显示数据列表

使用 ElTable 和 ElPagination 组件显示数据列表：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="60"></el-table-column>
    <el-table-column prop="id" label="编号" width="60"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column prop="password" label="密码" width="120"></el-table-column>
    <el-table-column label="操作" width="120">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination :total="total" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" @current-change="handlePageChange" @size-change="handlePageSizeChange"></el-pagination>
</template>

<script>
import { getUsers, deleteUser } from '@/api/user'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getUsers({ pageNum: this.currentPage, pageSize: this.pageSize }).then(res => {
        this.total = res.total
        this.tableData = res.list
      })
    },
    handlePageChange(val) {
      this.currentPage = val
      this.getData()
    },
    handlePageSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleEdit(id) {
      this.$router.push({ path: '/users/' + id, query: { mode: 'edit' } })
    },
    handleDelete(id) {
      this.$confirm('确认删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getData()
        })
      }).catch(() => { })
    }
  }
}
</script>

新增数据和修改数据

使用 ElForm 和 ElFormItem 组件实现新增数据和修改数据的功能。

<template>
  <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="cancelEdit">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { addUser, updateUser, getUser } from '@/api/user'

export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        password: ''
      }
    }
  },
  mounted() {
    if (this.mode === 'edit') {
      this.getData()
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    mode() {
      return this.$route.query.mode || 'add'
    },
    title() {
      return this.mode === 'edit' ? '编辑用户' : '添加用户'
    }
  },
  methods: {
    getData() {
      getUser(this.id).then(res => {
        this.form = res
      })
    },
    submitForm() {
      if (this.mode === 'add') {
        addUser(this.form).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$router.push({ path: '/users' })
        })
      } else {
        updateUser(this.id, this.form).then(() => {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          })
          this.$router.push({ path: '/users' })
        })
      }
    },
    cancelEdit() {
      this.$router.push({ path: '/users' })
    }
  }
}
</script>

筛选数据

使用 ElInput 和 ElSelect 组件实现筛选数据的功能。

<template>
  <el-form :inline="true" :model="filterForm">
    <el-form-item>
      <el-input v-model="filterForm.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="filterForm.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    <el-form-item>
      <el-select v-model="filterForm.password" placeholder="请输入密码">
        <el-option label="简单" value="1"></el-option>
        <el-option label="中等" value="2"></el-option>
        <el-option label="复杂" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleFilter">筛选</el-button>
      <el-button @click="resetFilter">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      filterForm: {
        name: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    handleFilter() {
      this.$emit('filter', this.filterForm)
    },
    resetFilter() {
      this.filterForm = {
        name: '',
        email: '',
        password: ''
      }
      this.$emit('filter', this.filterForm)
    }
  }
}
</script>

API封装

使用 axios 库封装 HTTP 请求，对外提供 API 接口。

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8081'

export function getUsers(params) {
  return axios.get('/users', { params }).then(res => res.data)
}

export function getUser(id) {
  return axios.get('/users/' + id).then(res => res.data)
}

export function addUser(data) {
  return axios.post('/users', data)
}

export function updateUser(id, data) {
  return axios.put('/users/' + id, data)
}

export function deleteUser(id) {
  return axios.delete('/users/' + id)
}