少儿编程网站的详细设计与实现主要是根据前面的少儿编程网站的需求分析和少儿编程网站的总体设计来设计页面并实现业务逻辑。主要从少儿编程网站界面实现、业务逻辑实现这两部分进行介绍。
当进入少儿编程网站的时候，首先映入眼帘的是系统的导航栏，下面是轮播图以及系统内容，其主界面展示如下图4-1所示。
图4-1 前台首页界面图
不是少儿编程网站中正式普通用户的是可以在线进行注册的，如果你没有本少儿编程网站的账号的话，添加“注册”，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可普通用户注册成功。其用用户注册界面展示如下图4-2所示。
图4-2 前台用户注册界面图
注册逻辑关键代码如下所示。
* 注册
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(HttpServletRequest request) throws IOException {
// 查询用户
Map<String, String> query = new HashMap<>();
Map<String,Object> map = service.readBody(request.getReader());
query.put("username",String.valueOf(map.get("username")));
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);
}
public Map<String,Object> readBody(BufferedReader reader){
BufferedReader br = null;
StringBuilder sb = new StringBuilder("");
try{
br = reader;
String str;
while ((str = br.readLine()) != null){
sb.append(str);
}
br.close();
String json = sb.toString();
return JSONObject.parseObject(json, Map.class);
}catch (IOException e){
e.printStackTrace();
}finally{
if (null != br){
try{
br.close();
}catch (IOException e){
e.printStackTrace();
}
}
}
return null;
}
public void insert(Map<String,Object> body){
E entity = JSON.parseObject(JSON.toJSONString(body),eClass);
baseMapper.insert(entity);
log.info("[{}] - 插入操作：{}",entity);
}
4.1.3 用户登录界面
少儿编程网站中的前台上注册后的普通用户是可以通过自己的账户名和密码进行登录的，当普通用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到少儿编程网站的首页中；否则将会提示相应错误信息，用户登录界面如下图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;
QueryWrapper wrapper = new QueryWrapper<User>();
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.selectBaseList(service.select(map, new HashMap<>()));
}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.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());
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, "账号或密码不正确");
}
}
public String select(Map<String,String> query,Map<String,String> config){
StringBuffer sql = new StringBuffer("select ");
sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");
sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));
if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){
sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");
}
if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){
sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");
}
if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){
int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;
int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;
sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);
}
log.info("[{}] - 查询操作，sql: {}",table,sql);
return sql.toString();
}
public List selectBaseList(String select) {
List<Map<String,Object>> mapList = baseMapper.selectBaseList(select);
List<E> list = new ArrayList<>();
for (Map<String,Object> map:mapList) {
list.add(JSON.parseObject(JSON.toJSONString(map),eClass));
}
return list;
}
4.1.4我的账户界面
当用户点击右上角“我的”这个按钮，会出现子菜单，点击“我的账户”可以对个人的资料以及登录系统的密码进行设置，我的账户界面如下图4-4所示。
图4-4我的账户界面图
当用户点击“编程资讯”以后就会进入到以下界面，用户可以输入关键词搜索新闻内容，查看点赞数以及点击数，然后点击到编程资讯的详细的界面，在这个详细界面可以点赞+收藏+评论。其出界面展示如下图4-5所示。
图4-5编程资讯界面图
当访客点击了任意课程后将会进入该课程的详情界面，可以了解到该课程的课程名称、课程类型、课程编号、任课教师、上课时间、上课地点、价格、课程名额、剩余名额等，同时可以对该课程进行购买+点赞+收藏，课程详情展示页面如图4-6所示。
图4-6 课程详情界面图
课程关键代码如下所示。
@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-9所示。
少儿编程网站中的管理人员是可以对前台注册的用户进行管理的，也可以对管理员进行管控。界面如下图4-8所示。
图4-8系统用户界面图
用户管理关键代码如下所示。
* 用户组：用于用户前端身份和鉴权(UserGroup)表实体类
*
* @author xxx
*@since 202X-XX-XX
*/
@TableName("user_group")
@Data
@EqualsAndHashCode(callSuper = false)
public class UserGroup implements Serializable {
private static final long serialVersionUID = 968356951391304707L;
/**
* 用户组ID：[0,8388607]
*/
@TableId(value = "group_id", type = IdType.AUTO)
private Integer groupId;
/**
* 显示顺序：[0,1000]
*/
@TableField(value = "display")
private Integer display;
/**
* 名称：[0,16]
*/
@TableField(value = "name")
private String name;
/**
* 描述：[0,255]描述该用户组的特点或权限范围
*/
@TableField(value = "description")
private String description;
/**
* 来源表：
*/
@TableField(value = "source_table")
private String sourceTable;
/**
* 来源字段：
*/
@TableField(value = "source_field")
private String sourceField;
/**
* 注册位置:
*/
@TableField(value = "register")
private String register;
/**
* 创建时间:
*/
@TableField(value = "create_time")
private Timestamp createTime;
/**
* 更新时间:
*/
@TableField(value = "update_time")
private Timestamp updateTime;
} /**
* 所在用户组：[0,32767]决定用户身份和权限
*/
@TableField(value = "user_group")
private String userGroup;
/**
* 用户组：用于用户前端身份和鉴权(UserGroup)表控制层
*
*/
@RestController
@RequestMapping("user_group")
public class UserGroupController extends BaseController<UserGroup, UserGroupService> {
/**
* 服务对象
*/
@Autowired
public UserGroupController(UserGroupService service) {
setService(service);
}
}
4.2.3 编程资讯管理界面
点击“编程资讯”按钮会显示自己添加的校园编程资讯，如果想要添加新的编程资源，点击“添加”按钮根据提示输入编程资讯，点击“提交”后在编程资讯界面就可以显示了，如果信息有错可以对编程资讯进行更新维护，也可以直接删除某一编程资讯，还可以管理评论信息，界面如下图4-9所示。
图4-9编程资讯管理界面图
点击“编程资源”按钮会显示自己添加的编程资源，如果想要添加新的编程资源，点击“添加”按钮根据提示输入编程资源，点击“提交”后在编程资源界面就可以显示了，如果信息有错可以对编程资源进行更新维护，也可以直接删除某一编程资源，还可以管理评论信息，界面如下图4-10所示。
图4-10编程资源管理界面图
@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);
}
4.2.5 课程信息管理界面
点击“课程信息”按钮会显示自己添加的课程信息，如果想要添加新的课程信息，点击“添加”按钮根据提示输入课程信息，点击“提交”后在课程信息界面就可以显示了，如果信息有错可以对课程信息进行更新维护，也可以直接删除某一课程信息，还可以管理评论信息，界面如下图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);
}
管理员点击“课程购买”会显示出所有的测评，支持通过课程购买状态或者输入提交用户或者用户姓名或者提交时间对测评进行查询，如果想要添加新的测评，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条课程购买，点击“删除”进行删除。还可以管理用户提交支付信息，界面如下图4-12所示。
图4-13课程购买管理界面图
系统开发到了最后一个阶段那就是系统测试，系统测试对软件的开发其实是非常有必要的。因为没什么系统一经开发出来就可能会尽善尽美，再厉害的系统开发工程师也会在系统开发的时候出现纰漏，系统测试能够较好的改正一些bug，为后期系统的维护性提供很好的支持。通过系统测试，开发人员也可以建立自己对系统的信心，为后期的系统版本的跟新提供支持。
系统测试包括：用户登录功能测试、课程展示功能测试、课程添加、课程搜索、密码修改功能测试，如表5-1、5-2、5-3、5-4、5-5所示：
表5-1 用户登录功能测试表
| 用例名称 | 用户登录系统 |
| 目的 | 测试用户通过正确的用户名和密码可否登录功能 |
| 前提 | 未登录的情况下 |
| 测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
| 预期结果 | 用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入 |
| 实际结果 | 实际结果与预期结果一致 |
课程查看功能测试：
表5-2 课程查看功能测试表
| 用例名称 | 课程查看 |
| 目的 | 测试课程查看功能 |
| 前提 | 用户登录 |
| 测试流程 | 点击课程列表 |
| 预期结果 | 可以查看到所有课程信息 |
| 实际结果 | 实际结果与预期结果一致 |
管理员添加课程界面测试：
表5-3 管理员添加课程界面测试表
| 用例名称 | 课程发布测试用例 |
| 目的 | 测试课程发布功能 |
| 前提 | 普通用户正常登录情况下 |
| 测试流程 | 1）员工点击课程信息管理就，然后点击添加后并填写信息。 2）点击进行提交。 |
| 预期结果 | 提交以后，页面首页会显示新的课程信息 |
| 实际结果 | 实际结果与预期结果一致 |
课程搜索功能测试：
表5-4课程搜索功能测试表
| 用例名称 | 课程搜索测试 |
| 目的 | 测试课程搜索功能 |
| 前提 | 无 |
| 测试流程 | 1）在搜索框填入搜索关键字。 2）点击搜索按钮。 |
| 预期结果 | 页面显示包含有搜索关键字的课程 |
| 实际结果 | 实际结果与预期结果一致 |
密码修改功能测试：
表5-5 密码修改功能测试表
| 用例名称 | 密码修改测试用例 |
| 目的 | 测试管理员密码修改功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员密码修改并完成填写。 2）点击进行提交。 |
| 预期结果 | 使用新的密码可以登录 |
| 实际结果 | 实际结果与预期结果一致 |
通过编写少儿编程网站的测试用例，已经检测完毕用户登录模块、课程查看模块、课程添加模块、课程搜索模块、密码修改功能测试，通过这5大模块为少儿编程网站的后期推广运营提供了强力的技术支撑。
">