小型教育网站的开发与建设-系统设计（四）
小型教育网站的开发与建设-系统设计（四）
一、本科计算机专业毕业设计论文写作指南系列文章
第四章 系统设计
4.1数据库设计
4.1.1 用户相关表
(1)Userinfo表，存储用户的个人详细信息，如头像，邮箱，身份证号等
(2)User表，存储用户名，密码，手机号
(3)Role表，存储角色信息，如角色为管理员，教员，学生。
(4)Permission是一个权限表，存储所有的权限，比如发布课程权限，审核课程权限，上传课程权限等。
(5)U_r表为用户与角色之间建立联系的表，想要修改某个用户的角色通过这个表修改。
(6)R_p为角色和权限中间表，我们可以通过此表对某个角色的权限进行增加，删除，修改，查询。
(7)Permission_group权限组，该表将权限分类，比如分为用户管理组，课程管理组等。
图 4-1用户相关表结构
4.1.2 课程相关表
(1)course表主要记录课程名，描述，类别，难度等信息。
(2)Course_chapter表，主要保存课程的章节信息，比如第一章名字等
(3)Course_content表，主要保存每一小节的具体内容，比如课节视频地址，视频创建时间，课节名等。
(4)Coursestatus为课程状态，会代表课程从创建到发布的流程，有五步骤，待提交->待审核->审核未通过->可发布->已发布
(5)Course_different 为课程的难度，如简单，中等，困难等。
(6)Categorycourse为课程类别，如英语类，计算机类，可以通过数据库进行添加，在创建课程时会进行选择。
图 4-2课程相关表结构
4.1.3 消息管理表
(1)此表主要保存不同角色之间的交流信息，比如教员创建课程，提交管理员审核时，会给管理员发消息，此时sendid为教员id，receiveid为管理员id，还有发送时间，发送内容等，发送后，管理员会收到。
图 4-3消息管理表结构
4.1.4 学生选课表
(1)该表主要建立课程与学员之间的联系，保存教员所学习课程信息
图 4-4学生选课表结构
4.1.5 角色申请表
(1)该表为学生申请成为教员的表，当学员想成为教员，该表会增加一条记录，报错申请时间，审核状态，描述等信息。
图 4-5角色申请表结构
4.2后台设计
后台使用java语言进行开发，因为它具有平台无关性的特点，能够在不同的平台上运行，同时具有安全性，不用像C++那样使用指针对存储器地址直接操作,java程序运行时,他需要的内存由操作系统直接分配,这样可以防止通过指针影响系统的安全。它也具有面向对象的特点，java借鉴了C++面向对象的一些特点，通过把数据封装到类中，程序代码只需要进行编译一次，就可以多次使用，减少了开销。万物皆对象，对象皆可复用，这真的是一大亮点了。比如为了表示平台中的用户。新建了一个类。
代码如下：
public class User implements Serializable {
private int uid;
private String phone;
private String upwd;
private List<Role> roles;
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getUpwd() {
return upwd;
}
public void setUpwd(String upwd) {
this.upwd = upwd;
}
public List<Role> getRoles() {
return roles;
}
public void setRoles(List<Role> roles) {
this.roles = roles;
}
}
平台选择使用spring boot框架，这个框架能够进行快速开发spring应用，并且它为java开发提供了一系列的解决方案，spring boot封装了许多api，能够对事务处理进行处理，主要有异常时事务回滚，异常返回错误页面，操作成功时将数据提交到数据库等自己开发难度特别大的功能。由于它可以做面向切面的编程，使我们可以在不同的应用中将各个切面结合起来使用，节省了代码量，提高了代码的复用。
Spring boot框架具有许多的特点。内嵌了tomcat容器，不需要运行时单独安装容器了，简化了maven配置，当需要一些依赖时，我们之间引入就可以了，比如在项目中，我用到了文件上传下载需要的commons-fileupload和commons-io这两个jar包，只需要这样引入就可以了。
如下：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
</dependency>
可以基于注解进行配置，在项目中用到了这些注解，@Controller 用于标记在一个类头上，表示该类是一个Controller对象，@RequestMapping是一个处理请求的注解，用在类或者方法上，参数可以为get请求，post请求等等，也有一个路径参数，表示响应时访问的路径必须包含该参数值，@Autowired注解大部分在类的参数上标注，运行时自动引入该Bean，不需要进行new对象操作了，@RequestParam用于将请求参数映射到Controller层的方法参数上，加上@ResponseBody注解的话，返回的内容将不经过视图解析器，直接返回其他格式的数据，@RestController与@Controller类似，直接在类上添加，主要为了避免重复的写@RequestMapping与@ResponseBody。它主要用来返回JSON，XML或其它类型的内容，使用@Service注解表示为业务层组件。下面是平台中使用的一个比较简单的controller类。
代码如下：
@Controller
@RequestMapping("/notVerify")
public class NotVerifyCtrl {
Logger logger = LoggerFactory.getLogger(NotVerifyCtrl.class);
@Autowired
UserService userService;
@RequestMapping("/updatePwd")
public ModelAndView saveregister(String phone, String password) {
ModelAndView m = new ModelAndView();
int i = userService.updateUser(phone, new Sha384Hash(String.valueOf(password)).toBase64());
//拿到新增的uid
m.addObject("i", i);
m.setViewName("forgetPwd");
return m;
}
}
持久层框架最终决定使用myBatis，通过使用该持久层框架，可以实现所有sql语句与业务代码分开到不同的文件里，将sql语句存放于xml配置文件中，将业务代码放到类class文件中，这样便于维护管理，同时可以实现用逻辑标签控制动态sql的拼接，同时，只要保证Service实现类中的名称与xml中sql的名称相同，就可以自动完成映射，这样的架构开发就变得更加灵活了。
下面的示例为教员根据条件查询课程，从中可以看出，全部都是xml中写的sql，与代码分离了，使用了if，where，select进行拼接sql，querySelectCourse1为唯一标识，同一个xml文件中，只有一个sql的id为它，resultType表示查询出来每一行返回值类型，为Course对象，在bean里面创建了。
示例如下：
<select id="querySelectCourse1" resultType="Course">
select c.*,differentname,categoryname,cs.statusname from
course c,coursestatus cs,course_different cd,categorycourse cg
<where>
<if test="coursename1!=null and coursename1!=''">
and c.coursename1 like '%${coursename1}%'
</if>
<if test="categoryid!=0">
and c.categoryid=#{categoryid}
</if>
<if test="differentid!=0">
and c.differentid=#{differentid}
</if>
<if test="coursestatusid!=0">
and c.coursestatusid =#{coursestatusid}
</if>
<if test="endtime11!= null and endtime1!=''">
and c.createtime <![CDATA[ <=]]> #{endtime1}
</if>
<if test="starttime11 != null and starttime11!=''">
and c.createtime >= #{starttime1}
</if>
and c.differentid=cd.differentid
and c.coursestatusid=cs.coursestatusid
and c.categoryid=cg.categoryid
</where>
ORDER BY createtime DESC
limit #{page},#{limit}
</select>
Thymeleaf 是个模板，具体说是一个前端模板引擎，它可以在Html页面使用 ，主要目标是提供一种方式来创建模板。在有网络和无网络的环境下都可以运行，然后可以在 html 标签里通过增加其他相关的属性来表示。浏览器对html解析时会对没有定义过的属性不进行改动，可以带着标签静态显示；当有数据传到页面，模板标签会动态地替代为传过来的内容，动态改变页面信息。对于从数据库中查出来的数据，大部分以map，list的形式传到前端，例如查看课程详情时，传到前端为List<Map<String, List<CourseContent>>> 类型，删除消息，返回前端为int类型，查看登录用户的个人信息，把userInfo对象传给前端。当我们想看课程名和创建教员名，可以这样在html页面里面开发，在页面显示后台传的课程名和创建教员名。
示例：
<span class="info-box-number"><h3 th:text="'课程名：'+${course.coursename1}"></h3></span>
<span class="info-box-number"><h4 th:text="'创建时间：'+${course.createtime}"></h4></span>
为了实现这一效果，我们第一步在html文件头引入模板：<html xmlns: th=" www.thymeleaf.org ">，然后需要引入依赖，像thymeleaf的这些依赖都是从https://mvnrepository.com/网站查出来，复制到pom文件，就会自动下载依赖了。后面需要使用展示，基本都是对html的基本标签前面加th：符号，这样就表示该页面使用thymeleaf模板了，如 th:text 表示以文本显示，th:each表示以集合进行数据的遍历。
4.3前端设计
这个平台使用html，CSS，JavaScript,CSS进行开发前端页面，html作为一种超文本标记语言，它有很多的标签，能够通过这些标签把信息在网络上展示，CSS是层叠样式表，不仅可以修饰静态的网页，还可以通过一些脚本语言对页面进行动态修饰，它可以改变html标签对象的宽度，高度，浮动，文字大小，字体，背景等，以达到我们的要求。JavaScript是一种用来写脚本的语言，是通过对象和事件驱动的，使用JavaScript可以简单的完成与HTML的交互操作，并且可以完成丰富的页面交互效果，可以通过在html文件底部嵌入使用，或者引入外面的脚本文件在HTML页面中实现。比如当点击·保存操作时会弹出一个确认框，这个带着确认和取消按钮的弹出小页就是JavaScript来完成的，还有可视化的上传文件导航条就是JavaScript做出来的，每个页面基本都离不开JavaScript和CSS，这样可以提高客户的体验。每个页面上部分为页面字符类型，媒体类型，thymeleaf模板标准也在页面顶端引入，下面是使用外部的CSS样式，中间为页面布局，div等标签组成，下面主要是引入的JavaScript和自定义的一些JavaScript脚本。
部分项目代码示例：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>洛师公开课</title>
<link rel=" stylesheet "
<link rel=" stylesheet "
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper">
<header class="main-header">
<div th:include="common/head :: head"></div>
</header>
<aside class="main-sidebar">
<section class="sidebar">
<div th:include="common/left :: left"></div>
</section>
</aside>
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row">
<!-- /.col -->
<div class="col-md-12">
<div class="box box-widget widget-user">
<div class="widget-user-header bg-black">
<h3 class="widget-user-username" th:text="${session.userinfo.nickname}">Elizabeth
Pierce</h3>
<h5 class="widget-user-desc" th:text="${session.rolename}">Web Designer</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
</div>
</div>
</div>
</section>
</div>
<footer class="main-footer">
<div th:include="common/footer :: footer">1111</div>
</footer>
<div class="control-sidebar-bg"></div>
</div>
<script th:src="@{/bower_components/11111/jquery/dist/jquery.min.js}" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.sidebar-menu li:not(.treesview) > a').on('click', function () {
console.log(this.href);
var $parent = $(this).parent().addClass('active1');
$parent.siblings('.treesview.active').find('> a').trigger('click1');
$parent.siblings().removeClass('active1').find('li').removeClass('active1');
});
$('.sidebar-menu a').each(function () {
if (this.href === window.location.href) {
$(this).parent().addClass('active1')
.closest('.treesview-menu').addClass('.menu-open')
.closest('.treesview').addClass('active1');
}
});
});
</script>
</body>
</html>
在项目中经常能碰到列表页，比如查看所有课程时展示课程的列表，审核用户时显示的列表，查看消息时使用的列表，都是使用了layui框架,它提供了丰富的内置模块，均可以通过模块化的方式按需下载，在项目中主要用到了布局，栅格系统，表单，列表等等。
首页列表示例:
图 4-6首页列表界面
同时，前端页面使用Bootstrap框架完成响应式布局设计，就是一个页面就能够对多个终端完美展示，即支持手机端，平板端，电脑端优雅的界面显示，不会出现页面布局不协调的情况，这种实现不是为每一个终端做一个适配的页面，而是一个页面布局能够满足不同的终端设备，都能展示更加优雅的界面，从而提供更好的用户体验。
电脑端的界面如下：
图 4-7电脑端的界面
手机端界面如下：
图 4-8手机端界面
平板端界面如下：
图 4-9平板端界面
二、项目地址
百度网盘链接：https://pan.baidu.com/s/1ckJRli1zETZBOMW4Mvbu4Q
提取码：3dgi
三、总结
以上是本人论文小型教育网站的开发与建设-系统设计（四）的主要内容，觉得不错的话