添加用户页面

src/components/Login.vue

@@ -87,7 +87,7 @@ export default {
           return this.$message.error('登录失败')
         }
         this.$message.success('登录成功')
-        window.sessionStorage.setItem('token', res.data.token)
+        window.localStorage.setItem('token', res.data.token)
         this.$router.push('/home')
       })
     }

src/components/user/Users.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 21:32:18
- * @LastEditTime: 2021-11-21 23:54:52
+ * @LastEditTime: 2021-11-22 18:44:04
 -->
 <template>
   <div>
@@ -68,7 +68,7 @@
         </el-table-column>
         <el-table-column label="操作"
                          width="180px">
-          <template>
+          <template slot-scope="scope">
             <!-- 修改按钮 -->
             <el-tooltip effect="dark"
                         content="修改"
@@ -76,7 +76,8 @@
                         :enterable="false">
               <el-button type="primary"
                          icon="el-icon-edit"
-                         size="mini"></el-button>
+                         size="mini"
+                         @click="showEditDialog(scope.row)"></el-button>
             </el-tooltip>
             <!-- 删除按钮 -->
             <el-tooltip effect="dark"
@@ -85,7 +86,8 @@
                         :enterable="false">
               <el-button type="danger"
                          icon="el-icon-delete"
-                         size="mini"></el-button>
+                         size="mini"
+                         @click="removeUserById(scope.row.id)"></el-button>
             </el-tooltip>
             <!-- 分配权限 -->
             <el-tooltip effect="dark"
@@ -109,10 +111,12 @@
                      :total="total">
       </el-pagination>
     </el-card>
+
     <!-- 添加用户对话框 -->
     <el-dialog title="添加用户"
                :visible.sync="addDialogVisible"
-               width="50%">
+               width="50%"
+               @close="resetAddForm">
       <!-- 内容主体区 -->
       <el-form :model="addForm"
                :rules="addFormRules"
@@ -157,10 +161,63 @@
       <span slot="footer"
             class="dialog-footer">
         <el-button @click="addDialogVisible = false">取 消</el-button>
-        <el-button type="info"
-                   @click="resetAddForm">重 置</el-button>
         <el-button type="primary"
-                   @click="addDialogVisible = false">确 定</el-button>
+                   @click="addUser">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 修改用户的对话框 -->
+    <el-dialog title="修改用户"
+               :visible.sync="editDialogVisible"
+               width="50%"
+               @close="resetEditForm">
+      <!-- 内容主体区 -->
+      <el-form :model="editForm"
+               :rules="editFormRules"
+               ref="editFormRef"
+               label-width="70px">
+        <!-- 用户名称 -->
+        <el-form-item label="编号"
+                      prop="id">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="editForm.id"
+                    prefix-icon="el-icon-user"
+                    type="text"
+                    disabled></el-input>
+        </el-form-item>
+
+        <!-- 用户名称 -->
+        <el-form-item label="用户名"
+                      prop="username">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="editForm.username"
+                    prefix-icon="el-icon-user"
+                    type="text"
+                    disabled></el-input>
+        </el-form-item>
+
+        <!-- 邮箱 -->
+        <el-form-item label="邮箱"
+                      prop="email">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="editForm.email"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="手机号"
+                      prop="mobile">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="editForm.mobile"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="editUserInfo()">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -170,9 +227,10 @@ export default {
   data () {
     //   验证邮箱规则
     var checkEmail = (rule, value, cb) => {
+      console.log(value)
       const regEmail = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi
       if (regEmail.test(value)) {
-        return cb
+        return cb()
       }
       cb(new Error('请输入合法邮箱'))
     }
@@ -180,7 +238,7 @@ export default {
     var checkMobile = (rule, value, cb) => {
       const regMobile = /1[34578]\d{9}$/g
       if (regMobile.test(value)) {
-        return cb
+        return cb()
       }
       cb(new Error('请输入合法手机号'))
     }
@@ -193,7 +251,19 @@ export default {
       },
       total: 0,
       addDialogVisible: false,
-      addForm: {},
+      editDialogVisible: false,
+      addForm: {
+        username: '',
+        password: '',
+        email: '',
+        mobile: ''
+      },
+      editForm: {
+        id: '',
+        username: '',
+        email: '',
+        mobile: ''
+      },
       addFormRules: {
         // 验证用户名是否合法
         username: [
@@ -207,12 +277,24 @@ export default {
         ],
         email: [
           { required: true, message: '请输入邮箱' },
-          { trigger: 'blur', validator: checkEmail }
+          { validator: checkEmail, trigger: 'blur' }
         ],
-        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
-        { trigger: 'blur', validator: checkMobile }]
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { validator: checkMobile, trigger: 'blur' }
+        ]
       },
-
+      editFormRules: {
+        id: [{ required: true, message: '编号不能为空' }],
+        email: [
+          { required: true, message: '请输入邮箱' },
+          { validator: checkEmail, trigger: 'blur' }
+        ],
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { validator: checkMobile, trigger: 'blur' }
+        ]
+      }
     }
   },
   created () {
@@ -243,11 +325,72 @@ export default {
       }
       this.$message.success('更新用户状态成功')
     },
