53.(前端)增加用户功能实现

1.概述

上几篇博客记录了，我如何去创建这个Dialog、插入表单、对表单中的数据进行验证。
本次就应该把收集到的数据传递回给后端，保存到数据库中。

2.流程简述

1. 验证请求的数据是否规范
2. 发送post请求
3. 验证请求返回的结果
4. 隐藏窗口
5. 重置增加用户表单
6. 重新获取用户的列表

3.404报错

Uncaught (in promise) AxiosError {message: ‘Request failed with status code 404’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …}
当时发现了这个错误，我通过输出，发现卡在了发送post这一步。
解决的方法：
因为当时为了解决跨域问题，所以改了vue.config.js，就在我们请求的地址前加一个/api即可。
完整代码如下

4.主要代码

addUser(){
            // 发送请求之前，验证数据是否规范valid
            this.$refs.addFormRef.validate(async valid => {
                console.log(valid);
                if (!valid) return
                // 发送请求
                const { data: res } = await this.$axios.post(
                    '/api/user/user',
                    this.$qs.stringify(this.addForm)
                )
                console.log(res);
                // 验证结果
                if (res.status !== 200) return this.$msg.error(res.msg)
                this.$msg.success(res.msg)
                // 隐藏窗口
                this.addDialogVisible = false
                // 重置增加用户的表单
                this.$refs.addFormRef.resetFields()
                // 重新获取用户列表
                this.getUserList()
            })

5.完整代码

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input placeholder="请输入用户名" v-model="queryInfo.name">
                            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible=true">新增用户</el-button>
                    </el-col>
                </el-row>
                <el-row >
                    <el-col>
                        <el-table :data="userList" border style="width:100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column prop="id" label="ID"></el-table-column>
                            <el-table-column prop="name" label="用户名"></el-table-column>
                            <el-table-column prop="nick_name" label="昵称"></el-table-column>
                            <el-table-column prop="email" label="邮箱"></el-table-column>
                            <el-table-column prop="phone" label="电话"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" 
                    :current-page="queryInfo.pnum"
                    :page-sizes="[1,2,5,10]"  
                    :page-size="queryInfo.psize" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="total">
                </el-pagination>
            </div>
            <!-- 新增用户的dialog模态框 -->
            <!-- 通过visible.sync显示 -->
            <el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%" 
            :before-close="addFormClose">
            <!-- ref用于获取表单数据，绑定表单。 -->
            <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
                <!-- prop绑定规则 -->
                <el-form-item label="账号" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nick_name">
                    <el-input v-model="addForm.nick_name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="addForm.pwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="real_pwd">
                    <el-input v-model="addForm.real_pwd"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
            </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="addFormClose">取 消</el-button>
                    <el-button type="primary" @click="addUser">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>
export default {
    data () {
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.addForm.pwd) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }
        const validatePhone = (rule, value, callback) => {
            // 定义一个正则来验证手机号是否有效
            let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
            if (phoneReg.test(value)){
                return callback()
            }
            return callback(new Error('请输入有效的手机号'))
        }
        const validateEmail = (rule, value, callback) => {
            // 定义一个正则来验证手机号是否有效
            let EmailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if (EmailReg.test(value)){
                return callback()
            }
            return callback(new Error('请输入有效的邮箱号'))
        }
        return {
            userList : [],
            // 用于传递页码和每页的条数,控制搜索条件
            queryInfo: {
                // 默认值
                name:'',
                pnum: 1,
                psize: 2
            },
            // 用于统计总共有几条数据
            total: 0,
            addDialogVisible:false,
            addForm:{},
            addFormRules:{
                // 一个字段可以多个规则
                // required是否必填，message提示信息（输入框下面），trigger：什么时候触发（光标不在输入框或回车）

                name:[
                    { required: true, message: '请输入用户名', trigger:'blur' },
                    { min:  1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
                ],
                nick_name:[
                    { required: true, message: '请输入昵称', trigger:'blur' },
                    { min:  1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}   
                ],
                pwd:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min:  1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
                ],
                real_pwd:[
                    { validator: validatePass2, trigger:'blur'}
                ],
                phone:[
                    { validator: validatePhone, trigger:'blur'}
                ],
                email:[
                    { validator: validateEmail, trigger:'blur'}
                ]
            }
        }
    },
    // 创建时进行的操作
    created(){
        this.getUserList()
    },
    // 异步操作转同步：因为加载到这个页面时候就必须加载此数据
    methods: {
        async getUserList(){
            // 发送请求到后端：当时定义的请求方式是put，定义的地址是/user_list, 传递第几页第几条
            const { data : res } = await this.$axios.get('/api/user/user_list', { params: this.queryInfo })
            // 避免报错
            if(res.status != 200) return this.$msg.error(res.msg)
            console.log(res.data);
            this.total = res.data.totalPage
            this.userList = res.data.users
        },
        // 改变每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.psize = val
            // 一定记得改变完要调用方法
            this.getUserList()
        },
        // 改变展示哪一页
        handleCurrentChange(val) {
            this.queryInfo.pnum = val
            this.getUserList()
        },
        searchUser(){
            this.queryInfo.pnum = 1
            this.getUserList()
        },
        // 每次打开之前触发的函数
        addFormClose(){
            // $refs.addFormRef获取到整个组件
            this.$refs.addFormRef.resetFields()
            this.addDialogVisible = false
        },
        addUser(){
            // 发送请求之前，验证数据是否规范valid
            this.$refs.addFormRef.validate(async valid => {
                console.log(valid);
                if (!valid) return
                // 发送请求
                const { data: res } = await this.$axios.post(
                    '/api/user/user',
                    this.$qs.stringify(this.addForm)
                )
                console.log(res);
                // 验证结果
                if (res.status !== 200) return this.$msg.error(res.msg)
                this.$msg.success(res.msg)
                // 隐藏窗口
                this.addDialogVisible = false
                // 重置增加用户的表单
                this.$refs.addFormRef.resetFields()
                // 重新获取用户列表
                this.getUserList()
            })
        }
    }

}
</script>

<style>
    .el-table{
        margin-top: 10px;
    }
</style>