小型教育网站的开发与建设-系统设计(四)

标签: 毕业论文

一、本科计算机专业毕业设计论文写作指南系列文章

 

本科计算机专业毕业设计论文写作指南

小型教育网站的开发与建设-开篇(一)

小型教育网站的开发与建设-前言与需求分析(二)

小型教育网站的开发与建设-总体设计(三)

小型教育网站的开发与建设-系统设计(四)

小型教育网站的开发与建设-尾篇(五)

 


第四章 系统设计


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平板端界面


二、总结

以上是本人论文小型教育网站的开发与建设-系统设计(四)的主要内容,觉得不错的话,欢迎关注java基础笔记微信公众号,,获取论文其他部分详细内容,项目代码,毕业论文答辩ppt等。

版权声明:本文为jiankang66原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jiankang66/article/details/109706554

智能推荐

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

猜你喜欢

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...

深入理解 JavaScript 代码执行机制

深入理解 JavaScript 代码执行机制 前言 本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。 1、餐前甜品 如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。 2、磨刀不误砍柴工(了解浏览器原理) (1) 进程和线程 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小...

Centos7下配置DRBD Cluster扩展节点

操作环境 CentOS Linux release 7.4.1708 (Core) DRBDADM_BUILDTAG=GIT-hash:\ ee126652638328b55dc6bff47d07d6161ab768db\ build\ by\ [email protected]\,\ 2018-07-30\ 22:23:07 DRBDADM_API_VERSION=2 DRBD_KERNEL_VER...