# 智慧社区管理系统开发-基础信息管理-01-用户管理

最新推荐文章于 2024-09-30 16:11:43 发布

雷大胖胖

最新推荐文章于 2024-09-30 16:11:43 发布

阅读量363

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74795259/article/details/128145915

版权

一数据库

在这里插入图片描述

二后端

用户登录功能里已统一实现,用户管理的增,删,改,查,功能

三前端

<!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">
                        <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:5,//每显示的条数
            pageTotal:0,//总条数
            pageNum:0,//分页
        },
        methods: {
            //请求用户列表
        requestUserList(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.pageTotal=response.data.pageTotal;//总条数
                this.pageNum=Math.ceil(this.pageTotal / this.pageSize);//计算页数
            })
        },
            doGO(p){//点击分页发送请求你
            this.pageIndex=p;
                this.requestUserList(p)//请求用户列表的函数

            },
            doAdd(){//点击添加按钮时触发
                window.parent.main_right.location.href = "user_add_update.html";
                },
            doDelete(id){
           axios.get("http://localhost:8080/user/remove?id="+id).then(response=>{
               if (response.data.code==200){//成功
                   this.pageIndex=1;
                   this.requestUserList(this.pageIndex)//请求用户列表的函数
               }else{
                   alert(response.data.msg)
               }
           })
            },
            doUpdate(id){
            //window.parent.模块名.location.href调到指定的模块页面.
                window.parent.main_right.location.href = "user_add_update.html?id="+id;
                },


        },
        created: function () {
       this.requestUserList(this.pageIndex)//请求用户列表的函数
        }
    });
</script>
</body>
</html>

<!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>
    <script src="assets/date_picker.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                    {{title}}
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <label>用户名</label>
                    <input type="text" class="form-control" v-model="userName">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                    <button class="btn btn-primary" @click="doSave">保存</button>
                    <button class="btn btn-default" @click="doCancel">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            title: null,
            userId:null,//接收页面跳转传参
            userName:null,
            password:null,

        },
        methods: {
            doSave(){
                if (this.userId==null){//添加
                    this.title="添加用户";
                    //通过axios发送请求添加用户
                    axios.post("http://localhost:8080/user/add",{
                        userName:this.userName,
                        password:12345,
                    }).then(response=>{
                        if (response.data.code==200){//添加成功
                            //跳转回列表页
                            window.parent.main_right.location.href = "user_list.html";

                        }else{
                            alert(response.data.msg)
                        }
                    })
                }else{//修改
                    this.title="修改用户";
                    //通过axios发送请求添加用户
                    axios.post("http://localhost:8080/user/update",{
                        id:this.userId,
                        userName:this.userName,
                        password:this.password,
                    }).then(response=>{
                        if (response.data.code==200){
                            window.parent.main_right.location.href = "user_list.html";

                        }else{
                            alert(response.data.msg)
                        }
                    })
                }
            },
            doCancel(){
                //直接返回上级页面
                history.go(-1);
            }

        },
        created: function () {
            var url=window.location.href;
            if (url.indexOf("id")!=-1){//是否传了id
                this.userId=url.substring(url.indexOf("=")+1)

            }
            console.log(this.userId);
            if (this.userId==null){//添加
                this.title="添加用户";
            }else{//修改
                this.title="修改用户";
                //发送请求获取用户信息回显数据
                var  url="http://localhost:8080/user/info?id="+this.userId;
                axios.get(url).then(response=>{
                    this.userName=response.data.data.userName;
                    this.password=response.data.data.password;
                })

            }
        }
    });
</script>
</body>
</html>