四层架构项目前后端分离之前端开发

连累

于 2022-11-17 18:38:39 发布

阅读量102

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42688411/article/details/127908410

版权

本文介绍如何使用Vue.js和Bootstrap构建一个具有分页功能的用户列表展示页面。该页面展示了如何通过Vue进行数据绑定，并利用Bootstrap美化界面，同时实现了通过点击分页器来加载不同页的数据。

摘要由CSDN通过智能技术生成

一.添加bootStrap和vue的依赖

    <!-- 导入bootstrap -->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 导入vue -->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

二.前段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 导入bootstrap-->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--  导入vue-->
    <script src ="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <table class="table table-striped
">
        <caption>用户列表</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>创建日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="u in users">
                <td>{{u.id}}</td>
                <td>{{u.userName}}</td>
                <td>{{u.createDate}}</td>

            </tr>
        </tbody>
    </table>
<!--  分页器(bootstrap 的一款导航)-->
    <ul class="pagination" v-for="p in pageNum" >
       <li v-if="p == pageIndex" class="active"> <a href="#" @click="doGo(p)">{{p}}</a></li>
        <li v-else ="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>

    </ul>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
             users:null,
            pageIndex:1,//哪一页
            pageSize:10,//每页显示多少条
            pageTotal:0,//总条数
            pageNum:0//总页数
    },
    methods:{
            //发送请求,获取用户列表
        requestUserList(url){
            //通过axios发送请求
            axios.get(url).then(response =>{
                console.log(response.data)
                this.users=response.data.data
                this.pageTotal=response.data.pageTotal
                this.pageNum=parseInt(this.pageTotal/this.pageSize)

            })
        },
        doGo(p){
            this.pageNum=p;//按分页器的按钮被点中
            var url='http://127.0.0.1:8080/user/list?pageIndex='+'+p+'+'&pageSize='+this.pageSize+'\n';
            this.requestUserList(url);//调用请求列表的函数
        }

    },
    created:function (){
        var url='http://127.0.0.1:8080/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize+'\n';
      this.requestUserList(url);//调用请求列表的函数
    }
    });
</script>

</html>

三.页面效果