慈善公益网站的详细设计与实现主要是根据前面的慈善公益网站的需求分析和慈善公益网站的总体设计来设计页面并实现业务逻辑。主要从慈善公益网站界面实现、业务逻辑实现这两部分进行介绍。
当进入慈善公益网站的时候，系统以上中下的布局进行展示，首先映入眼帘的是系统的导航栏，下面是轮播图，再往下是爱心资讯，其主界面展示如下图所示。
图4-1 前台首页界面图
慈善公益网站的会员用户时可以进行注册登录，当用户右上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可用户注册成功。用户注册界面展示如下图所示。
图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用户登录界面图
登录的逻辑代码如下所示。
/**
* 登录
* @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-5贡献排名界面图
贡献排名关键代码如下：
@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-6轮播图界面图
图4-7我们在路上界面图
图4-8留言信息界面图
管理员点击“用户管理”这一菜单会显示管理员、会员用户这两个子菜单，管理员可以对这两个角色的信息进行增删改查操作。界面如下图所示。
图4-9用户管理界面图
管理员可以管理网站的资讯内容，包括添加、编辑、删除爱心资讯，管理资讯分类，以及确保资讯的质量和准确性。资讯管理界面如下图所示。
图4-10爱心资讯界面图
图4-11资讯分类界面图
管理员可以管理网站的新闻分类，包括添加、编辑、删除新闻分类，以便用户能够方便地查找相关新闻内容。新闻分类界面如下图所示。
图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-14爱心捐赠界面图
系统测试包括：用户登录功能测试、爱心资讯查看功能测试、平台奖项添加、平台奖项搜索、密码修改、爱心捐赠功能测试，如表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大模块为慈善公益网站的后期推广运营提供了强力的技术支撑。
">