基于SSM框架的小型英语学习网站设计与实现

一、需求分析

英语已经越来越凸显其重要性。大学生一般都需要考CET-4或者CET-6,对于程序员,如果没有扎实的英语基础,看有些API文档也比较费力。生活中处处存在英语,也越来越体现英语的重要性,如何高效学习英语成了关键的讨论问题。本站意在收集有关英语的经典视频和文档,包括TED、VOA和NEWS,使得用户可以方便快捷得获得学习英语的多个通道。

二、总体设计

技术栈

  • 前端:HTML、CSS、JavaScript、jQuery、BootStrap。

  • 后端:JSP、Spring、SpringMVC、MyBatis。

总体功能导图。

在这里插入图片描述

三、数据库设计

在这里插入图片描述
在这里插入图片描述

结构说明:数据库设计了三个表,user表中存储用户相关信息,tlike中存储用户收藏的信息,ted中存储了有关ted视频的相关数据。Tlike表中的uid是user表中的外键,同理tid是ted表的外键,uid和ted共同构成了tlike表的主键。nlike与vlike设计模式与上类似,不在重复设计。

相关代码:

CREATE TABLE user(
    uid INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(50) NOT NULL,
    email CHAR(30) NOT NULL,
    status CHAR(1),
    uuid VARCHAR(50) UNIQUE,
    CONSTRAINT user_ck_status CHECK (status = 'Y' or status = 'N')
)
CREATE TABLE tlike(
    uid INT NOT NULL,
    tid INT NOT NULL,
    date DATE NOT NULL,
    PRIMARY KEY (uid, tid)
);
CREATE TABLE ted(
    tid INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(300),
    discription VARCHAR(500),
    mp4ShdUrl VARCHAR(100)
);

ALTER TABLE tlike ADD CONSTRAINT FK_user_tlike FOREIGN KEY ( uid ) REFERENCES USER ( uid ) ON DELETE RESTRICT ON UPDATE RESTRICT;
ALTER TABLE tlike ADD CONSTRAINT FK_ted_tlike FOREIGN KEY ( tid ) REFERENCES ted ( tid ) ON DELETE RESTRICT ON UPDATE RESTRICT;

INSERT INTO ted (title, discription, mp4ShdUrl) VALUES 
('【TED】下一场全球农业革命', '传统肉类生产对我们的环境造成了危害,也给全人类的健康带来风险。但是人们并不会减少食用肉类,除非我们能够提供一些价格相当(或更便宜)、且口味一致(或更好)的替代品。在这场令人眼界大开的演讲中,食物改革家和TED成员布鲁斯·弗里德里克展示了植物肉和细胞肉产品,它们会很快促进全球肉类产业转型——也会改变你的晚餐。', 'http://mov.bn.netease.com/open-movie/nos/mp4/2019/12/02/SEUF3S7GU_shd.mp4'),
('【TED】恶意伪造技术是如何破坏真相的?', 'Deepfake,是一种为了恶意的目的,像是引发暴力或诽谤政客和记者,来伪造视频或音频的技术。它的使用在逐渐变成一种真实的威胁。随着这方面的工具变的更加便捷,做出来的产品更加真实,它们将如何塑造我们对世界的看法?在这个演讲中,法律教授 Danielle Citron展示了Deepfakes技术如何放大了我们的不信任感,并且提出了一些保护真相的方法。', 'http://mov.bn.netease.com/open-movie/nos/mp4/2019/12/03/SEUI6M74B_shd.mp4'),
('【TED】垂直农场:节约资金、资源的新型农业模式','到 2050 年,全球人口预计将达到 98 亿。我们怎么养活所有人?由投资银行从业者转行农业工作者的 Stuart Oda 提到了室内垂直农场:在一个可控的、不受气候影响的环境中,在分层的架子上种植食物。在一次前沿性的演讲中,他解释了这种方法如何能保持更好的安全标准,节约资金,节约用水,为我们的子孙后代造福。', 'http://mov.bn.netease.com/open-movie/nos/mp4/2020/03/29/SF807Q11K_shd.mp4'),
('【TED】当还在童年的我们受到了创伤,很有可能会影响我们一生的健康', '儿童时期的创伤并不是你在成长过程中得到的。儿科医生Nadine Burke Harris解释说,虐待,忽视和父母在心理健康或药物滥用问题上挣扎的反复压力对大脑的发育产生了真实而切实的影响。这种情况在一生中展开,直到那些经历过高水平创伤的患者患心脏病和肺癌的风险增加了三倍。恳求儿科医学对抗创伤的预防和治疗,正面。', 'http://mov.bn.netease.com/open-movie/nos/mp4/2015/01/19/SAFDAP8DJ_shd.mp4'),
('【TED】所谓断舍离', '我们原以为买来会带来快乐的东西,却给我们的心挖了更深的洞。', 'http://mov.bn.netease.com/open-movie/nos/mp4/2016/03/28/SBIAEU9P4_shd.mp4')

