前端项目代码

最新推荐文章于 2025-11-06 12:50:41 发布

原创最新推荐文章于 2025-11-06 12:50:41 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了一个使用Vue.js实现的用户列表展示与分页功能的示例。通过整合Bootstrap美化界面，利用Axios进行前后端交互，实现了动态加载用户数据，并以表格形式展示，同时具备了基本的分页导航功能。

一、添加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>
<!--    导入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>
    <script>
        new Vue({
            el:"#app",
            data:{
                users:null,
                //分页用
                pageIndex:1, //每一页
                pageSize:10, //每页显示多少条
                pageTotal:0,  //总条数
                pageNum:0   //有几页
            },
            methods:{
                //发送请求,获取用户列表
                requestUserList(url){
                    axios.get(url).then(response =>{
                        console.log(response.data)
                        this.users = response.data.data;
                        this.pageTotal=response.data.pageTotal
                        this.pageNum = Math.ceil(this.pageTotal/this.pageSize);
                                    //小数取整,向上取
                    });
                },
                doGo(p){
                    this.pageIndex =p;
                    var url = "http://127.0.0.1:8080/user/list?pageIndex="+p+"&pageSize="+this.pageSize;
                    this.requestUserList(url);//调用请求用户列表的函数
                }
            },
            created:function () { //生命周期函数,页面加载完成执行
                // var url='http://127.0.0.1:8070/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize;
                var url = "http://127.0.0.1:8080/user/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize;
                this.requestUserList(url);//调用请求用户列表的函数
            }
        });
    </script>
</body>
</html>