java抽奖系统（五）
7. 活动中心模块
活动管理页面见码云：
7.1 人员管理
完善普通用户注册，成功之后跳转到人员列表页面。即完善一下注册界面的局部内容：
注册成功之后跳转到人员列表，数据库添加成功：
人员列表页面的实现，前端代码见码云，后端实现步骤如下
7.1.1 时序图
7.1.2 前后端约定交互接口
请求路径后面的参数是身份，当传递admin时，只返回管理员的人员；但参数是normal时，只返回普通用户的信息，当没有参数传递的时候，就会返回所有的人员的信息；
controller层定义接口：
@RequestMapping("/base-user/find-list")
public CommonResult<List<BaseUserInfoResult>> findBaseUserInfo(String identity){
logger.info("UserController findBaseUserInfo identity{}",identity);
List<UserDTO> userDTOList = userService.findUserInfo(UserIdentityEnum.forName(identity));
return CommonResult.success(convertToList(userDTOList));
}
private List<BaseUserInfoResult> convertToList(List<UserDTO> userDTOList) {
if (CollectionUtils.isEmpty(userDTOList)) {
return Arrays.asList();
// Arrays.asList()构造一个空列表
}
return userDTOList.stream()
.map(userDTO -> {
BaseUserInfoResult result = new BaseUserInfoResult();
result.setUserId(userDTO.getUserId());
result.setUserName(userDTO.getUserName());
result.setIdentity(userDTO.getIdentity().name());
return result;
}).collect(Collectors.toList());
}service接口的定义和实现：
List<UserDTO> findUserInfo(UserIdentityEnum identity);
@Override
public List<UserDTO> findUserInfo(UserIdentityEnum identity) {
//查数据库不能用枚举类去查，要先转成string
String identityString = identity == null ? null : identity.name();
//开始查表
List<UserDO> userDOList = userMapper.selectUserListByIdentity(identityString);
// dto是service往外controller传的对象，do是service从数据库中拿出来的数据
List<UserDTO> userDTOList = userDOList.stream()
.map(userDO -> {
UserDTO userDTO = new UserDTO();
userDTO.setUserId(userDO.getId());
userDTO.setUserName(userDO.getUserName());
userDTO.setEmail(userDO.getEmail());
userDTO.setPhoneNumber(userDO.getPhoneNumber().getValue());
userDTO.setIdentity(UserIdentityEnum.forName(userDO.getIdentity()));
return userDTO;
}).collect(Collectors.toList());
// collect(Collectors.toList());将map转化为list
return userDTOList;
}dao层代码：
@Select("<script> " +
" select * from user <if test=\"identity!=null\">" +
" where identity = #{identity} </if>" +
" order by id desc" +
" </script>")
List<UserDO> selectUserListByIdentity(@Param("identity")String identity);对用户进行降序排列，后创建的排在最上方：
空参测试结果如下：
完善人员列表的前端页面局部：
<script>
var userToken = localStorage.getItem("user_token");
var formData = new FormData();
// 提交奖品数据的函数
function submitPrizes() {
var prizeName = $('#prizeName').val();
var description = $('#description').val();
var price = $('#price').val();
formData.append("param", JSON.stringify({
prizeName:prizeName,
description:description,
price:price,
}));
// 发送POST请求到后端接口
$.ajax({
url: '/prize/create',
type: 'POST',
// 不设置Content-Type请求头，因为数据将通过其他方式传递，例如通过FormData。
contentType : false,
// 不要处理发送的数据
processData : false,
headers: {
// jwt
"user_token": userToken
},
data: formData,
success: function(result) {
if(result.code == 200) {
alert('奖品创建成功！');
} else {
alert('创建奖品失败：' + result.msg);
}
},
error:function(err){
console.log(err);
if(err!=null && err.status==401){
alert("用户未登录, 即将跳转到登录页!");
// 跳转登录页
window.location.href = "/blogin.html";
window.parent.location.href = "/blogin.html";//让父页面一起跳转
}
}
});
}
// 上传图片：读取用户通过文件输入选择的图片文件，并将其显示在一个网页元素中
function showImg(){
var file = document.getElementById("prizeImageUrl").files[0];
formData.append("prizePic",file);
var r= new FileReader();
result = r.readAsDataURL(file);
r.onload=function (e) {
console.log(e)
$('#previewImg').attr("src", e.target.result).show();
}
}
</script>测试如下：
人员列表页面实现；
ps：谢谢观看！！！
原文地址：https://blog.csdn.net/2202_76101487/article/details/144426323
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！