![](https://i-blog.csdnimg.cn/blog_migrate/e2d1fc53c40d3fcf3e15c81dc02106e3.png)
1.1.3 用户新增页面分析
<!-- 编辑用户新增对话框 visible.sync 控制对话框的显示-->
<el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
<!-- 定义用户提交表单数据-->
<el-form :model="addUserModel" :rules="rules" ref="addUserRef" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="addUserModel.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addUserModel.password" type="password"></el-input>
</el-form-item>
<el-form-item label="密码确认" prop="password2">
<el-input v-model="addUserModel.password2" type="password"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="addUserModel.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addUserModel.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUserBtn">确 定</el-button>
</span>
</el-dialog>
![](https://i-blog.csdnimg.cn/blog_migrate/57b934c12046923fb26970a3ff8f0d24.png)
![](https://i-blog.csdnimg.cn/blog_migrate/364c060f0a8bc4c1c41a80f7ba5f21a4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8f2b9a5e35235bc54bb4a8011b5862c7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e33f9bc35b2329145c87e196a1ab75e1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/03e61d114dce19abbf2a52ec06af4b67.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6a89a39ebd461c7920e4ea9e5e888f53.png)
![](https://i-blog.csdnimg.cn/blog_migrate/353d1b8aef1aace7a450391958ced0ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0953649ec770aa3877932c27365eb6bf.png)
1.3.4 编辑UserService
/**
* 1.要求将密码 加密处理
* 2.入库/更新的时间(框架帮助完成)
* 3.什么是事务: 操作成功 数据库提交事务 操作失败 事务回滚
* 关于事务控制说明:
* rollbackFor: 遇到某种异常时,回滚事务
* noRollbackFor: 遇到某种异常,不回滚事务
* 特殊环境下使用. 一般条件下采用默认行为
* @param user
*/
@Override
@Transactional //1.运行期异常 2.编译异常(检查异常)
// 事务默认条件下只对运行时异常有效
public void addUser(User user) {
String md5Pass =
DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
user.setPassword(md5Pass);
user.setStatus(true); //设定默认值
userMapper.insert(user);
}
![](https://i-blog.csdnimg.cn/blog_migrate/4da26f2394d43565b227893115cac197.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cbbc2e1f070999f8f61d7c915df9d50f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e98200ab13d4b8aabc3c0ed65bf859f1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d3e2b6524a64c10dbfa0752ce3d9b8b1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/99a391a049838c4af045b9bfe21aa1ed.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7f8417cb702b412f7f0daa4ad691411a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8c9d26895c78d9406d9bbae6a54f5b43.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4135f1d4286dca455e87491a5d8489b1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e12bd9539165cdaeea6b40ba2162ef0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5dd872ecb13025878022bada6f65d5d6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/14ee59892bec3758bc69fdfb0779922a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a2f270c6da6ea50f6b1944ee7400076e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2f6e6b4bb9c4d172269a857c1f9c0adc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/73026d061e314bb292ad3e909f5e71fa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/100ea58e55d209388f55cb271b7973d7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/01657e0bf463d46d30787b08fc6f52ad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/14a3524de8f6ad3121c39a56b74f37df.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8a13793e84ca3f7e17a28777f2102651.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e67d89e1872248fd49735c453c1718a0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2eab63b20278211ba5f9b71a3667a09c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d466bdf01beb5ee62a204d42aa2d705.png)
![](https://i-blog.csdnimg.cn/blog_migrate/802d34164624dd5461ea31eca04a60a4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3f7be34fd017d54ad2a17b89b1e80ac3.png)