在写项目的过程中遇到了添加用户信息的功能,今天写出来和大家分享。
希望可以帮助到有需要的小伙伴
使用element-ui实现布局和样式
在使用element-ui的时候,要引入需要使用的ui组件并注册后,才可以使用
添加用户的按钮
添加用户的表单 – 使用对话框实现
点击添加按钮后会出现这个添加用户的表单
<!--添加用户的按钮-->
<!-- addDialogVisible 值为true 表示显示 false 表示隐藏 -->
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
<!--点击“添加用户”的按钮后,弹出来的表单使用对话框实现-->
<!-- 添加用户的对话框 -->
<!-- addDialogVisible是布尔值 表示对话框的显示与隐藏 -->
<!-- width 表示对话框的宽度 -->
<!-- :before-close 在对话框关闭之前会触发 -->
<!-- span 是内容主体区 -->
<!-- addDialogClosed -->
<el-dialog
title="添加用户"
:visible.sync="addDialogVisible"
width="50%"
@close="addDialogClosed"
>
<!-- 内容主体区域 -->
<!-- :model="addForm" 添加表单 -->
<!-- ref="addFormRef" 是表单组件的引用名称 -->
<!-- :rules="addFormRules" 验证规则 -->
<el-form
ref="addFormRef"
:model="addForm"
:rules="addFormRules"
label-width="70px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
javascript中的数据、数据的校验规则 以及 方法
<script>
export default {
data() {
// 验证邮箱的校验规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if (regEmail.test(value)) {
// 合法的邮箱
return cb()
}
// 非法的邮箱
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的校验规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
// 合法的手机号
return cb()
}
// 非法的手机号
cb(new Error('请输入合法的手机号'))
},
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: '',
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '用户名的长度是3~10个字符之间',
trigger: 'blur',
},
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '密码的长度是6~15个字符之间',
trigger: 'blur',
},
],
/*
验证是否输入
{ required: true, message: '请输入邮箱', trigger: 'blur' },
*/
/*
验证输入的是否正确
{ validator: checkEmail, trigger: 'blur' }
*/
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' },
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' },
],
},
// 生命周期函数
// 在生命周期函数中,发起当前的 获取用户列表数据请求
created() {
this.getUserList()
},
methods: {
// 获取用户列表数据请求 的 方法
async getUserList() {
// users 是 请求路径
// {params:{}} 是 get请求 携带的参数
// 把 携带的参数 放到 data()中 比较好
// 异步请求会返回一个data属性,{data: res} 把data属性重命名为res
const { data: res } = await this.$http.get('users', {
params: this.queryInfo,
})
// 如果 获取用户列表数据 失败
if (res.meta.status !== 200) {
return this.$message.error('获取用户列表失败!')
}
// 点击按钮,添加新用户
// addFormRef 整个表单的引用对象
addUser() {
this.$refs.addFormRef.validate(async (valid) => {
// console.log(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()
})
}
}
</script>
添加用户的接口
- 请求路径:users
- 请求方法:post
- 请求参数
参数名 | 参数说明 | 备注 |
---|---|---|
username | 用户名称 | 不能为空 |
password | 用户密码 | 不能为空 |
邮箱 | 可以为空 | |
mobile | 手机号 | 可以为空 |
- 响应参数
参数名 | 参数说明 | 备注 |
---|---|---|
id | 用户 ID | |
rid | 用户角色 ID | |
username | 用户名 | |
mobile | 手机号 | |
邮箱 |
- 响应数据
{
"data": {
"id": 28,
"username": "tige1200",
"mobile": "test",
"type": 1,
"openid": "",
"email": "test@test.com",
"create_time": "2017-11-10T03:47:13.533Z",
"modify_time": null,
"is_delete": false,
"is_active": false
},
"meta": {
"msg": "用户创建成功",
"status": 201
}
}