Vue脚手架-分页(完整版)-后端

最新推荐文章于 2024-06-01 23:43:18 发布

浩瀚无疆~

最新推荐文章于 2024-06-01 23:43:18 发布

阅读量184

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript java vue spring boot

本文链接：https://blog.csdn.net/m0_73535798/article/details/130165176

本文介绍了如何在Vue项目中结合Element UI实现分页功能，包括Vue的创建、Element UI和Axios的导入，以及分页组件的配置和后端接口对接。在后端，通过Spring Boot处理分页请求，允许跨域访问。详细代码示例展示了分页的完整实现过程。

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

好东西不用你去记，它自会留下很深的印象.

一、Vue的创建

1.前提是已经装好以下软件,我上一篇关于Vue入门中有写

一、Vue的创建

1.前提是已经装好以下软件,我上一篇关于Vue入门中有写

2.完成以下配置

一:
element导入-v3
npm install element-plus --save
element导入-v2
npm i element-ui -S
axios导入
npm install axios

在这里输入,Vue会自动下载

二:
main.js,,完整导入
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')

包的导入要一一对应

三:用做组件切换
<button v-on:click="componentsName='Table1'">Table1</button>
<button v-on:click="componentsName='Table2'">Table2</button>
<component v-bind:is="componentsName"></component>//一定要绑定componentsName,,才可以动态引入组件
如下:

<template>
  <div id="app">
    <button v-on:click="componentsName='TableOne'">TableOne</button>
    <button v-on:click="componentsName='TableTwo'">TableTwo</button>
    <component v-bind:is="componentsName"></component>
  </div>
</template>

<script>
import TableOne from "@/components/TableOne";
import TableTwo from "@/components/TableTwo";

export default {
  name: 'App',
  components: {
    TableOne,
    TableTwo
  }, data() {
    return {
      componentsName: "TableOne"
    }
  }
}
</script>

二、分页代码实现

1.TableOne(分页代码基本固定)

主要分页代码:

a.el-col:代表一列,一列共有24格,:span="4"表示绑定数据el-pagination占4格,:offset="8并且向右偏移8格,默认是在左边;

b.prev, pager, next,jumper,total,sizes:

设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，sizes和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，sizes用于设置每页显示的页码数量。

<!-- 分页组件-->
<el-row>
  <el-col :span="4" :offset="8">
    <el-pagination
        layout="prev, pager, next,jumper,total,sizes"
        background
        prev-text="上一页"
        next-text="下一页"
        :page-size="size"
        :current-page="pageNow"
        :page-sizes="[2,4,8,16]"
        @current-change="findPage"
        @size-change="findSize"
        :total="total">
    </el-pagination>
  </el-col>
</el-row>

后端数据;只需要传入,1.查询的数据,2.每页条数3.总条数:

vm.list = response.data.data.list;
vm.size = response.data.data.size;//每页条数
vm.total = response.data.data.count;//总条数

后端接收的数据:

page = page ? page : this.pageNow,
    size = size ? size : this.size;
let vm = this
axios.post('http://127.0.0.1:9090/student/findPage?page=' + page + "&size=" + size)

全部代码如下（示例）：

<template>
  <div class="block">
    <el-table :data="list" style="width: 80%;margin: 0 auto">
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码">
      </el-table-column>
      <el-table-column
          label="操作">
        <el-button type="warning" v-on:click="update" size="mini">修改</el-button>
        <el-button type="danger" v-on:click="det" size="mini">删除</el-button>
      </el-table-column>
    </el-table>
    <br/>
    <br/>
    <!-- 分页组件-->
    <el-row>
      <el-col :span="4" :offset="8">
        <el-pagination
            layout="prev, pager, next,jumper,total,sizes"
            background
            prev-text="上一页"
            next-text="下一页"
            :page-size="size"
            :current-page="pageNow"
            :page-sizes="[2,4,8,16]"
            @current-change="findPage"
            @size-change="findSize"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const axios = require('axios');
export default {
  name: "TableTwo",
  data() {
    return {
      list: [],
      total: 0,
      pageNow: 1,
      size: 4,
    }
  }, methods: {
    det() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    update() {
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({value}) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //
    findSize(size) {//记录每页显示记录的方法
      console.log(size)
      this.size = size;
      this.loadData(this.page, this.size)
    },
    findPage(page) {//处理分页的相关方法
      this.page = page;//把当前页给保存下来
      this.loadData(page, this.size)
    },
    //
    loadData(page, size) {
      page = page ? page : this.pageNow,
          size = size ? size : this.size;
      let vm = this
      axios.post('http://127.0.0.1:9090/student/findPage?page=' + page + "&size=" + size)
          .then(function (response) {
            // 处理成功情况
            vm.list = response.data.data.list;
            vm.size = response.data.data.size;//每页条数
            vm.total = response.data.data.count;//总条数
          })
          .catch(function (error) {
            // 处理错误情况
            alert(error)
          })
    },
  }, created() {
    this.loadData()
  }
}
</script>
<style scoped>

</style>

2.后端代码

因为代码是分离,,有跨域问题：

后端代码只需要在Controller层,添加@CrossOrigin就可以允许外部跨域访问了

@RestController
@CrossOrigin//允许外部跨域访问
@RequestMapping("student")
public class StudentController {}

具体所有后端代码在我另一篇博客..springboot-vo中有写

~~核心配置:

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/student?useSSL=false
spring.datasource.username=root
spring.datasource.password=root
mybatis.mapper-locations=mapper/*.xml
logging.level.cn.gsm.demo01.dao=debug
server.port=9090

~~pom文件:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.10</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>cn.gsm</groupId>
    <artifactId>demo01</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>demo01</name>
    <description>demo01</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>

    </dependencies>

    <build>
        <finalName>demo01</finalName>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
               <version>2.7.10</version>
           </plugin>
       </plugins>
    </build>

</project>