webCMS课程列表详情展示。视频播放

ruoyi-cms/src/main/java/com/ruoyi/cms/controller/CmsController.java

@@ -2,7 +2,14 @@ package com.ruoyi.cms.controller;
 
 import com.ruoyi.common.config.Global;
 import com.ruoyi.common.utils.file.FileUtils;
+import com.ruoyi.exam.domain.ExamPractice;
+import com.ruoyi.exam.service.IExamPracticeService;
+import com.ruoyi.system.service.ISysUserService;
+import com.ruoyi.train.course.domain.TrainCourse;
+import com.ruoyi.train.course.domain.TrainCourseSection;
 import com.ruoyi.train.course.domain.TrainCourseVO;
+import com.ruoyi.train.course.service.ITrainCourseCategoryService;
+import com.ruoyi.train.course.service.ITrainCourseSectionService;
 import com.ruoyi.train.course.service.ITrainCourseService;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -10,6 +17,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 import javax.servlet.http.HttpServletRequest;
@@ -20,21 +28,32 @@ import java.util.List;
 
 /**
  * 通用请求处理
- * 
+ *
  * @author ruoyi
  */
 @Controller
 @RequestMapping("/web")
-public class CmsController
+public class CmsController {
-{
+    private static final Logger log = LoggerFactory.getLogger( CmsController.class );
-    private static final Logger log = LoggerFactory.getLogger(CmsController.class);
 
     private String prefix = "web";
     @Autowired
     private ITrainCourseService trainCourseService;
+
+    @Autowired
+    private ITrainCourseCategoryService trainCourseCategoryService;
+
+    @Autowired
+    private ITrainCourseSectionService trainCourseSectionService;
+
+    @Autowired
+    private ISysUserService sysUserService;
+    @Autowired
+    private IExamPracticeService examPracticeService;
+
     @RequestMapping("")
     @GetMapping()
-    public String user(TrainCourseVO trainCourse,ModelMap map) {
+    public String user(TrainCourseVO trainCourse, ModelMap map) {
         List<TrainCourseVO> list = trainCourseService.selectTrainCoursePage( trainCourse );
         map.put( "trainCourse", list );
         return prefix + "/index";
@@ -55,4 +74,33 @@ public class CmsController
     }
 
 
+    @RequestMapping("/course/courseInfo.html/{id}")
+    @GetMapping()
+    public String courseInfo(@PathVariable("id") Integer id, ModelMap map) {
+        TrainCourse trainCourse = trainCourseService.selectById( id );
+        TrainCourseSection trainCourseSection = new TrainCourseSection();
+        trainCourseSection.setTrainCourseId( id );
+        List<TrainCourseSection> trainCourseSections = trainCourseSectionService.selectTrainCourseSectionList( trainCourseSection );
+        ExamPractice examPractice = new ExamPractice();
+        examPractice.setTrainCourseId( id );
+        List<ExamPractice> examPractices = examPracticeService.selectExamPracticeList( examPractice );
+        map.put( "trainCourse", trainCourse );
+        map.put( "trainCourseSections", trainCourseSections );
+        map.put( "examPractices", examPractices );
+        return prefix + "/course/courseInfo";
+    }
+    @RequestMapping("/course/courseSections.html/{id}")
+    @GetMapping()
+    public String courseSections(@PathVariable("id") Integer id, ModelMap map) {
+        TrainCourseSection tcs= trainCourseSectionService.selectById( id );
+        TrainCourseSection trainCourseSection = new TrainCourseSection();
+        trainCourseSection.setTrainCourseId( tcs.getTrainCourseId() );
+        List<TrainCourseSection> trainCourseSections = trainCourseSectionService.selectTrainCourseSectionList( trainCourseSection );
+        ExamPractice examPractice = new ExamPractice();
+        examPractice.setTrainCourseId( id );
+        map.put( "trainCourseSection", tcs );
+        map.put( "trainCourseSections", trainCourseSections );
+        return prefix + "/course/courseSections";
+    }
+
 }

ruoyi-cms/src/main/resources/templates/web/course/courseInfo.html

@@ -0,0 +1,236 @@
+<!DOCTYPE HTML>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head th:include="web/index::cmsHeader">
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<style type="text/css">
+    body{
+        background-color: #ffffff;
+    }
+    .courseView {
+        background-size: auto auto;
+        padding: 50px 0;
+        background-size: 100% 100%;
+    }
+    .wWidth1200 .page-width {
+        margin: 0 auto;
+        width: 1200px;
+    }
+    .courseView .box {
+        background: #fff;
+        border: 1px solid #e6e6e6;
+        position: relative;
+    }
+    .bd-all {
+        border: 1px solid #eee;
+        border-radius: 3px;
+    }
+    .posnav {
+        padding: 0 30px;
+        font-size: 12px;
+        color: #999;
+        line-height: 45px;
+        height: 45px;
+    }
+    .courseInfo {
+        padding: 0px 30px 30px 560px;
+        position: relative;
+        min-height: 300px;
+    }
+    .courseInfo .image {
+        width: 500px;
+        height: 300px;
+        position: absolute;
+        left: 30px;
+        top: 0px;
+        overflow: hidden;
+    }
+    .courseInfo-right {
+        padding-top: 5px;
+        display: flex;
+        flex-direction: column;
+    }
+    .clear {
+        clear: both;
+        overflow: hidden;
+        height: 0;
+    }
+    .courseInfo .image img {
+        width: 100%;
+        min-height: 100%;
+    }
+    .courseInfo-right .name {
+        font-size: 24px;
+        line-height: 34px;
+        color: #222;
+    }
+    .courseInfo-right .price {
+        height: 44px;
+        line-height: 44px;
+    }
+
+    .courseInfo-right .price span {
+        float: left;
+        position: relative;
+    }
+    .courseInfo-right .price-info {
+        font-size: 24px;
+        color: #e91c35;
+    }
+
+
+    .courseInfo-right .button {
+        height: 44px;
+        line-height: 44px;
+        overflow: hidden;
+        margin-top: 10px;
+    }
+    .courseInfo-right .hb-ui-btn, .courseInfo-right .hb-ui-btn1 {
+        height: 44px;
+        line-height: 44px;
+        font-size: 16px;
+        background: #f59121;
+        width: 150px;
+        text-align: center;
+        color: #fff;
+        border: 0px;
+        -webkit-transition: 0.3s;
+        transition: 0.3s;
+        float: left;
+        cursor: pointer;
+        border-radius: 3px;
+    }
+    .courseInfo-right .button em {
+         margin-left: 20px;
+         color: #b1b1b1;
+     }
+    .courseInfo-right .remark{
+        font-family: Arial,hiragino sans gb,microsoft yahei,simsun,sans-serif !important;
+        font-size: 14px;
+        color: #888;
+        height: 88px;
+        line-height: 44px;
+        overflow: hidden;
+        margin-top: 10px;
+    }
+
+    em {
+        font-style: normal;
+    }
+    .nav_content {
+        background: #f5f5f5;
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .nav_content .page-width {
+        margin: 0 auto;
+        width: 100%;
+    }
+    .courseTab {
+        height: 59px;
+        overflow: hidden;
+    }
+    .clearfix {
+        display: block;
+    }
+    .courseTab li.active {
+        border-bottom: 3px solid #0288d1;
+        color: #0288d1;
+    }
+    .courseTab li {
+        float: left;
+        margin: 0px 60px 0 0;
+        text-align: center;
+        height: 56px;
+        line-height: 56px;
+        font-size: 16px;
+        cursor: pointer;
+        color: #555;
+    }
+    li {
+        list-style-type: none;
+    }
+</style>
+<div class="fly-header layui-bg-black" th:replace="web/index:: top">
+</div>
+
+<div class="layui-container">
+    <div class="courseView">
+        <div class="page-width">
+            <form id="form1" action="https://xcx.kesion.com/cshoppingcart.html" method="post">
+                <div class="box bd-all">
+                    <div class="posnav">
+                        您现在位置：<a href="/vod/zyzg">职业资格</a><em>&gt;</em> <a href="/vod/e0ITPX">IT培训</a><em>&gt;</em> 浏览课程
+                    </div>
+
+                    <div class="courseInfo">
+                        <div class="image" id="courseImage">
+                            <div id="view_flv" style="display:none;"></div>
+                            <div class="course-pro0"></div>
+                            <img th:src="${trainCourse.cover}" class="course-cover" onerror="this.src='/sysimg/nopic.gif'" width="480" height="290">
+                        </div>
+                        <div class="courseInfo-right">
+                            <div class="name" th:text="${trainCourse.name}">
+                                安全测试基础课程
+                            </div>
+                            <div class="price">
+                                <span class="price-info"><span th:text="'¥'+${trainCourse.price}"></span></span>
+                            </div>
+                            <div class="button">
+                                <input type="submit" onclick="return Logincart('551')" class="hb-ui-btn" value="立刻购买">
+                                <em>有效期:<span id="shixian">永久</span></em>
+                            </div>
+                            <div class="remark" th:text="${trainCourse.description}">
+
+                            </div>
+                        </div>
+                        <div class="clear"></div>
+                    </div>
+                </div>
+
+            </form>
+        </div>
+    </div>
+    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+        <ul  class="layui-tab-title">
+            <li class="layui-this">课程目录</li>
+            <li>学员评价(<span id="commentNum">1</span>)</li>
+            <li>相关题库</li>
+        </ul>
+        <div class="layui-tab-content">
+            <div class="layui-tab-item layui-show">
+                <ul >
+                    <li th:each="sections:${trainCourseSections}" >
+                        <a th:href="@{'/web/course/courseSections.html/'+${sections.id}}">
+                        <span th:text="${sections.name}"> </span>
+                        </a>
+                        <hr>
+                    </li>
+                </ul>
+            </div>
+            <div class="layui-tab-item">2</div>
+            <div class="layui-tab-item">
+                <ul >
+                    <li th:each="practice,obj:${examPractices}" >
+                        <span th:text="${obj.index+1}+'.'+${practice.name}"> </span>
+                        <hr>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="fly-footer" th:replace="web/index::cmsBottom">
+</div>
+<script type="text/javascript">
+    layui.use('element', function(){
+        var element = layui.element;
+
+    });
+</script>
+</body>
+</html>

ruoyi-cms/src/main/resources/templates/web/course/courseSections.html

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head th:include="web/index::cmsHeader">
+</head>
+<body>
+<div class="fly-header layui-bg-black" th:replace="web/index:: top">
+</div>
+
+<style type="text/css">
+    .video-box {
+        background-color: #000000;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .container-fluid {
+        width: 100%;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+        height: 450px;
+    }
+    .play-list{
+        padding: 0;
+        background-color: #202026;
+        height: 430px;
+        overflow-y: auto;
+        line-height: 40px;
+    }
+    .play-list .section{
+        display: flex;
+        flex-direction: row;
+    }
+    .play-list .section-index{
+        font-size: 2rem;
+        text-align: center;
+        width: 50px;
+        color: #d0d0d6;
+        margin-top: 15px;
+    }
+    .play-list .section-info{
+        margin-top: 5px;
+        color: #d0d0d6;
+    }
+    .play-list .section-time{
+        font-size: 10px;
+        line-height: 12px;
+        color: #909096;
+        margin-bottom: 10px;
+    }
+    a:hover .section-index, a:hover .section-info-name{
+        color: #2692ff;
+    }
+</style>
+<div class="container-fluid video-box layui-container">
+    <div class="layui-row">
+        <div class="layui-col-md2">1
+        </div>
+        <div class="layui-col-md6">2
+            <video th:src="${trainCourseSection.courseware}" width="95%" height="400px" controls="controls">
+            </video>
+        </div>
+        <div class="layui-col-md2">
+            <div class="play-list">
+                <ul>
+                    <a  th:each="section,obj:${trainCourseSections}" th:href="@{'/web/course/courseSections.html/'+${section.id}}">
+                        <li class="section">
+                            <div class="section-index" th:text="${obj.index+1}"></div>
+                            <div class="section-info">
+                                <div class="section-info-name" th:text="${section.name}"></div>
+                                <div class="section-time" th:text="'创建于：'+*{#dates.format(section.createTime,'yyyy-MM-dd HH:mm:ss')}"></div>
+                            </div>
+                            <hr>
+                        </li>
+                    </a>
+                </ul>
+            </div>
+        </div>
+        <div class="layui-col-md2">4
+        </div>
+    </div>
+</div>
+
+
+
+<div class="fly-footer" th:replace="web/index::cmsBottom">
+</div>
+</body>
+</html>

ruoyi-cms/src/main/resources/templates/web/index.html

@@ -3,28 +3,132 @@
 <head th:fragment="cmsHeader">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title></title>
+  <title>骏聪信息科技培训考试系统</title>
   <meta name="keywords" content="">
   <meta name="description" content="">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="stylesheet" th:href="@{/web/res/layui/css/layui.css}">
   <link rel="stylesheet" th:href="@{/web/res/css/global.css}">
-  <style type="text/css">
+  <script th:src="@{/web/res/layui/layui.js}"></script>
-
-    .course{
-      height: 300px;
-      border: 1px solid #8a8a8a;
-      background-color: #ffffff;
-    }
-
-  </style>
 </head>
 <body>
+<style type="text/css">
 
+  .course{
+    height: 370px;
+    border: 1px solid #8a8a8a;
+    background-color: #ffffff;
+  }
+  .title{
+    margin-top: 20px;
+  }
+  .title span{
+    font-size: 28px;
+    font-weight: normal;
+    float: left;
+    margin-left: 10px;
+    line-height: 50px;
+  }
+  .title em{
+    display: block;
+    width: 70px;
+    height: 24px;
+    border-bottom: 2px #666 solid;
+    float: left;
+  }
+  .title i{
+    float: left;
+    font-size: 20px;
+    color: #999;
+    margin-left: 10px;
+    line-height: 50px;
+  }
+  .in01{
+    background: rgba(0,0,0,0.6);
+    width: 100%;
+    line-height: 30px;
+    height: 30px;
+    padding: 0px 10px;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .in01 span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 18px;
+    color: #fff;
+  }
+  .remark{
+    width: 80%;
+    margin: 5% 10%;
+    line-height: 25px;
+    font-size: 14px;
+    color: #777;
+    text-align: left;
+  }
+  .remark .title{
+    height: 50px;
+    line-height: 25px;
+    overflow: hidden;
+    margin: 10px 0;
+  }
+  .remark .price{
+    font-size: 18px;
+    line-height: 30px;
+    color: #e91c35;
+    height: 30px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .remark .free_price{
+    font-size: 18px;
+    line-height: 30px;
+    color: #3ab57f;
+    height: 30px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .remark .boxbtn01{
+    margin: 0px 20px 20px;
+  }
+  .remark .clearfix{
+    display: block;
+  }
+  .remark .boxbtn01 .btn01{
+    float: left;
+    color: #999;
+    width: 46%;
+    border: 1px solid #ddd;
+  }
+  .remark .boxbtn01 .btn02{
+    float: right;
+    background: #0288d1;
+    color: #fff;
+    width: 46%;
+    border: 1px solid #0288d1;
+  }
+  .remark .boxbtn01 a{
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    color: #666;
+    font-size: 14px;
+    box-sizing: border-box;
+    border-radius: 30px;
+    overflow: hidden;
+  }
+
+</style>
 <div class="fly-header layui-bg-black" th:fragment="top">
   <div class="layui-container">
     <a class="fly-logo" th:href="@{/web}">
-      <img th:src="@{juncong.png}" alt="骏聪" width="100px" height="50px">
+      <img th:src="@{juncong.png}" alt="骏聪" width="100px" height="45px">
     </a>
     <ul class="layui-nav fly-nav layui-hide-xs">
       <li class="layui-nav-item layui-this">
@@ -53,15 +157,38 @@
     </ul>
   </div>
 </div>
-
 <div class="layui-container">
+  <div class="title">
+    <em></em>
+    <span>所有课程</span>
+    <i>All Course</i>
+  </div>
   <div class="layui-row layui-col-space15">
       <div class="layui-col-md3" th:each="course:${trainCourse}">
         <div class="course">
           <div class="courseImg">
-            <img th:src="${course.cover}" th:alt="${course.name}" width="100%" height="230px">
+            <a th:href="@{'/web/course/courseInfo.html/'+${course.id}}">
+            <img th:if="${#strings.isEmpty(course.cover)}" th:src="@{/web/res/images/no_img.png}" th:alt="${course.name}" width="100%" height="180px">
+            <img th:if="${not #strings.isEmpty(course.cover)}" th:src="${course.cover}" th:alt="${course.name}" width="100%" height="180px">
+            <p class="in01">
+              <span class="f20 c77b" th:text="${course.name}">安全测试基础课程</span>
+              <span class="cfff"></span>
+            </p>
+            </a>
+          </div>
+          <div class="remark">
+            <div class="title" th:text="${course.description}">
+            </div>
+            <div class="price" th:if="${course.price>0}" th:text="'￥'+${course.price}">
+            </div>
+
+            <div class="free_price" th:if="${course.price==0}" th:text="'免费'">
+            </div>
+            <div class="boxbtn01 clearfix">
+              <a class="btn01"  th:href="@{'/web/course/courseInfo.html/'+${course.id}}">了解更多</a>
+              <a class="btn02"  th:href="@{/web/course/coursePay.html}">立即购买</a>
+            </div>
           </div>
-          <span th:text="${course.name}"></span>
         </div>
       </div>
   </div>
@@ -71,25 +198,6 @@
   <p><a href="http://fly.layui.com/" target="_blank">骏聪信息科技</a></p>
 </div>
 
-<script src="../res/layui/layui.js"></script>
-<script>
-layui.cache.page = '';
-layui.cache.user = {
-  username: '游客'
-  ,uid: -1
-  ,avatar: '../res/images/avatar/00.jpg'
-  ,experience: 83
-  ,sex: '男'
-};
-layui.config({
-  version: "3.0.0"
-  ,base: '../res/mods/' //这里实际使用时，建议改成绝对路径
-}).extend({
-  fly: 'index'
-}).use('fly');
-</script>
-
-<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>
 
 </body>
 </html>

ruoyi-cms/src/main/resources/templates/web/user/reg.html

@@ -58,13 +58,8 @@
 
 </div>
 
-<div class="fly-footer">
+
-  <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/" target="_blank">layui.com 出品</a></p>
+<div class="fly-footer" th:replace="web/index::cmsBottom">
-  <p>
-    <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
-    <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
-    <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
-  </p>
 </div>
 
 <script src="../../res/layui/layui.js"></script>

ruoyi-exam/src/main/resources/mapper/exam/ExamPracticeMapper.xml

@@ -49,7 +49,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="id != null "> and id = #{id}</if>
              <if test="deptId != null "> and dept_id = #{deptId}</if>
              <if test="name != null  and name != '' "> and name = #{name}</if>
-            <if test="trainCourseId != null "> and exam_examination.train_course_id = #{ination.trainCourseId}</if>
+            <if test="trainCourseId != null "> and exam_practice.train_course_id = #{trainCourseId}</if>
             <if test="enableControlTime != null  and enableControlTime != '' "> and enable_control_time = #{enableControlTime}</if>
              <if test="startTime != null "> and start_time = #{startTime}</if>
              <if test="endTime != null "> and end_time = #{endTime}</if>
@@ -73,7 +73,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             or exam_practice.enable_control_time = '0')  ]]>
             <if test="id != null "> and exam_practice.id = #{id}</if>
             <if test="deptId != null "> and exam_practice.dept_id = #{deptId}</if>
-            <if test="trainCourseId != null "> and exam_examination.train_course_id = #{ination.trainCourseId}</if>
+            <if test="trainCourseId != null "> and exam_practice.train_course_id = #{trainCourseId}</if>
             <if test="name != null  and name != '' "> and exam_practice.name = #{name}</if>
             <if test="enableControlTime != null  and enableControlTime != '' "> and exam_practice.enable_control_time = #{enableControlTime}</if>
             <if test="startTime != null "> and exam_practice.start_time = #{startTime}</if>

ruoyi-train/src/main/java/com/ruoyi/train/course/domain/TrainCourseSection.java

@@ -1,4 +1,5 @@
 package com.ruoyi.train.course.domain;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import org.apache.commons.lang3.builder.ToStringBuilder;
 import org.apache.commons.lang3.builder.ToStringStyle;
 import com.ruoyi.common.base.BaseEntity;
@@ -31,10 +32,12 @@ public class TrainCourseSection
     /** 创建者 */
     private String createBy;
     /** 创建时间 */
+    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
     private Date createTime;
     /** 更新者 */
     private String updateBy;
     /** 更新时间 */
+    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
     private Date updateTime;
     /** 备注 */
     private String remark;