计算机课程教学辅助系统小程序的详细设计与实现主要是根据前面的计算机课程教学辅助系统小程序的需求分析和计算机课程教学辅助系统小程序的总体设计来设计页面并实现业务逻辑。主要从计算机课程教学辅助系统小程序界面实现、业务逻辑实现这两部分进行介绍。
4.1用户功能模块
4.1.1 前台首页界面
当进入计算机课程教学辅助系统小程序的时候，首先映入眼帘的是系统的导航栏，下面是轮播图以及系统内容，其主界面展示如下图4-1所示。
图4-1?前台首页界面图
4.1.2 登录界面
计算机课程教学辅助系统小程序中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到计算机课程教学辅助系统小程序的首页中；否则将会提示相应错误信息，登录界面如下图4-2所示。
图4-2?前台登录界面图
登录系统主要代码如下。
????@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.1.3 注册界面
计算机课程教学辅助系统小程序的学生和教师可以进行注册登录，当用户左上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号，选择身份，然后填写身份信息后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可注册成功。其用注册界面展示如下图4-3所示。
图4-3注册界面图
注册逻辑代码如下：
????@PostMapping("register")
????public Map<String, Object> signUp(@RequestBody User user) {
????????// 查询用户
????????Map<String, String> query = new HashMap<>();
????????query.put("username",user.getUsername());
????????List list = service.select(query, new HashMap<>()).getResultList();
????????if (list.size()>0){
????????????return error(30000, "用户已存在");
????????}
????????user.setUserId(null);
????????user.setPassword(service.encryption(user.getPassword()));
????????service.save(user);
????????return success(1);
}
????@Id
????@GeneratedValue(strategy = GenerationType.IDENTITY)
????@Column(name = "user_id")
????private Integer userId;
????
????@Basic
????@Column(name = "state")
????private Integer state;
????
????@Basic
????@Column(name = "user_group")
????private String userGroup;
????
????@Basic
????@Column(name = "login_time")
????private Timestamp loginTime;
????
????@Basic
????@Column(name = "phone")
????private String phone;
????
????@Basic
????@Column(name = "phone_state")
????private Integer phoneState;
????
????@Basic
????@Column(name = "username")
????private String username;
????
????@Basic
????@Column(name = "nickname")
????private String nickname;
????
????@Basic
????@Column(name = "password")
????private String password;
????
????@Basic
????@Column(name = "email")
????private String email;
????
????@Basic
????@Column(name = "email_state")
????private Integer emailState;
????
????@Basic
????@Column(name = "avatar")
????private String avatar;
????
????@Basic
????@Column(name = "create_time")
????@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
????private Timestamp createTime;
????@Basic
????@Transient
????private String code;
}
4.1.4课程信息详情界面
用户可以查看课程信息，在查询到自己想要了解的课程的时候，可以进入查看详细的介绍，点击“签到”这一按钮以后会跳转到签到信息填写的界面，根据提示填写好签到的信息，点击“学习”这一按钮以后会跳转到学习信息填写的界面，根据提示填写好学习的信息，点击“提交”以后签到就完成了，在课程信息详情这个界面，同时支持用户对喜欢的课程信息进行收藏、点赞、评论的功能，课程信息详情展示页面如图4-4所示。
图4-4课程信息详情界面图
4.1.5评论界面
用户点击某个课程信息进入课程详细页，点击评论按钮进入评论页，提交评论信息，成功发布评论，管理员管理用户的评论信息。评论界面如下图4-5所示。
???????????????????
图4-5评论界面图
4.1.6课程签到界面
点击导航栏上的“课程签到”，可以选择课程名称、课程编号、课程标签、任课教师、学生学号、学生姓名、签到时间、签到情况，然后点击“提交”按钮进行提交课程签到，课程签到界面如下图4-6所示。? ? ? ? ? ? ? ? ? ? ? ??
图4-6课程签到界面图
4.1.7课程资讯界面
当访客点击计算机课程教学辅助系统小程序中导航栏上的“课程资讯”后将会进入到该“课程资讯”列表的界面，然后选择想要看的课程资讯信息，点击进入到详细界面，在详细界面可以收藏+赞+评论等操作，课程资讯界面如下图4-7所示。
????????????????????????
图4-7?课程资讯界面图
4.1.8密码修改界面
用户使用该计算机课程教学辅助系统小程序注册完成后，用户对登录密码有修改需求时，系统也可以提供用户修改密码权限。系统中所有的操作者能够变更自己的密码信息，执行该功能首先必须要登入系统，然后选择密码变更选项以后在给定的文本框中填写初始密码和新密码来完成修改密码的操作。在填写的时候，假如两次密码填写存在差异，那么此次密码变更操作失败，下面的图片展示的就是该板块对应的工作面。密码修改界面如下图4-8所示。
图4-8?密码修改界面图
4.2管理员功能模块
4.2.1 网站管理界面
网站管理模块是对公告和轮播图的设置，只有管理员权限才能进行更新维护。界面如下图4-9所示。
图4-9?网站管理界面图
网站管理逻辑代码如下所示。
@RequestMapping(value = "/del")
????@Transactional
????public Map<String, Object> del(HttpServletRequest request) {
????????service.delete(service.readQuery(request), service.readConfig(request));
????????return success(1);
}
????@Transactional
????public void delete(Map<String,String> query,Map<String,String> config){
????????StringBuffer sql = new StringBuffer("DELETE FROM ").append("`").append(table).append("`").append(" ");
????????sql.append(toWhereSql(query, "0".equals(config.get(FindConfig.GROUP_BY))));
????????log.info("[{}] - 删除操作：{}",table,sql);
????????Query query1 = runCountSql(sql.toString());
????????query1.executeUpdate();
????}
4.2.2?内容管理界面
计算机课程教学辅助系统小程序中的管理人员在“内容管理”这一菜单中是可以对计算机课程教学辅助系统小程序内的课程测试、课程资讯以及资讯分类进行维护和管理的，界面如下图4-10所示。
图4-10内容管理界面图
4.2.3 人员管理界面
计算机课程教学辅助系统小程序中的管理员在“人员管理”这一菜单是中可以对学生用户、教师用户以及管理员人员进行管控。界面如下图4-11所示。
图4-11人员管理界面图
人员管理关键代码如下所示。
?@PostMapping("/add")
????@Transactional
????public Map<String, Object> add(HttpServletRequest request) throws IOException {
????????service.insert(service.readBody(request.getReader()));
????????return success(1);
????}
????@Transactional
????public Map<String, Object> addMap(Map<String,Object> map){
????????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){
????????StringBuffer sql = new StringBuffer("INSERT INTO ");
????????sql.append("`").append(table).append("`").append(" (");
????????for (Map.Entry<String,Object> entry:body.entrySet()){
????????????sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
????????}
????????sql.deleteCharAt(sql.length()-1);
????????sql.append(") VALUES (");
????????for (Map.Entry<String,Object> entry:body.entrySet()){
????????????Object value = entry.getValue();
????????????if (value instanceof String){
????????????????sql.append("'").append(entry.getValue()).append("'").append(",");
????????????}else {
????????????????sql.append(entry.getValue()).append(",");
????????????}
????????}
????????sql.deleteCharAt(sql.length() - 1);
????????sql.append(")");
????????log.info("[{}] - 插入操作：{}",table,sql);
????????Query query = runCountSql(sql.toString());
????????query.executeUpdate();
????}
4.2.4模块管理界面
计算机课程教学辅助系统小程序中的管理人员在“模块管理”这一菜单中是可以对计算机课程教学辅助系统小程序内的课程标签、课程信息、课程签到、学习情况进行维护和管理的，界面如下图4-12所示。
图4-12模块管理界面图
模块管理逻辑代码如下所示。
@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);
}
????public Map<String,String> readConfig(HttpServletRequest request){
????????Map<String,String> map = new HashMap<>();
????????map.put(FindConfig.PAGE,request.getParameter(FindConfig.PAGE));
????????map.put(FindConfig.SIZE,request.getParameter(FindConfig.SIZE));
????????map.put(FindConfig.LIKE,request.getParameter(FindConfig.LIKE));
????????map.put(FindConfig.ORDER_BY,request.getParameter(FindConfig.ORDER_BY));
????????map.put(FindConfig.FIELD,request.getParameter(FindConfig.FIELD));
????????map.put(FindConfig.GROUP_BY,request.getParameter(FindConfig.GROUP_BY));
????????map.put(FindConfig.MAX_,request.getParameter(FindConfig.MAX_));
????????map.put(FindConfig.MIN_,request.getParameter(FindConfig.MIN_));
????????return map;
}
????public Map<String,String> readQuery(HttpServletRequest request){
????????String queryString = request.getQueryString();
????????if (queryString != null && !"".equals(queryString)) {
????????????String[] querys = queryString.split("&");
????????????Map<String, String> map = new HashMap<>();
????????????for (String query : querys) {
????????????????String[] q = query.split("=");
????????????????map.put(q[0], q[1]);
????????????}
????????????map.remove(FindConfig.PAGE);
????????????map.remove(FindConfig.SIZE);
????????????map.remove(FindConfig.LIKE);
????????????map.remove(FindConfig.ORDER_BY);
????????????map.remove(FindConfig.FIELD);
????????????map.remove(FindConfig.GROUP_BY);
????????????map.remove(FindConfig.MAX_);
????????????map.remove(FindConfig.MIN_);
????????????return map;
????????}else {
????????????return new HashMap<>();
????????}
}
????@Transactional
????public void update(Map<String,String> query,Map<String,String> config,Map<String,Object> body){
????????StringBuffer sql = new StringBuffer("UPDATE ").append("`").append(table).append("`").append(" SET ");
????????for (Map.Entry<String,Object> entry:body.entrySet()){
????????????Object value = entry.getValue();
????????????if (value instanceof String){
????????????????sql.append("`"+humpToLine(entry.getKey())+"`").append("=").append("'").append(value).append("'").append(",");
????????????}else {
????????????????sql.append("`"+humpToLine(entry.getKey())+"`").append("=").append(value).append(",");
????????????}
????????}
????????sql.deleteCharAt(sql.length()-1);
????????sql.append(toWhereSql(query,"0".equals(config.get(FindConfig.LIKE))));
????????log.info("[{}] - 更新操作：{}",table,sql);
????????Query query1 = runCountSql(sql.toString());
????????query1.executeUpdate();
}
????public String toWhereSql(Map<String,String> query, Boolean like) {
????????if (query.size() > 0) {
????????????try {
????????????????StringBuilder sql = new StringBuilder(" WHERe ");
????????????????for (Map.Entry<String, String> entry : query.entrySet()) {
????????????????????if (entry.getKey().contains(FindConfig.MIN_)) {
????????????????????????String min = humpToLine(entry.getKey()).replace("_min", "");
????????????????????????sql.append("`"+min+"`").append(" >= '").append(URLDecoder.decode(entry.getValue(), "UTF-8")).append("' and ");
????????????????????????continue;
????????????????????}
????????????????????if (entry.getKey().contains(FindConfig.MAX_)) {
????????????????????????String max = humpToLine(entry.getKey()).replace("_max", "");
????????????????????????sql.append("`"+max+"`").append(" <= '").append(URLDecoder.decode(entry.getValue(), "UTF-8")).append("' and ");
????????????????????????continue;
????????????????????}
????????????????????if (like == true) {
????????????????????????sql.append("`"+humpToLine(entry.getKey())+"`").append(" LIKE '%").append(URLDecoder.decode(entry.getValue(), "UTF-8")).append("%'").append(" and ");
????????????????????} else {
????????????????????????sql.append("`"+humpToLine(entry.getKey())+"`").append(" = '").append(URLDecoder.decode(entry.getValue(), "UTF-8")).append("'").append(" and ");
????????????????????}
????????????????}
????????????????sql.delete(sql.length() - 4, sql.length());
????????????????sql.append(" ");
????????????????return sql.toString();
????????????} catch (UnsupportedEncodingException e) {
????????????????log.info("拼接sql 失败：{}", e.getMessage());
????????????}
????????}
????????return "";
????}
5.1系统测试的目的
系统的前台、后台、数据库完成以后，这个系统才算是完成了一半，我们在这之后要对系统进行最后的一个阶段，那就是测试了，测试对一个系统来说是非常重要的，有的时候开发完一个系统，如果测试不合格的话，这个系统是没有办法进行投入使用的，所有我们要用测试对系统的功能进行检验，把不完善的功能尽量完善，把出现的bug解决掉，然后给用户呈现出一个完美的系统。通过对系统最后一步的测试，使得开发人员对自己的系统更加有信心，更加积极的为后期的系统版本的更新提供支持。
5.2?系统测试用例
系统测试包括：用户登录功能测试、课程信息展示功能测试、课程信息添加、课程信息搜索、密码修改功能测试，如表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.3?系统测试结果
通过编写计算机课程教学辅助系统小程序的测试用例，已经检测完毕用户登录模块、课程信息查看模块、课程信息添加模块、课程信息模块、密码修改功能测试，通过这5大模块为计算机课程教学辅助系统小程序的后期推广运营提供了强力的技术支撑。