1. Python技术站首页
  2. 其他
  3. Vue

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

• Vue

下面是详细的攻略。

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组件

启动项目

  1. 启动后端

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

mvn spring-boot:run

  1. 启动前端

进入 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)
}

其他

以上就是本项目的完整攻略，希望能对你有所帮助。

如果你喜欢本项目，请给我一个 Star。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一) - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • 浅谈Vue.use的使用

    以下是关于“浅谈Vue.use的使用”的完整攻略。 什么是Vue.use Vue.use()是一个Vue.js插件安装API，它是用来安装将要使用的插件。Vue插件通常是一个通过Vue.extend()方法来创建全局组件或者添加全局功能的JavaScript对象。 如何使用Vue.use 使用Vue.use方法需要两个步骤： 首先，将Vue.use导入到你的…

    Vue 2023年5月27日
    00

  • Vue组件之极简的地址选择器的实现

    首先我们需要了解一下Vue组件的基本知识。 什么是Vue组件？ Vue 组件是可复用的 Vue 实例，拥有自己的视图和行为。在 Vue 中，组件是基本的代码复用单元，一个页面可以由多个小的组件组成，每个组件封装了自己的代码和模板，可以单独的进行开发、测试和维护。 Vue组件的基本结构 一个 Vue 组件通常由模板、样式和逻辑组成。模板是组件的显示部分，样式是…

    Vue 2023年5月29日
    00

  • Vue组件的使用及个人理解与介绍

    下面是关于“Vue组件的使用及个人理解与介绍”的完整攻略。 什么是Vue组件 组件是Vue.js中最强大的功能之一，它将复杂的应用程序拆分为更小的、可复用的部分，从而使开发变得更为简单。通常情况下，一个页面或一个区域都由多个组件组成，每个组件可以自行维护自身的状态和逻辑，使得组件之间的通讯和协作更加简单和灵活。 Vue组件的使用 全局组件 全局组件可以在应用…

    Vue 2023年5月27日
    00

  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    下面是一篇详细讲解“一篇文章搞懂Vue3中如何使用ref获取元素节点”的完整攻略。 什么是ref 在Vue3中，ref是一个用于在模板中给元素或子组件注册引用的函数。通过在模板中使用ref来注册引用，我们可以在Vue实例中访问这些元素或子组件，并进行一些操作。 ref的使用方法如下： <template> <div ref="my…

    Vue 2023年5月27日
    00

  • 实例讲解vue源码架构

    实例讲解Vue源码架构 本文将全面讲解Vue源码架构，包括Vue的整体架构、编译器、响应式系统和虚拟DOM。我们将会借助示例代码来详细讲解。本文假设你已经掌握了Vue的基础使用方法和概念。 Vue的整体架构 Vue的整体架构分为五个模块： 编译器：将模板转化为渲染函数，也包括AST树的生成和优化。 响应式系统：为data数据属性提供get/set方法，并且有…

    Vue 2023年5月28日
    00

  • Vue移动端实现图片上传及超过1M压缩上传

    OK，下面是“Vue移动端实现图片上传及超过1M压缩上传”的完整攻略： 1. 前置知识 在讲解具体实现过程之前，需要了解以下知识点： input 标签的 type=”file” 属性: 用于创建一个文件上传框，用于选择本地文件上传。当选择文件后，选择框会为文件生成一个 File 对象，用于后续操作。 canvas 标签和 canvas API: 用于在网页中…

    Vue 2023年5月28日
    00

  • vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    下面是针对题目的详细讲解： 什么是vue.js Vue.js是一个构建用户界面的渐进式框架，它使得构建大型的单页面应用程序变得更加容易。 在Vue.js中，我们可以使用它的指令和模板语法轻松地渲染数据，从而实现与数据绑定的动态效果。 什么是v-for指令 Vue.js提供了v-for指令，它可以用于渲染列表或者数组数据。我们可以将其应用到一个HTML元素上，…

    Vue 2023年5月27日
    00

  • 前端实时通信的8种方式及其优缺点和实现方式

    前端实时通信的8种方式及其优缺点和实现方式 前端实时通信是目前前端开发中常见的需求之一，常用于在线聊天、游戏、协作、数据实时更新等场景中，下面将对前端实时通信的8种方式进行详细讲解。 方式一：Ajax轮询 优点 兼容性好，支持大部分浏览器。 能够实时获取后端数据。 缺点 客户端会不断向服务器发送请求，增大服务器压力。 不是真正意义上的实时通信。 实现方式 f…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部