一、工具版本
编写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="游戏