留守儿童爱心网站的详细设计与实现主要是根据前面的留守儿童爱心网站的需求分析和留守儿童爱心网站的总体设计来设计页面并实现业务逻辑。主要从留守儿童爱心网站界面实现、业务逻辑实现这两部分进行介绍。
当进入留守儿童爱心网站的时候，系统以上中下的布局进行展示，首先映入眼帘的是系统的导航栏，下面是轮播图，再往下是系统公告，其主界面展示如下图4-1所示。
图4-1 前台首页界面图
留守儿童爱心网站的游客和普通用户时可以进行注册登录，当用户右上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可用户注册成功。普通用户注册界面展示如下图4-2所示。
图4-2注册界面图
注册关键代码如下：
* 注册
* @param user
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(@RequestBody User user) {
// 查询用户
Map<String, String> query = new HashMap<>();
Map<String,Object> map = JSON.parseObject(JSON.toJSONString(user));
query.put("username",user.getUsername());
List list = service.selectBaseList(service.select(query, new HashMap<>()));
if (list.size()>0){
return error(30000, "用户已存在");
}
map.put("password",service.encryption(String.valueOf(map.get("password"))));
service.insert(map);
return success(1);
}
留守儿童爱心网站中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当普通用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到留守儿童爱心网站的首页中；否则将会提示相应错误信息，用户登录界面如下图4-3所示。
图4-3用户登录界面图
登录的逻辑代码如下所示。
/**
* 登录
* @param data
* @param httpServletRequest
* @return
*/
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[执行登录接口]");
String username = data.get("username");
String email = data.get("email");
String phone = data.get("phone");
String password = data.get("password");
List resultList = null;
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.select(map, new HashMap<>()).getResultList();
}else{
return error(30000, "账号或密码不能为空");
}
if (resultList == null || password == null) {
return error(30000, "账号或密码不能为空");
}
//判断是否有这个用户
if (resultList.size()<=0){
return error(30000,"用户不存在");
}
User byUsername = (User) resultList.get(0);
Map<String, String> groupMap = new HashMap<>();
groupMap.put("name",byUsername.getUserGroup());
List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
String res = String.valueOf(service.runCountSql(sql).getSingleResult());
if (res==null){
return error(30000,"用户不存在");
}
if (!res.equals("已通过")){
return error(30000,"该用户审核未通过");
}
}
//查询用户状态
if (byUsername.getState()!=1){
return error(30000,"用户非可用状态，不能登录");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存储Token到数据库
AccessToken accessToken = new AccessToken();
accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
accessToken.setUser_id(byUsername.getUserId());
tokenService.save(accessToken);
// 返回用户信息
JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
user.put("token", accessToken.getToken());
JSONObject ret = new JSONObject();
ret.put("obj",user);
return success(ret);
} else {
return error(30000, "账号或密码不正确");
}
}
当用户点击右上角点击“我的账户”可以对个人的资料、登录系统的密码的信息进行设置管理，我的账户界面如下图4-4所示。
图4-4我的账户界面图
用户使用该系统注册完成后，用户对登录密码有修改需求时，系统也可以提供用户修改密码权限。系统中所有的操作者能够变更自己的密码信息，执行该功能首先必须要登入系统，然后选择密码变更选项以后在给定的文本框中填写初始密码和新密码来完成修改密码的操作。在填写的时候，假如两次密码填写存在差异，那么此次密码变更操作失败。密码修改界面如下图所示。
图4-5密码修改界面图
当用户点击留守儿童爱心网站中导航栏上的“志愿活动”后将会进入到该“志愿活动”列表的界面，然后选择想要看的志愿活动，点击进入到详细界面，在详细界面可以报名、 收藏+点赞等操作，志愿活动界面如下图4-6所示。
图4-6志愿活动界面图
当用户点击“爱心捐助”，可以查看所有的爱心捐助详情，用户姓名、用户电话、捐助日期、捐助金额等信息，还可以进行查询、重置等操作。爱心捐助界面如下图4-7所示。
图4-7爱心捐助界面图
爱心捐助关键代码如下：
@PostMapping("/set")
@Transactional
public Map<String, Object> set(HttpServletRequest request) throws IOException {
service.update(service.readQuery(request), service.readConfig(request), service.readBody(request.getReader()));
return success(1);
}
管理员点击“物资捐助管理”这一菜单会显示物资捐助列表、物资捐助添加这两个子菜单，支持输入物资名称、物资数量、物资类型进行查询、重置和删除的操作，还可以查看用户的评论信息。如果想要添加新的物资捐助，点击“添加”按钮，输入用户姓名、联系电话、物资名称、物资类型、物资数等信息，点击“提交”按钮就可以添加了，同时可以选择某一条爱心捐助，点击“删除”进行删除。爱心捐助列表、爱心捐助添加界面如下图4-8和4-9所示。
图4-8物资捐助列表界面图
图4-9物资捐助添加界面图
管理员点击“儿童信息管理”这一菜单会显示儿童信息列表、儿童信息添加这两个子菜单，支持输入儿童信息进行查询、重置和删除的操作。如果想要添加新的儿童信息，点击“添加”按钮，输入儿童信息信息，点击“提交”按钮就可以添加了，同时可以选择某一条儿童信息，点击“删除”进行删除。儿童信息列表、儿童信息添加界面如下图4-10和4-11所示。
图4-10儿童信息列表界面图
图4-11儿童信息添加界面图
管理员点击“报名信息管理”这一菜单会显示报名信息列表这个子菜单，可以查看所有的报名信息详情，包括用户姓名、性别、活动类型、活动名称、审核状态等信息，还可以进行查询、重置和删除等操作。报名信息管理界面如下图4-12所示。
图4-12报名信息管理界面图
报名信息管理关键代码如下：
@RequestMapping(value = "/del")
@Transactional
public Map<String, Object> del(HttpServletRequest request) {
service.delete(service.readQuery(request), service.readConfig(request));
return success(1);
}
public void delete(Map<String,String> query,Map<String,String> config){
QueryWrapper wrapper = new QueryWrapper<E>();
toWhereWrapper(query, "0".equals(config.get(FindConfig.GROUP_BY)),wrapper);
baseMapper.delete(wrapper);
log.info("[{}] - 删除操作：{}",wrapper.getSqlSelect());
}
管理员点击“系统管理”这一菜单会显示轮播图这个子菜单，管理员可以对前台展示的轮播图进行设置，界面如下图4-13所示。
图4-13系统管理界面图
系统管理关键代码如下：
@PostMapping("/add")
@Transactional
public Map<String, Object> add(HttpServletRequest request) throws IOException {
service.insert(service.readBody(request.getReader()));
return success(1);
}
public Map<String, Object> addMap(Map<String,Object> map){
service.insert(map);
return success(1);
}
管理员可以对系统前台展示的通知公告进行增删改查，方便用户进行查看。通知公告管理界面如下图4-14所示。
图4-14通知公告管理界面图
管理员点击“资讯管理”菜单能够对其下子菜单关爱资讯和资讯分类进行增删改查。界面如下图4-15所示。
图4-15资讯管理界面图
资讯管理关键代码如下：
@RequestMapping("/get_list")
public Map<String, Object> getList(HttpServletRequest request) {
Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
return success(map);
}
系统测试包括：用户登录功能测试、志愿活动展示功能测试、物资捐助添加、儿童信息搜索、密码修改、报名信息功能测试，如表5-1、5-2、5-3、5-4、5-5、5-6所示：
表5-1 用户登录功能测试表
| 用例名称 | 用户登录系统 |
| 目的 | 测试用户通过正确的用户名和密码可否登录功能 |
| 前提 | 未登录的情况下 |
| 测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
| 预期结果 | 用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入 |
| 实际结果 | 实际结果与预期结果一致 |
志愿活动查看功能测试：
表5-2 志愿活动查看功能测试表
| 用例名称 | 志愿活动查看 |
| 目的 | 测试志愿活动查看功能 |
| 前提 | 用户登录 |
| 测试流程 | 点击志愿活动列表 |
| 预期结果 | 可以查看到所有志愿活动信息 |
| 实际结果 | 实际结果与预期结果一致 |
管理员添加物资捐助界面测试：
表5-3 管理员添加物资捐助界面测试表
| 用例名称 | 添加物资捐助测试用例 |
| 目的 | 测试物资捐助添加功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员点击物资捐助，然后点击添加后并填写信息。 2）点击进行提交。 |
| 预期结果 | 提交以后，页面首页会显示新的物资捐助 |
| 实际结果 | 实际结果与预期结果一致 |
儿童信息搜索功能测试：
表5-4儿童信息搜索功能测试表
| 用例名称 | 儿童信息搜索测试 |
| 目的 | 测试儿童信息搜索功能 |
| 前提 | 无 |
| 测试流程 | 1）在搜索框填入搜索关键字。 2）点击搜索按钮。 |
| 预期结果 | 页面显示包含有搜索关键字的儿童信息 |
| 实际结果 | 实际结果与预期结果一致 |
密码修改搜索功能测试：
表5-5 密码修改功能测试表
| 用例名称 | 密码修改测试用例 |
| 目的 | 测试管理员密码修改功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员密码修改并完成填写。 2）点击进行提交。 |
| 预期结果 | 使用新的密码可以登录 |
| 实际结果 | 实际结果与预期结果一致 |
报名信息功能测试：
表5-6报名信息功能测试表
| 用例名称 | 报名信息测试用例 |
| 目的 | 测试用户报名信息功能 |
| 前提 | 用户正常登录情况下 |
| 测试流程 | 1）搜索查看志愿活动，点击报名信息。 2）填写报名信息信息，点击进行提交。 |
| 预期结果 | 活动报名成功 |
| 实际结果 | 实际结果与预期结果一致 |
通过编写留守儿童爱心网站的测试用例，已经检测完毕用户登录功能测试、志愿活动展示功能测试、物资捐助添加、儿童信息搜索、密码修改、报名信息功能测试，通过这6大模块为留守儿童爱心网站的后期推广运营提供了强力的技术支撑。
">