Vue编写添加用户的表单~不要错过哦

在写项目的过程中遇到了添加用户信息的功能&＃xff0c;今天写出来和大家分享。
希望可以帮助到有需要的小伙伴

使用element-ui实现布局和样式

在使用element-ui的时候&＃xff0c;要引入需要使用的ui组件并注册后&＃xff0c;才可以使用
添加用户的按钮

添加用户的表单 – 使用对话框实现
点击添加按钮后会出现这个添加用户的表单



<el-button type&＃61;"primary" &＃64;click&＃61;"addDialogVisible &＃61; true">添加用户el-button>

<el-dialogtitle&＃61;"添加用户":visible.sync&＃61;"addDialogVisible"width&＃61;"50%"&＃64;close&＃61;"addDialogClosed"><el-formref&＃61;"addFormRef":model&＃61;"addForm":rules&＃61;"addFormRules"label-width&＃61;"70px"><el-form-item label&＃61;"用户名" prop&＃61;"username"><el-input v-model&＃61;"addForm.username">el-input>el-form-item><el-form-item label&＃61;"密码" prop&＃61;"password"><el-input v-model&＃61;"addForm.password">el-input>el-form-item><el-form-item label&＃61;"邮箱" prop&＃61;"email"><el-input v-model&＃61;"addForm.email">el-input>el-form-item><el-form-item label&＃61;"手机号" prop&＃61;"mobile"><el-input v-model&＃61;"addForm.mobile">el-input>el-form-item>el-form>

Javascript中的数据、数据的校验规则 以及 方法

<script>
export default {data() {// 验证邮箱的校验规则var checkEmail &＃61; (rule, value, cb) &＃61;> {// 验证邮箱的正则表达式const regEmail &＃61; /^([a-zA-Z0-9_-])&＃43;&＃64;([a-zA-Z0-9_-])&＃43;(\.[a-zA-Z0-9_-])&＃43;/if (regEmail.test(value)) {// 合法的邮箱return cb()}// 非法的邮箱cb(new Error(&＃39;请输入合法的邮箱&＃39;))}// 验证手机号的校验规则var checkMobile &＃61; (rule, value, cb) &＃61;> {// 验证手机号的正则表达式const regMobile &＃61; /^(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(&＃39;请输入合法的手机号&＃39;))},// 添加用户的表单数据addForm: {username: &＃39;&＃39;,password: &＃39;&＃39;,email: &＃39;&＃39;,mobile: &＃39;&＃39;,},// 添加表单的验证规则对象addFormRules: {username: [{ required: true, message: &＃39;请输入用户名&＃39;, trigger: &＃39;blur&＃39; },{min: 3,max: 10,message: &＃39;用户名的长度是3~10个字符之间&＃39;,trigger: &＃39;blur&＃39;,},],password: [{ required: true, message: &＃39;请输入密码&＃39;, trigger: &＃39;blur&＃39; },{min: 6,max: 15,message: &＃39;密码的长度是6~15个字符之间&＃39;,trigger: &＃39;blur&＃39;,},],/*验证是否输入{ required: true, message: &＃39;请输入邮箱&＃39;, trigger: &＃39;blur&＃39; },*//* 验证输入的是否正确{ validator: checkEmail, trigger: &＃39;blur&＃39; }*/email: [{ required: true, message: &＃39;请输入邮箱&＃39;, trigger: &＃39;blur&＃39; },{ validator: checkEmail, trigger: &＃39;blur&＃39; },],mobile: [{ required: true, message: &＃39;请输入手机号&＃39;, trigger: &＃39;blur&＃39; },{ validator: checkMobile, trigger: &＃39;blur&＃39; },],},// 生命周期函数// 在生命周期函数中&＃xff0c;发起当前的 获取用户列表数据请求created() {this.getUserList()},methods: {// 获取用户列表数据请求 的 方法async getUserList() {// users 是 请求路径// {params:{}} 是 get请求 携带的参数// 把 携带的参数 放到 data()中 比较好// 异步请求会返回一个data属性&＃xff0c;{data: res} 把data属性重命名为resconst { data: res } &＃61; await this.$http.get(&＃39;users&＃39;, {params: this.queryInfo,})// 如果 获取用户列表数据 失败if (res.meta.status !&＃61;&＃61; 200) {return this.$message.error(&＃39;获取用户列表失败&＃xff01;&＃39;)}// 点击按钮&＃xff0c;添加新用户// addFormRef 整个表单的引用对象addUser() {this.$refs.addFormRef.validate(async (valid) &＃61;> {// console.log(valid)// 如果预检验失败if (!valid) return// 如果与校验成功// 可以发起添加用户的网络请求const { data: res } &＃61; await this.$http.post(&＃39;users&＃39;, this.addForm)// 判断添加用户的结果if (res.meta.status !&＃61;&＃61; 201) {this.$message.error(&＃39;添加用户失败&＃xff01;&＃39;)}this.$message.success(&＃39;添加用户成功&＃xff01;&＃39;)// 隐藏添加用户的对话框this.addDialogVisible &＃61; false// 重新获取用户列表数据this.getUserList()})}
}
</script>


添加用户的接口

• 请求路径&＃xff1a;users
• 请求方法&＃xff1a;post
• 请求参数

• 响应参数

• 响应数据

{"data": {"id": 28,"username": "tige1200","mobile": "test","type": 1,"openid": "","email": "test&＃64;test.com","create_time": "2017-11-10T03:47:13.533Z","modify_time": null,"is_delete": false,"is_active": false},"meta": {"msg": "用户创建成功","status": 201}
}