如何实现添加用户功能

如何实现添加用户功能

在UTHEME的网站编辑中，添加用户功能是必不可少的一部分，本篇文章将介绍如何实现添加用户功能的步骤。

首先，需要单击添加按钮之后，弹出添加用户的对话框。这个对话框用来输入添加用户的信息，点击添加后，用户信息会在最后一页展示出来。

给添加用户按钮绑定单击事件

为了实现这个功能，需要给添加用户按钮绑定一个单击事件。绑定的单击事件如下图：

```
添加用户
```

添加用户的对话框的效果和代码

绑定单击事件之后，需要弹出添加用户的对话框。对话框的效果和代码如下图：

```

```

添加用户对话框需要用到的UserList.vue组件中的数据

在添加表单中输入添加用户的信息之后，因为是双向绑定，所以用户信息会被存储到名字为addForm的json对象的属性中，addForm数据对象如下图：

```
data() {
return {
addForm: {
username: '',
password: '',
email: ''
},
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' }
]
},
addUserDialogVisible: false
}
}
```

UserList.vue组件中的addUser方法

addUser方法用来向数据库中添加用户信息的内容如下图：

```
addUser() {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$http.post('/user/add', this.addForm).then(() => {
this.getUserList(this.userList.length + 1);
this.addUserDialogVisible = false;
this.$message.success('添加成功！');
});
} else {
this.$message.error('请填写正确的用户信息！');
return false;
}
});
}
```

addUser方法执行成功之后，数据库中的easyUser表中已经新增了一条用户数据，需要在UserList.vue组件的显示用户的表格中，显示这条新增的数据。怎样显示呢？就是把当前页码改为一个很大的值，大过总页码，因为在SpringBoot的配置文件中已经设置了分页参数合理化参数reasonabled的值为ture，所以这个很大的页码其实就相当于是最后一页的页码。设置完当前页码后，在addUser方法中调用getUserList方法重新加载最后一页的用户集合数据即可。

getUserList方法

getUserList方法用来为userList和total数据赋值，内容如下图：

```
getUserList(currentPage) {
this.$http.get('/user/list', { params: { currentPage: currentPage } }).then((res) => {
this.userList = res.data.list;
this.total = res.data.total;
});
}
```

UserList.vue组件中的分页数据

在UserList.vue组件中，需要定义分页数据，如下图：

```
data() {
return {
currentPage: 1,
pageSize: 5,
total: 0,
userList: [],
searchForm: {
username: '',
email: ''
}
}
},
```

SpringBoot后端控制器中接收pageuser请求的方法getUserList

因为后端需要接收前端传递来的Page这个json对象，所以要在后端写一个与之对应的Page实体类，这样方便接收前端传递来的参数，Page实体类如下图：

```
public class Page {

private Integer currentPage;
private Integer pageSize;

public Integer getCurrentPage() {
return currentPage;
}

public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}

public Integer getPageSize() {
return pageSize;
}

public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
}
```

SpringBoot后端中的getUserList方法，如下图：

```
@RequestMapping(value = "/list", method = RequestMethod.GET)
public PageInfo getUserList(Page page) {
PageHelper.startPage(page.getCurrentPage(), page.getPageSize());
List userList = userDao.getAllUser();
PageInfo pageInfo = new PageInfo(userList);
return pageInfo;
}
```

动态代理接口UserDao中的getAllUser方法

动态代理接口UserDao中的getAllUser方法内容如下图：

```
List getAllUser();
```

UserDao.xml映射文件中的sql语句如下图：

```

select * from easy_user order by id

```

addUser方法中执行完getUserList方法之后，会把查询到的分页数据重新渲染到UserList.vue组件显示用户信息的表格中存储用户信息的表格，如下图：

```
this.getUserList(this.userList.length + 1);
```

getUserList方法执行之后，当前页面的数据，都会存储到userList集合中，如下图：

```
this.userList = res.data.list;
```

使用elmentui中的表格显示userList集合中的用户数据。

最后，在UserList.vue组件中，需要使用elmentui中的表格显示userList集合中的用户数据，如下图：

```
row.id">

编辑
删除

```

测试

最后，进行添加用户功能测试，进入首页，点击添加用户按钮，然后在弹出的对话框中填写要添加的用户信息，点击添加按钮，如下图：

添加完成后，查看数据库中的easyUser表，如下图：

以上就是如何实现添加用户功能的详细内容。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。