-    // 点击重置按钮 重置登录表单
+    // 重置表单 dialog监听关闭事件
     resetAddForm () {
-      //   console.log(this)
       this.$refs.addFormRef.resetFields()
     },
+    resetEditForm () {
+      this.$refs.editFormRef.resetFields()
+    },
+    // 点击按钮，添加新用户
+    addUser () {
+      this.$refs.addFormRef.validate(async valid => {
+        if (!valid) return
+        // 可以发起添加用户的网络请求
+        const { data: res } = await this.$http.post('users', this.addForm)
+
+        if (res.meta.status !== 201) {
+          this.$message.error('添加用户失败！')
+        }
+
+        this.$message.success('添加用户成功！')
+        // 隐藏添加用户的对话框
+        this.addDialogVisible = false
+        // 重新获取用户列表数据
+        this.getUserList()
+      })
+    },
+    async showEditDialog (userinfo) {
+      this.editForm = userinfo
+      this.editDialogVisible = true
+    },
+    editUserInfo () {
+      this.$refs.editFormRef.validate(async (vaild) => {
+        if (!vaild) return
+        // 发起修改用户请求
+        const { data: res } = await this.$http.put(`users/${this.editForm.id}`, {
+          email: this.editForm.email,
+          mobile: this.editForm.mobile
+        })
+        if (res.meta.status !== 200) {
+          return this.$message.error('用户修改失败')
+        }
+
+        this.$message.success('用户修改成功')
+        // 隐藏添加用户的对话框
+        this.editDialogVisible = false
+        // 重新获取用户列表数据
+        this.getUserList()
+      })
+    },
+    async removeUserById (id) {
+      const confirmResule = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      //   用户确认删除，返回字符串 confirm
+      //   用户取消删除返回字符串 chancel
+      if (confirmResule !== 'confirm') {
+        return this.$message.info('已经取消删除')
+      }
+      const { data: res } = await this.$http.delete(`users/${id}`)
+      if (res.meta.status != 200) {
+        return this.$message.error('删除失败')
+      }
+      this.getUserList()
+      this.$message.success('删除成功')
+    }
   }
 }
 </script>

src/main.js

@@ -1,3 +1,10 @@
+/*
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-21 23:56:19
+ * @LastEditTime: 2021-11-22 11:54:40
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -12,7 +19,7 @@ import axios from 'axios'
 axios.interceptors.request.use(config => {
     // console.log(config)
     // 预处理将session中的token放入 请求头中
-    config.headers.Authorization = window.sessionStorage.getItem('token')
+    config.headers.Authorization = window.localStorage.getItem('token')
     return config
 })
 // 配置请求根路径

src/plugins/element.js

@@ -1,8 +1,15 @@
+/*
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-21 23:56:19
+ * @LastEditTime: 2021-11-22 18:19:25
+ */
 import Vue from 'vue'
 import {
     Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Footer,
     Menu, MenuItem, Submenu, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table,
-    TableColumn, Switch, Tooltip, Pagination, Dialog
+    TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox
 } from 'element-ui'
 Vue.use(Button)
 Vue.use(Form)
@@ -28,3 +35,4 @@ Vue.use(Tooltip)
 Vue.use(Pagination)
 Vue.use(Dialog)
 Vue.prototype.$message = Message
+Vue.prototype.$confirm = MessageBox.confirm

src/router/index.js

@@ -1,3 +1,10 @@
+/*
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-21 23:56:19
+ * @LastEditTime: 2021-11-22 11:59:09
+ */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
@@ -47,7 +54,7 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
     if (to.path === '/login') return next()
     // 获取token
-    const token = window.sessionStorage.getItem('token')
+    const token = window.localStorage.getItem('token')
     if (!token) {
         return next('/login')
     }