Springboot+Element_分页+显示+搜索+完整版

wust王老师

已于 2024-06-05 14:56:50 修改

阅读量1k

点赞数 4

于 2024-05-17 10:50:08 首次发布

本文链接：https://blog.youkuaiyun.com/wyhwust/article/details/138997960

版权

4、新建peom表（如已建好，则忽略本条）

二、新建前端页面index.html（未连后端程序）

1 导包

2 新建index.html

3 打开element官网，找到相关的组件

4 复制相关代码到index.html中，并进行调整。

显示效果

新建项目时选择的依赖

文件的目录结构

一、准备工作

1、配置文件

注意：数据库的相关参数换成自己的。

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

# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.example.mybatis.entity

#数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/heima
spring.datasource.username=root
spring.datasource.password=123
#开启mybatis的日志输出
mybatis.configuration.logimpl=org.apache.ibatis.logging.stdout.StdOutImpl
#开启数据库表字段
#实体类属性的驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true

2、pom增加PageHelper

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.2</version>
        </dependency>

3、在idea中建立数据库连接，

4、新建peom表（如已建好，则忽略本条）

use heima;

-- 诗人表
create table peom(
                     id int unsigned primary key auto_increment comment 'ID',
                     author varchar(100)  comment '姓名',
                     gender varchar(4) comment '性别, 1:男, 2:女',
                     dynasty varchar(100)  comment '朝代',
                     title varchar(100)  comment '头衔',
                     style varchar(100)  comment '风格'
) comment '诗人表';
-- 测试数据
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'陶渊明','1','东晋末至南朝宋初期','诗人和辞赋家','古今隐逸诗人之宗');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'王维','1','唐代','诗佛','空灵、寂静');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李商隐','2','唐代','诗坛鬼才','无');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李白','1','唐代','诗仙','豪放飘逸的诗风和丰富的想象力');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'李清照','2','宋代','女词人','婉约风格');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'杜甫','1','唐代','诗圣','反映社会现实和人民疾苦');
insert into peom(id,author,gender, dynasty, title, style) VALUES (null,'苏轼','1','北宋','文学家、书画家，诗神','清新豪健的诗风和独特的艺术表现力');

二、新建前端页面index.html（未连后端程序）

1 导包

2 新建index.html

加入依赖的包链接

<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>

<script src="js/element.js"></script>
<link rel="stylesheet" href="js/element.css">

3 打开element官网，找到相关的组件

Element - The world's most popular Vue UI framework

4 复制相关代码到index.html中，并进行调整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自带数据显示</title>
    <link rel="stylesheet" href="js/element.css">
</head>
<body>

<div id="app">
    <h1 align="center">诗人信息</h1>
    <el-table
            :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
        <el-table-column
                label="id"
                prop="id">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="author">
        </el-table-column>
        <el-table-column
                label="朝代"
                prop="dynasty">
        </el-table-column>
        <el-table-column
                label="头衔"
                prop="title">
        </el-table-column>
        <el-table-column
                label="风格"
                prop="style">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
    </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el:"#app",
        data: {
            search: '',
            currentPage: 1,
            pageSize: 10,
            total: 100,
            tableData: [ {"id":1,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期","title":"诗人和辞赋家","style":"古今隐逸诗人之宗"},
                       {"id":2,"author":"李商隐","gender":"1","dynasty":"唐代","title":"诗坛鬼才","style":"无"},
                       {"id":3,"author":"李白","gender":"1","dynasty":"唐代","title":"诗仙","style":"豪放飘逸的诗风和丰富的想象力"},
                       {"id":4,"author":"陶渊明","gender":"1","dynasty":"东晋末至南朝宋初期&#