楼宇管理系统中的人员信息管理模块人员信息管理模块---前端

.吸吸欧气

已于 2022-12-01 00:56:37 修改

阅读量369

点赞数 1

分类专栏：楼宇管理系统文章标签：前端 javascript vue.js

于 2022-11-28 19:54:14 首次发布

本文链接：https://blog.csdn.net/weixin_52837547/article/details/128085780

版权

楼宇管理系统专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.搭建基础架构

1.1导入bootstrap与vue依赖

1.2搭建基础结构基础框架

二.通过bootstrap样式绘制登录页面

三.在Vue中填写逻辑代码

3.1在data中添加数据

3.2在methods中创建requsetUserList方法通过axios对后端进行数据访问并完成分页的代码逻辑

3.3添加created: functio当点击页码时完成跳转

3.4填写增删改查与分页的业务逻辑代码

四完整代码

五.效果图预览

一.搭建基础架构

1.1导入bootstrap与vue依赖

   <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.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>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>

1.2搭建基础结构基础框架

<body>
 
<div class="container" id="app">
   <div class="row">
    <div>
<div>
 
<script>
    new Vue({
        el:'#app',
 
        data : {
 
            },
         methods : {
        
            },
         created : function(){
 
        }
            });
    
</script>
</body>

二.通过bootstrap样式绘制登录页面

 <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>用户列表</caption>

                <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="u in userlist"><!--在下面userlist中绑定的数据-->
                    <td>{{u.id}}</td>
                    <td>{{u.username}}</td>
                    <td>
                        <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
                        <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p== pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>

三.在Vue中填写逻辑代码

3.1在data中添加数据

   data: {
            userlist:null,//用户列表
            pageIndex:1,//当前页码
            pageSize:10,//每页显示的条数
            pageTotle:0,//总条数
            pageNum:0//页数(分页器)
        },

3.2在methods中创建requsetUserList方法通过axios对后端进行数据访问并完成分页的代码逻辑

  methods: {
 requsetUserList(p){
                axios.get("http://localhost:8080/user/list?pageIndex="+p+"&pageSize="+this.pageSize+"").then(response =>{
                    console.log(response.data);
                    this.userlist=response.data.data;//给用户列表赋值
                    this.pageTotle=response.data.pageTotle;///给总条数赋值
                    //计算页数 通过math.ceil函数 小数向上取整
                    this.pageNum=Math.ceil(this.pageTotle/this.pageSize);
                });
            }
}

3.3添加created: functio当点击页码时完成跳转

  created: function () {
            this.requsetUserList(this.pageIndex);//调用请求用户列表的参数
        }

3.4填写增删改查与分页的业务逻辑代码

   //分页
            doGo(p){
                this.pageIndex=p;
                this.requsetUserList(p);
            },
            //点击添加按钮时添加
            doAdd() {
                window.parent.main_right.location.href="1.html";
            },
            //点击修改按钮时修改
            doUpdate(id){
                window.parent.main_right.location.href="1.html?id="+id;
            },
            //点击删除按钮时删除
            doDelete(id){
                axios.get("http://localhost:8080/user/remove?id="+id).then(response =>{
                    if (response.data.code==200){
                        this.pageIndex=1;
                        this.requsetUserList(this.pageIndex);
                    }else{
                        alert(response.data.msg);
                    }
                });
            }

四完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.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>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">新增</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>用户列表</caption>

                <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="u in userlist"><!--在下面userlist中绑定的数据-->
                    <td>{{u.id}}</td>
                    <td>{{u.username}}</td>
                    <td>
                        <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
                        <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p== pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            userlist:null,//用户列表
            pageIndex:1,//当前页码
            pageSize:10,//每页显示的条数
            pageTotle:0,//总条数
            pageNum:0//页数(分页器)
        },
        methods: {
            //请求用户列表
            requsetUserList(p){
                axios.get("http://localhost:8080/user/list?pageIndex="+p+"&pageSize="+this.pageSize+"").then(response =>{
                    console.log(response.data);
                    this.userlist=response.data.data;//给用户列表赋值
                    this.pageTotle=response.data.pageTotle;///给总条数赋值
                    //计算页数 通过math.ceil函数 小数向上取整
                    this.pageNum=Math.ceil(this.pageTotle/this.pageSize);
                });
            },
            //分页
            doGo(p){
                this.pageIndex=p;
                this.requsetUserList(p);
            },
            //点击添加按钮时添加
            doAdd() {
                window.parent.main_right.location.href="1.html";
            },
            //点击修改按钮时修改
            doUpdate(id){
                window.parent.main_right.location.href="1.html?id="+id;
            },
            //点击删除按钮时删除
            doDelete(id){
                axios.get("http://localhost:8080/user/remove?id="+id).then(response =>{
                    if (response.data.code==200){
                        this.pageIndex=1;
                        this.requsetUserList(this.pageIndex);
                    }else{
                        alert(response.data.msg);
                    }
                });
            }
        },
        created: function () {
            this.requsetUserList(this.pageIndex);//调用请求用户列表的参数
        }
    });
</script>
</body>
</html>