|
|
@@ -0,0 +1,194 @@
|
|
|
+<!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>
|
tianyun