基于 Java SpringMVC、Ajax、JQueryMySQL、Redis开发的在线学习平台

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
简介: 基于 Java SpringMVC、Ajax、JQueryMySQL、Redis开发的在线学习平台

1.1主要功能模块


完整项目代码:https://download.csdn.net/download/pythonyanyan/87391901



42ec4434c26aa3ebfc003f7fbce10788.png

1.2主要技术


  • 服务器端

SpringMVC、SpringIOC、Spring AOP、MyBatis、SpringBoot、SpringCloud、pageHelper

  • 客户端

Ajax、JQuery、layer、bootstrap、手风琴特效等

  • 数据存储

MySQL、Redis

  • 界面

动态:JSP、thymeleaf技术

静态:html技术


1.3系统架构

d1f6ba6f6b6c349aafd5697af8e41978.png

2.OVLS数据库(MySQL)

2.1MySQL安装


参考安装文档。

2.2MySQL使用


bef51e2078f539b7eb7a0833ec844bcb.png


  1. 库操作

库里面用于存储表,索引,视图,过程。如果想对表操作,必须先use库。

  • show databases; //查看所有库名
  • use 库名 //使用某个库
  • drop database 库名 //删除某个库
  • create database 库名 default charset utf8; //创建一个库
  • show create database 库名; //显示创建库的sql语句


  1. 表操作


  • show tables; //查看当前库中有哪些表
  • desc 表名; //查看表结构
  • create table 表名(...) //创建表
  • drop table 表名; //删除表
  • alter table xxx ...; //修改表结构


注意:与Oracle不同的是字段类型、自动递增、表引擎。


  • 字段类型,oracle使用NUMBER、VARCHAR2、CHAR、DATE、CLOB、BLOB、TIMESTAMP; mysql使用int、long、double、float、varchar、char、date、clob、blob、timestamp、text等
  • 自动递增


create table dept( deptno int primary key auto_increment, dname varchar(20), loc varchar(20) ) engine=innodb default charset=utf8;

  • 表引擎


MyISAM、InnoDB等类型。 一般默认为MyISAM,建议建表时指定为InnoDB类型。InnoDB支持事务、表行级锁功能。


  1. 记录操作
  • insert(与Oracle相同)
insert into dept(dname,loc) values ('aa','bb'),('cc','dd');
  • update(与Oracle相同)
  • delete(与Oracle相同)
  • select(与Oracle相同)
1. select * from dept limit 抓取起点,最大抓取数量;
2. select * from dept limit 10,5;


  1. 函数和关键字

mysql和oracle都有各自的数值函数、字符函数、日期函数等。

select sysdate from dept;

select now() from dept;

2.3数据库导入


    create database studyonline;
    use studyonline;
    set names utf8;
    source D:\\studyonline.sql

2.4数据库结构




ba1d086a3210939e97d981d053f9835e.png


2.5 在线学习Web工程搭建


  1. 创建maven project,在pom.xml中追加定义


<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.4.7.RELEASE</version></parent><dependencies><!-- web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- jsp --><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId></dependency></dependencies>
  1. 添加application.properties,追加定义
1.     server.port=9001
2.     spring.mvc.view.prefix=/study/
3.     spring.mvc.view.suffix=.jsp


  1. 添加启动类
@SpringBootApplicationpublicclassStudyBootApplication{publicstaticvoidmain(String[]args){SpringApplication.run(StudyBootApplication.class,args);}}
  1. 在src/main下创建webapp目录,将study界面复制进去。
  2. 映射html请求,显示jsp页面
@ControllerpublicclassExamController{@RequestMapping("/exam/home.html")publicStringtoHome(){return"home";}}


2.6在线考试Web工程搭建


  1. 创建maven project,在pom.xml添加定义
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.4.7.RELEASE</version></parent><dependencies><!-- web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- thymeleaf --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- 取消严格thymeleaf模板校验 --><dependency><groupId>net.sourceforge.nekohtml</groupId><artifactId>nekohtml</artifactId></dependency></dependencies>
  1. 在application.properties添加参数定义
1.     server.port=9002
2.     #nekohtml
3.     spring.thymeleaf.mode=LEGACYHTML5


  1. 编写主启动类


@SpringBootApplicationpublicclassExamBootApplication{publicstaticvoidmain(String[]args){SpringApplication.run(ExamBootApplication.class,args);}}


将html模板文件放入src\main\resources\templates目录中

  • 创建templates目录,将html放入
  • 创建static或public,将resources文件静态资源放入


  1. 映射html请求,显示thymeleaf模板页面
@ControllerpublicclassExamController{@RequestMapping("/exam/home.html")publicStringtoHome(){return"home";}}


2.7用户服务模块


2.7.1功能接口设计


  1. 注册
  • 表操作:对USER表进行插入。
  • 请求地址:/user/regist POST
  • 请求参数:用户名、密码
  • 响应结果:{"status":1,"msg":"注册成功"}
  • 详细设计:

/user/regist-->UserController.regist-->UserService.addUser-->UserMapper-->返回JSON结果


  1. 登录
  • 表操作:对USER表进行查询。
  • 请求地址:/user/login POST
  • 请求参数:用户名、密码
  • 响应结果:{"status":1,"msg":"登录成功"}
  • 详细设计:

/user/login-->UserController.login-->UserService.checkUser-->UserMapper-->返回JSON结果

  1. 查看个人信息

对USER表进行查询。

  1. 修改个人信息


对USER表进行更新。

  1. 修改密码

对USER表进行更新。


2.7.2密码加密

密码使用MD5(密码+salt随机盐)算法处理。

2.7.3Ajax跨域解决

有两种解决方案,一个是jsonp,另一个是CORS


JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。这里不考虑JSONP。 HTML5带来了一个新的跨域解决方案CORS,CORS是一个W3C标准,全称是”跨域资源共享”(Cross-Origin Resource Sharing)


定义一个Filter,对CORS参数设置

@WebFilter(servletNames={"dispatcherServlet"})publicclassAjaxDomainFilterimplementsFilter{publicvoidinit(FilterConfigfilterConfig)throwsServletException{// TODO Auto-generated method stub
}publicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{HttpServletResponsehttpResponse=(HttpServletResponse)response;httpResponse.setHeader("Access-Control-Allow-Origin","*");httpResponse.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE");chain.doFilter(request,response);}publicvoiddestroy(){// TODO Auto-generated method stub
}}

注意:在启动类前添加@ServletComponentScan注解标记。

2.7.4热启动

每次修改代码后,可以自动启动boot。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency>

2.7.5MySQL添加乱码

在指定mysql连接字符串时指定编码

spring.datasource.url=jdbc:mysql://localhost:3306/studyonline?useUnicode=true&characterEncoding=utf8


2.8登录


435e38ae4d7e32c81e673e248c423e8b.png


3登录涉及技术


  1. 密码MD5+盐加密技术
  2. SSO单点登录技术
  3. 采用token令牌机制
  4. 采用服务器端redis存储和客户端h5本地存储
  5. 采用UUID算法


4.课程服务工程搭建


  1. 创建maven project,在pom.xml添加引入
  <dependencies><dependency><groupId>cn.xdl</groupId><artifactId>ovls_common_service</artifactId><version>0.0.1-SNAPSHOT</version></dependency>
  </dependencies>
  1. 添加application.properties文件
  #datasource
  spring.datasource.username=root
  spring.datasource.password=1234
  spring.datasource.url=jdbc:mysql://localhost:3306/studyonline?useUnicode=true&characterEncoding=utf8
  spring.datasource.driverClassName=com.mysql.jdbc.Driver


  1. 添加主启动类定义
  @SpringBootApplication
  @MapperScan(basePackages={"cn.xdl.ovls.course.dao"})
  @ServletComponentScan
  publicclassCourseBootApplication{publicstaticvoidmain(String[]args){SpringApplication.run(CourseBootApplication.class,args);}
  }
  1. 添加entity和Mapper映射器

5.设计和实现免费好课推荐功能


/course/free-->DispatcherServlet-->CourseController-->CourseService-->CourseMapper-->返回JSON结果


{"status":1,"msg":"查询成功","data":课程集合}


查询免费好课,条件是免费、好课(评价)、前5个

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
5天前
|
Linux 网络安全 Docker
尼恩一键开发环境: vagrant+java+springcloud+redis+zookeeper镜像下载(&制作详解)
尼恩提供了一系列文章,旨在帮助开发者轻松搭建一键开发环境,涵盖Java分布式、高并发场景下的多种技术组件安装与配置。内容包括但不限于Windows和CentOS虚拟机的安装与排坑指南、MySQL、Kafka、Redis、Zookeeper等关键组件在Linux环境下的部署教程,并附带详细的视频指导。此外,还特别介绍了Vagrant这一虚拟环境部署工具,
尼恩一键开发环境: vagrant+java+springcloud+redis+zookeeper镜像下载(&制作详解)
|
14天前
|
消息中间件 存储 NoSQL
java连接redis和基础操作命令
通过以上内容,您可以掌握在Java中连接Redis以及进行基础操作的基本方法,进而在实际项目中灵活应用。
79 30
|
2天前
|
JavaScript 安全 Java
智慧产科一体化管理平台源码,基于Java,Vue,ElementUI技术开发,二开快捷
智慧产科一体化管理平台覆盖从备孕到产后42天的全流程管理,构建科室协同、医患沟通及智能设备互联平台。通过移动端扫码建卡、自助报道、智能采集数据等手段优化就诊流程,提升孕妇就诊体验,并实现高危孕产妇五色管理和孕妇学校三位一体化管理,全面提升妇幼健康宣教质量。
28 12
|
25天前
|
前端开发 Java 程序员
菜鸟之路day02-04拼图小游戏开发一一JAVA基础综合项目
本项目基于黑马程序员教程,涵盖面向对象进阶、继承、多态等知识,历时约24小时完成。项目去除了登录和注册模块,专注于单机游戏体验。使用Git进行版本管理,代码托管于Gitee。项目包含窗体搭建、事件监听、图片加载与打乱、交互逻辑实现、菜单功能及美化界面等内容。通过此项目,巩固了Java基础并提升了实际开发能力。 仓库地址:[https://gitee.com/zhang-tenglan/puzzlegame.git](https://gitee.com/zhang-tenglan/puzzlegame.git)
42 6
|
29天前
|
Java 应用服务中间件 API
【潜意识Java】javaee中的SpringBoot在Java 开发中的应用与详细分析
本文介绍了 Spring Boot 的核心概念和使用场景,并通过一个实战项目演示了如何构建一个简单的 RESTful API。
38 5
|
29天前
|
前端开发 Java 数据库连接
【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性
深度解读JavaWeb开发在Java学习中的重要性
29 4
|
29天前
|
SQL Java API
|
9月前
|
设计模式 前端开发 JavaScript
Spring MVC(一)【什么是Spring MVC】
Spring MVC(一)【什么是Spring MVC】
|
8月前
|
设计模式 前端开发 Java
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
155 1
|
9月前
|
前端开发 Java 关系型数据库
基于ssm框架旅游网旅游社交平台前后台管理系统(spring+springmvc+mybatis+maven+tomcat+html)
基于ssm框架旅游网旅游社交平台前后台管理系统(spring+springmvc+mybatis+maven+tomcat+html)
117 0