文章目录

1、看实现的效果
2、前端vue页面核心代码
2.1、 表格代码（表格样式可以去elementui组件库直接调用相应的）
2.2、分页组件代码
2.3 、script中的代码
3、后端核心代码
3.1 控制层
3.2 编写的sql语句调用
3.3 、service层 dao层略

1、看实现的效果

2、前端vue页面核心代码

2.1、 表格代码（表格样式可以去elementui组件库直接调用相应的）

    <div>

              <el-table

                :data="tableDatas"

                border

                style="width: 100%; height: 450px"

              >

                <el-table-column prop="uid" label="编号" width="100">

                </el-table-column>

                <el-table-column prop="userName" label="姓名" width="100">

                </el-table-column>

                <el-table-column prop="nickName" label="昵称" width="100">

                </el-table-column>

                <el-table-column prop="gender" label="性别" width="100">

                </el-table-column>

                <el-table-column prop="idCard" label="身份证" width="200">

                </el-table-column>

                <el-table-column prop="email" label="邮箱" width="200">

                </el-table-column>

                <el-table-column prop="phone" label="手机号" width="200">

                </el-table-column>

                <el-table-column

                  prop="registerTime"

                  label="注册时间"

                  width="200"

                >

                </el-table-column>

                <el-table-column fixed="right" label="操作" width="200">

                  <template slot-scope="scope">

                    <el-button

                      @click="handleClick(scope.row)"

                      type="text"

                      size="small"

                      >查看</el-button

                    >

                    <el-button type="text" size="small">编辑</el-button>

                  </template>

                </el-table-column>

              </el-table>

            </div>

2.2、分页组件代码

直接放到相应的位置

   <!--分页组件-->

            <div style="text-align: left">

              <el-row>

                <el-col :span="12">

                  <el-pagination

                    style="margin: 15px 0px"

                    background

                    layout="prev, pager, next, jumper, total, sizes"

                    :page-size="size"

                    :current-page="now"

                    :page-sizes="[2, 4, 6, 8]"

                    @current-change="findPage"

                    @size-change="findSize"

                    :total="total"

                  >

                  </el-pagination>

                </el-col>

              </el-row>

            </div>

2.3 、script中的代码

提示：这里的total默认设置为0，否则会出现意想不到的问题（不影响使用、但是看起来难受）
在进行方法调用时，会根据传入的size和page作为参数、再次查询数据库

<script>

export default {

  data() {

    return {

      total: 0,

      now: 1,

      size: 8,

      input2: "",

      tableDatas: [],

    };

  },

  methods: {

    handleClick(row) {

      console.log(row);

    },

    // 第n页信息

    findPage(now_page) {

      //用来处理当前页的方法,page为当前页

      this.now = now_page;

      this.showAllUserInfo(now_page, this.size);

    },

    findSize(now_size) {

      //用来处理每页条数的方法,size为当前页条数

      this.size = now_size;

      this.showAllUserInfo(this.now, now_size);

    },

    // 展示所有的用户信息

    showAllUserInfo(currentPage, pageSize) {

      //异步请求显示所有数据

      currentPage = currentPage ? currentPage : this.now;

      pageSize = pageSize ? pageSize : this.size;

      axios

        .get("user/findAllUser/" + currentPage + "/" + pageSize)

        .then((res) => {

          console.log(res);

          this.tableDatas = res.data.data.result.userList;

          this.total = res.data.data.result.totals;

        });

    },

  },

  created() {

    this.showAllUserInfo();

  },

};

</script>

3、后端核心代码

3.1 控制层

   // 查询所有的用户信息

    @RequestMapping(value = "/user/findAllUser/{page}/{size}",method = RequestMethod.GET)

    public Result findAllUser(@PathVariable("page") Integer page,@PathVariable("size") Integer size){

        //准备数据 通过这两个参数，可以算出start   计算方法 start=size(page-1)

        int currentPage = page;//当前是第几页

        int pageSize = size; //页面大小

        Map<String, Integer> map = new HashMap<String, Integer>();

        map.put("startIndex", (currentPage - 1) * pageSize);

        map.put("pageSize", pageSize);

        List<User> userList = userService.findAllUser(map);

        Long totals = userService.findUserTotals();

        HashMap<String, Object> result = new HashMap<>();

        result.put("userList",userList);

        result.put("totals",totals);

        return  Result.ok().data("result",result);

    }

3.2 编写的sql语句调用

<!--    分页查询所有用户-->

    <select id="findAllUser" parameterType="Map" resultType="com.zyz.bookshopmanage.pojo.User">

        select * from bookshopmanage.tbl_user limit #{startIndex},#{pageSize}

    </select>

3.3 、service层 dao层略

vue中使用分页组件、将从数据库中查询出来的数据分页展示（前后端分离SpringBoot+Vue）的相关教程结束。