基于Spring boot + Mybatis-plus + ElementUI实现列表CRUD_使用springboot+mybatis-plus+jsp+layui实现单表的crud操作-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57549219/article/details/123338954

该博客介绍了如何使用Spring Boot、Mybatis-plus和ElementUI来实现后台的CRUD操作。内容涵盖了工具版本选择、项目搭建、三层架构设计与测试、前后端协议联调以及在开发过程中遇到的错误和解决方案。涉及的关键技术包括Mapper层的简化开发、Service层接口解耦合、Controller层的RESTful风格以及前后端数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、工具版本

编写java代码：IdeaIU-2021.1.3

管理项目依赖：Maven-3.8.3

管理项目文件：Git-2.34.1

关系型数据库：Mysql-8.0.27

二、项目搭建

1.创建MySQL数据库

USE game_web;
CREATE TABLE game_introduce(
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(10) NOT NULL UNIQUE,
    type VARCHAR(9),
    creation_time DATE,
    insert_time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    description VARCHAR(70),
    address VARCHAR(50)
);
INSERT INTO game_introduce (
    name,
    type,
    creation_time,
    description,
    address
) VALUES(
    "植物大战僵尸",
    "策略小游戏",
    "2012-03-23",
    "一个看似简单实则极富策略性的小游戏，可怕的僵尸即将
    入侵你的家园，您唯一的防御方式就是您栽种的植物。",
    "http://www.4399.com/flash/18012.htm"
);
SELECT * FROM game_introduce;

2.设计Maven目录结构

3.编写复制Element页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display</title>

    <style lang="scss">

    </style>
</head>
<body>

<div id="display">
    <!--对表单的操作-->
    <el-form :inline="true" :model="introduce" class="demo-form-inline" >
        <el-form-item>
            <el-button id="allDelete" type="danger" plain @click="handleBulkDelete">批量删除</el-button>
            <el-button id="insert" type="primary" plain @click="dialogVisible = true">新增</el-button>
        </el-form-item>
        <el-form-item label="游戏名" id="gameQuery" class="text">
            <el-input v-model="introduce.name" placeholder="游戏名"></el-input>
        </el-form-item>
        <el-form-item label="游戏描述" id="descQuery" class="text">
            <el-input v-model="introduce.description" placeholder="游戏描述"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button class="button" type="info" @click="handleRetrieval" round>查询</el-button>
        </el-form-item>
    </el-form>
    <!--列表展示-->
    <template>
        <el-table
                ref="singleTable"
                :data="tableList"
                highlight-current-row
                :header-cell-style="{background:'#11ffee00',color:'#adff2f'}"
                style="width: 100%"
                @selection-change="handleSelectChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="游戏名"
                    width="120"
                    align="center">
            </el-table-column>
            <el-table-column
                    id="filter"
                    prop="type"
                    label="类型"
                    width="100"
                    align="center"
                    :filters="[ ]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type=" "
                            disable-transitions>{
  
  {scope.row.type}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="creationTime"
                    label="创作时间"
                    sortable
                    width="180"
                    align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{
  
  { scope.row.creationTime }}</span>
                </template>
                </el-date-picker>
            </el-table-column>
            <el-table-column
                    label="描述"
                    prop="description"
                    width="200"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            class="button"
                            size="mini"
                            @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button
                            class="button"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页工具条-->
        <el-pagination v-if="paginationShow"
                       class="page"
                       align="center"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pagination.currentPage"
                       :page-size=""
                       :page-sizes="[ ]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pagination.total">
        </el-pagination>
    </template>
    <!--新增表单-->
    <el-dialog
            title="新增游戏"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="introduce" label-width="80px">
            <el-form-item label="游戏名">
                <el-input v-model="introduce.name"></el-input>
            </el-form-item>
            <el-form-item label="游戏类型">
                <el-select v-model="introduce.type" placeholder="请选择游戏类型">
                    <el-option label=" " value=" "></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创作时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择时间" v-model="introduce.creationTime" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="游戏网址">
                <el-input placeholder="请输入网址" v-model="introduce.address">
                    <template slot="prepend">https://</template>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="游戏