四、详细设计

目录结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

结构详细说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LeLxC5nt-1654655516197)(https://www.writebug.com/myres/static/uploads/2022/6/7/1aa197fc8eddd2412bfd04c66f87498d.writebug)]

Web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
           version="4.0">

    <display-name>Archetype Created Web Application</display-name>

    <!--log4j配置文件地址 -->
    <context-param>
        <param-name>log4jConfiguration</param-name>
        <param-value>classpath:log4j2.xml</param-value>
    </context-param>
    <!-- Log4j的监听器要放在spring监听器前面 -->
    <listener>
        <listener-class>org.apache.logging.log4j.web.Log4jServletContextListener</listener-class>
    </listener>
    <filter>
        <filter-name>log4jServletFilter</filter-name>
        <filter-class>org.apache.logging.log4j.web.Log4jServletFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>log4jServletFilter</filter-name>
        <url-pattern>/*</url-pattern>
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>FORWARD</dispatcher>
        <dispatcher>INCLUDE</dispatcher>
        <dispatcher>ERROR</dispatcher>
    </filter-mapping>

    <!--配置Spring的监听器,默认只加载WEB-INF目录下的applicationContext.xml-->
    <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!--所以为了统一管理配置文件,这里需要设置配置文件的路径,这样不在WEB-INF目录下的applicationContext.xml也可以访问到-->
    <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
    </context-param>

    <!--配置前端控制器-->
    <servlet>
      <servlet-name>springMVC</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <!--加载springMVC.xml配置文件-->
      <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:springMVC.xml</param-value>
      </init-param>
      <!--设置启动级别,启动服务器就创建该servlet-->
      <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
      <servlet-name>springMVC</servlet-name>
      <!--过滤所有文件-->
      <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--解决中文乱码问题,过滤-->
    <filter>
      <filter-name>encoding</filter-name>
      <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      <init-param>
        <param-name>encoding</param-name>
        <param-value>utf-8</param-value>
      </init-param>
    </filter>
    <filter-mapping>
      <filter-name>encoding</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

  </web-app>

所需要的依赖

单元测试:junit

Mysql驱动:mysql-connector-java

数据库连接池:c3p0

Servlet处理:servlet-api

Jsp处理:jsp-api

标签库:jstl

数据库框架:mybatis、整合:mybatis-spring

Spring相关:springMVC,springJDBC、

偷懒插件:lombok

邮件api:javax.mail-api、javax.mail

日志:log4j

Bean封装工具:beanutils

使用的JSON格式化类库:jackson

前端设计部分设计详细

整体设计:基于BootStrap的组件设计,各部分右上角有汉堡导航条方便去各个页面。

Index.html:响应式布局,懒加载。

Login.html: 淡入淡出效果

Register.html: 淡入淡出,控制BOM以实现背景图片左右移动的效果,监听鼠标,浮动在logo上即可播放音乐,单击logo暂停播放,并且浮现注册页面。

Control.jsp、updateInfo.jsp: 用户管理和更新页,BootStrap组件设计页面。

五、测试运行

主页

注册页

个人中心

修改信息

其他

六、其他细节

激活相关

数据爬取
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/newlw/article/details/125179808