tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员页面</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="js/login.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h2>用户列表</h2>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="user in userList" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.introduction }}</td>
                <td>
                    <button @click="editUser(user)">编辑</button>
                    <button @click="deleteUser(user)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <br>
        <button @click="addUser">新增用户</button>
    </div>
    <div v-if="showAddUser">
        <h2>新增用户</h2>
        <form @submit.prevent="submitAddUser">
            <label for="name">姓名:</label>
            <input type="text" id="name" v-model="newUser.name" required>
            <br>
            <label for="introduction">备注:</label>
            <input type="text" id="introduction" v-model="newUser.introduction" required>
            <br>
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="newUser.password" required>
            <br>
            <button type="submit">提交</button>
        </form>
    </div>
    <div v-if="showEditUser">
        <h2>编辑用户</h2>
        <form @submit.prevent="submitEditUser">
            <label for="name">姓名:</label>
            <input type="text" id="name" v-model="selectedUser.name" required>
            <br>
            <label for="introduction">备注:</label>
            <input type="text" id="introduction" v-model="selectedUser.introduction" required>
            <br>
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="selectedUser.password" required>
            <br>
            <button type="submit">提交</button>
        </form>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            isLoggedIn: false,
            userList: [],
            showAddUser: false,
            showEditUser: false,
            newUser: {
                name: '',
                introduction: '',
                password: ''
            },
            selectedUser: {
                id: '',
                name: '',
                introduction: '',
                password: ''
            }
        },
        methods: {
            getUserList: function() {
                axios.get('https://api.tianyunperfect.cn/user/user_list', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                })
                    .then(response => {
                        if (response.data.code === 1) {
                            this.userList = response.data.data;
                        } else {
                            alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        alert(error);
                    });
            },
            addUser: function() {
                this.showAddUser = true;
            },
            submitAddUser: function() {
                axios.post('https://api.tianyunperfect.cn/user/register', {
                    name: this.newUser.name,
                    introduction: this.newUser.introduction,
                    password: this.newUser.password
                }, {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                })
                    .then(response => {
                        if (response.data.code === 1) {
                            this.showAddUser = false;
                            this.getUserList();
                        } else {
                            alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        alert(error);
                    });
            },
            editUser: function(user) {
                this.showEditUser = true;
                this.selectedUser.id = user.id;
                this.selectedUser.name = user.name;
                this.selectedUser.introduction = user.introduction;
                this.selectedUser.password = '';
            },
            submitEditUser: function() {
                axios.post('https://api.tianyunperfect.cn/user/update_password', {
                    id: this.selectedUser.id,
                    password: this.selectedUser.password
                }, {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                })
                    .then(response => {
                        if (response.data.code === 1) {
                            this.showEditUser = false;
                            this.getUserList();
                        } else {
                            alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        alert(error);
                    });
            },
            deleteUser: function(user) {
                if (confirm('确定删除该用户？')) {
                    axios.post('https://api.tianyunperfect.cn/user/delete', {
                        id: user.id
                    }, {
                        headers: {
                            'Authorization': 'Bearer ' + localStorage.getItem('token')
                        }
                    })
                        .then(response => {
                            if (response.data.code === 1) {
                                this.getUserList();
                            } else {
                                alert(response.data.message);
                            }
                        })
                        .catch(error => {
                            alert(error);
                        });
                }
            }
        },
        created: function() {
            if (checkLogin()) {
                this.isLoggedIn = true;
                this.getUserList();
            }
        }
    });
</script>
</body>
</html>