后台管理系统项目总结(3)

发表于 | 分类于

后台管理系统项目总结(3)

1.课程管理之添加功能

  • 1.修改aside.html中课程添加的链接
1
2
3
4
5
 <li>
      <a href="/course/create">
         课程添加
      </a>
</li>
  • 2.将course/course_add.html更名为create.html
  • 3.修改add.html中的文件引入
1
2
3
4
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>
  • 4.在js文件夹下新建一个course文件夹，并新建create.js模块
  • 5.当单击按钮的时候，要把添加的课程内容提交到服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
define(['jquery','form'],function ($){
     // alert(123);
  //将当前添加的课程名称内容，提交给服务器的数据库
  $('#btnCreate').on('click',function (){
    $('form').ajaxSubmit({
      url:'/api/course/create',
      type:'post',
      success:function (info){
        if(info.code==200){
          alert('提交成功');
          location.href='/course/basic?cs_id='+info.result.cs_id;
        }
      }//success
    })//ajaxSubmit
    return false; //阻止默认的刷新 行为
  })//on
})

2.课程管理之显示课程基本信息

  • 1.将course文件夹中的course_step1.html更名为basic.html
  • 2.修改此文件下面的文件引入
1
2
3
4
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>
  • 3.在js/course文件下创建basic.js模块
  • 4.根据地址栏中的cs_id到服务器获取数据，并渲染模板,还要添加富文本编辑器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
define(['utils','jquery','template','ckeditor','form'],function (obj,$,template,CKEDITOR,form){
   //要根据传过来的id，获取当前的所有的信息，渲染到当前页面上来
    var id = obj.queryString().cs_id;
    $.ajax({
      url:'/api/course/basic',
      type:'get',
      data:{
        cs_id:id
      },
      success:function (info){
          if(info.code==200){
            var htmlStr = template('cs_basic_tpl',info.result);
            $('.steps').html(htmlStr);
            //添加富文本编辑器
            CKEDITOR.replace('cs_brief');
          }
      }
    });//ajax
  • 5.页面中的模板信息如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<script type="text/template" id="cs_basic_tpl">
        <div class="brief">
            <div class="thumb">
                <img src="{{cs_cover}}" alt="">
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
            </dl>
        </div>
        <!-- 步聚 -->
        <ul class="forwards list-unstyled">
            <li>
                <a href="/course/basic" class="active">
                    <b>1</b>
                    基本信息
                </a>
            </li>
            <li>
                <a href="/course/pic">
                    <b>2</b>
                    课程图片
                </a>
            </li>
            <li>
                <a href="./course_add_step3.html">
                    <b>3</b>
                    课时管理
                </a>
            </li>
        </ul>
        <!-- 基本信息 -->
        <div class="content">
            <!-- 标题 -->
            <div class="title">
                <h5>基本信息 <small>BASIC INFORMATION</small></h5>
            </div>
            <form action="" class="basic form-horizontal">
                <input type="hidden" name="cs_id" value="{{cs_id}}">
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">标题</label>
                    <div class="col-md-8">
                        <input type="text" name="cs_name" class="form-control input-sm" value="{{cs_name}}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">课程描述</label>
                    <div class="col-md-8 ckeditor">
                        <textarea name="cs_brief" id="cs_brief"  rows="15" class="form-control input-sm">{{cs_brief}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">讲师</label>
                    <div class="col-md-8">
                        <select name="cs_tc_id"  class="form-control input-sm">
                            {{each teacher as v i}}
                            <option value="">{{v.tc_name}}</option>
                            {{/each}}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">分类</label>
                    <div class="col-md-8">
                        <select name="cs_cg_id" class="form-control input-sm">
                            <option value="">互联网</option>
                        </select>
                        <select name="" class="form-control input-sm">
                            <option value="">网页设计</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">标签</label>
                    <div class="col-md-8">
                        <input type="text" name="cs_tags" value="{{cs_tags}}" class="form-control input-sm">
                        <p class="help-block">将会应用于按标签搜索课程、相关课程的提取等</p>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10">
                        <button id="btnSave" class="btn btn-success btn-sm pull-right">保 存</button>
                    </div>
                </div>
            </form>
        </div>
    </script>
  • 6.在basic.html页面中调用定义好的模块
1
2
3
<script>
     require(['js/course/basic']);//调用模块
</script>
  • 7.页面信息填写完毕，单击按钮，向服务器提交数据，因此需要给保存按钮注册事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 // 给保存按钮注册事件
$('.steps').on('click','#btnSave',function (){
       // alert(123);
  $("#cs_brief").val(CKEDITOR.instances.cs_brief.getData());
  $('form').ajaxSubmit({
    url:'/api/course/update/basic',
    type:'post',
    success:function (info){
       if(info.code==200){
         alert('保存成功，即将跳转到图片中心...');
        location.href='/course/pic?cs_id='+info.result.cs_id;
       }
    }
  })
    return false; //阻止默认的刷新行为
})

3.提取复用性的代码，封装成工具模块

  • 1.在js文件夹下面新建一个utils(实用工具的意思)文件夹，并创建utils.js模块
  • 2.把复用性的代码，放在此模块当中，代码 如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//现在是进行了模块化的开发，因此现在的这个与业务不相关的功能，也要封闭成一个模块，这就是一个工具模块
//专门用来获取?后面的id
define(function (){
  var o = {
    queryString:function (){
      // 获取当前url中的tc_id
      var search = location.search;//  ?tc_id=14&name=zhangsan&age=20
      search = search.slice(1); //第一个参数是从哪里开始截取，第二个参数是截取到哪里，如果不写默认是截取到最后
      // console.log(search);
      var searchArr = search.split('&');  //searchArr是一个数组
      // console.log(searchArr);
      var obj = {};  //定义一个空对象 ，用来存储数据
      for(var i=0;i<searchArr.length;i++){
        var temp =  searchArr[i].split('='); //temp也是一个数组
        // console.log(temp);
        obj[temp[0]] = temp[1];
      }
      return obj; //要把对象返回值
    }
  }
    return o;
})

4.课程图片

1.将course_add_step2.html文件名修改为pic.html,并修改内部文件引用

1
2
3
4
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course文件夹里面，新建一个文件pic.js，定义模块，无论是单击课程图片，还是跳转过来，都要执行以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
define(['jquery','js/util','template','uploadify'],function ($,util,template,uploadify){
  var cs_id = util.queryString().cs_id;
    $.ajax({
      url:'/api/course/picture',
      type:'get',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           // alert('成功了...');
           // 把图片渲染一下
           var htmlStr = template('cs_pic_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });//ajax
   })

3.修改pic.html页面中的模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/template" id="cs_pic_tpl">
        <div class="brief">
            <div class="thumb">
                {{if cs_cover}}
                <img src="{{cs_cover}}" alt="">
                {{/if}}
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
                <dd>讲师：{{tc_name}}</dd>
            </dl>
        </div>
        <!-- 步聚 -->
        <ul class="forwards list-unstyled">
            <li>
                <a href="/course/basic?cs_id={{cs_id}}" class="done">
                    <b class="fa fa-check"></b>
                    基本信息
                </a>
            </li>
            <li>
                <a href="/course/pic?cs_id={{cs_id}}" class="active">
                    <b>2</b>
                    课程图片
                </a>
            </li>
            <li>
                <a href="/course/lesson?cs_id={{cs_id}}">
                    <b>3</b>
                    课时管理
                </a>
            </li>
        </ul>
        <!-- 课程图片 -->
        <div class="content">
            <!-- 标题 -->
            <div class="title">
                <h5>课程图片 <small>COURSE PICTURE</small></h5>
            </div>
            <!-- 上传图片 -->
            <div class="picture col-md-offset-2">
                <div class="preview">
                    {{if cs_cover_origin}}
                    <img src="{{cs_cover_origin}}" alt="">
                    {{else}}
                    <img src="/views/public/images/course.png" alt="">
                    {{/if}}
                </div>
                <p class="tips">
                    可上传jpg, gif, png格式文件, 图片建议尺寸大于300x150，文件大小不能超过2M。
                </p>
                <div class="col-md-2">
                    <button id="upload" class="btn btn-success btn-sm">选择图片</button>
                </div>
                <div class="col-md-2">
                    <button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>
                </div>
            </div>
        </div>
</script>

4.在pic.html页面中，调用定义好的模块

1
2
3
<script>
        require(['js/course/pic']);
</script>

5.图片上传插件的改造及使用

1.在pic.html文件中把选择图片按钮改造一下，改成button并添加id为upload

1
<button id="upload" class="btn btn-success btn-sm">选择图片</button>

2.在pic.js模块中，书写代码，当单击上传图片的按钮的时候，可以使用插件上传图片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//单击按钮的时候，图片是可以选择后被上传的，这是原图，并能够显示出来
           $("#upload").uploadify({
             swf:'/views/public/assets/uploadify/uploadify.swf',
             uploader:'/api/uploader/cover',
             width:85,
             height:'auto',
             buttonText:'请选择图片',
             formData:{cs_id:cs_id},
             fileObjName:'cs_cover_original',
             buttonClass:'btn btn-success btn-sm',
             itemTemplate:'<span></span>',
             onUploadSuccess:function(file, data, response){
               // console.log(data); 如果图片上传成功的话，要将图片显示出来
               $(".preview img").attr('src',JSON.parse(data).result.path);
               $('#cropBtn').prop('disabled',false);// selected  checked  disabled 这三个比较特殊，不能用attr，只能用prop
             }
           });

2.在pic.html页面中调用模块

1
require(['js/course/pic']);

6.在pic.html中修改图片的路径，给它一个默认的图片

1
<img src="/views/public/images/course.png" alt="">

7.在页面一开始跳转过来的时候，就要显示图片，因此需要发送ajax请求

1
2
3
4
5
6
7
8
9
10
$.ajax({
    url:'/api/course/picture',
    type:'get',
    data:{cs_id:cs_id},
    success:function (data){
      if(data.code==200){
        $('.preview img').attr('src',data.result.cs_cover_original);//将原图渲染出来
      }
    }
  });

6.图片裁切小demo

1.到jcrop.org网站下载插件，是基于jquery的一个插件

1
http://jcrop.org/download

2.小demo的使用，先引入css，jquery， 及jcrop.js文件

1
2
3
<link rel="stylesheet" href="css/Jcrop.css">
<script src="jquery-1.12.2.min.js"></script>
<script src="js/Jcrop.js"></script>

3.在页面中写js代码调用即可，参数为对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片裁切</title>
  <link rel="stylesheet" href="css/Jcrop.css">
  <script src="jquery-1.12.2.min.js"></script>
  <script src="js/Jcrop.js"></script>
   <style>
    .box {
      width: 240px;
      height: 120px;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 900px;
    }
  </style>
</head>
<body>
  <img src="pool.jpg" alt="" id="pic">
  <div class="box"></div>
</div>
</body>
<script>
  $("#pic").Jcrop();
</script>
</html>

4.常用参数介绍：

1
2
3
4
5
6
7
8
9
aspectRatio:2,               //宽高比例
  bgColor: 'hotpink',          //背景图片
  bgOpacity:0.3,               //背景透明度
  maxSize: [200,300],          //裁切范围区的最大值
  minSize:[100,80] ,           //裁切范围区的最小值
  canSelect:false,             //为false时无法更改，默认值是true
  canDelete:true,              //用键盘可以删除选区，但是好像不好用
  canDrag:false,               //能否拖拽选区，默认是true
  canResize:false              //可以调整大小，默认是true

5.如果在想在任意位置显示的话，得使用如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
  $("#pic").Jcrop({
    aspectRatio: 2,
    N: "#ccc",
    bgOpacity: 0.3,
    container: ".div"
    // maxSize: [100, 100],
  },function(){
    jcrop_api = this;
    thumbnail = this.initComponent('Thumbnailer', {
      width: 240,
      height: 120
    });
  });
  $("#box").on("cropmove cropend", function (e, s, c) {
    console.log(c.x, c.y, c.w, c.h);
  });
</script>

6.要想在任意位置显示的话，可以让生成的图片追加到对应的位置上

1
$('.jcrop-thumb').appendTo($('.box'));

7.图片裁切功能的使用

1.在public/assets文件夹下面，添加jquery-jcrop文件夹

2.在libs的config.js文件中，配置路径，并在下面设置依赖项，因为它不支持模块化

1
2
3
4
5
'jcrop':'assets/jquery-jcrop/js/jcrop'
'jcrop':{
      deps:['jquery']
    }

3.在pic.html页面中把裁切图片的a标签修改成按钮，并添加一个类名

1
<button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>

4.在pic.html页面中引入jcrop的css文件，以方便裁切

1
<link rel="stylesheet" href="/views/public/assets/jquery-jcrop/css/Jcrop.min.css">

5.在pic.js中单击按钮的时候，调用Jcrop()，并将按钮的状态修改为保存，并设置一个自定义属性来存储状态

1
2
3
4
5
6
7
8
9
$(".steps").on("click",'#cropBtn',function (){
    if($(this).attr('data-status')!='save'){
      $(this).attr('data-status','save').text('保  存');
      
     }else{
       
       //选择完了之后就可以进行保存了
     }
 })

6.当第一次点击按钮的时候，完整的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
 * Created by Administrator on 2017/6/25.
 */
define(['jquery', 'js/util', 'template', 'uploadify','jcrop','form'], function ($, util, template, uploadify) {
  var cs_id = util.queryString().cs_id;
  $.ajax({
    url: '/api/course/picture',
    type: 'get',
    data: {cs_id: cs_id},
    success: function (data) {
      if (data.code == 200) {
        // alert('成功了...');
        // 把图片渲染一下
        var htmlStr = template('cs_pic_tpl', data.result);
        $('.steps').html(htmlStr);
        //单击按钮的时候，图片是可以选择后被上传的，这是原图，并能够显示出来
        $("#upload").uploadify({
          swf: '/views/public/assets/uploadify/uploadify.swf',
          uploader: '/api/uploader/cover',
          width: 85,
          height: 'auto',
          buttonText: '请选择图片',
          formData: {cs_id: cs_id},
          fileObjName: 'cs_cover_original',
          buttonClass: 'btn btn-success btn-sm',
          itemTemplate: '<span></span>',
          onUploadSuccess: function (file, data, response) {
            // console.log(data); 如果图片上传成功的话，要将图片显示出来
            $(".preview img").attr('src', JSON.parse(data).result.path);
            $('#cropBtn').prop('disabled', false);// selected  checked  disabled 这三个比较特殊，不能用attr，只能用prop
          }
        });//uploadify
      }//data.code
    }//success
  });//ajax
  //当单击按钮的时候，要进行判断，如果是第一次单击按钮的话，就需要裁切并将按钮的值改为保存
 
   $('.steps').on('click','#cropBtn',function (){
       if($(this).attr('data-status')!='save'){
              //说明此时是第一次单击按钮
              $(this).attr('data-status','save').text('保存');
              $('.preview img').Jcrop({
                aspectRatio: 2,
                setSelect: [20,20,300,150]
              },function (){
                // 这里面的这些数据是用来设置缩略图的
                jcrop_obj = this;  //this就是当前的缩略图对象
                jcrop_obj.initComponent('Thumbnailer', { width: 240, height: 120 });
                $('.thumb').append($('.jcrop-thumb'));
              });
      }else {
              // 说明需要保存图片了  // 往服务器发送ajax请求
           alert(123);
          var result = jcrop_obj.getSelection();
          $.ajax({
             url:'/api/course/update/picture',
             type:'post',
             data:{
               cs_id:id,
               x:result.x,
               y:result.y,
               w:result.w,
               h:result.h
                },
             success:function (info){
                 if(info.code==200){
                    //进行页面的跳转
                 location.href='/course/lesson?cs_id='+info.result.cs_id;
                  }
                }
              })
            }
            
          })
  })
})

8.课时管理功能

1.修改lesson.html页面中文件路径的引用

1
2
3
4
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course中新建一个lesson.js的文件，定义模块，一打开这个页面的时候，要显示信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
define(['jquery','js/util','template','bootstrap'],function ($,util,template,bt){
  var cs_id = util.queryString().cs_id;
  //  发送请求来渲染当前的页面  当前的课时的页面
    $.ajax({
      url:'/api/course/lesson',
      type:'GET',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           //渲染模板
           var htmlStr = template('cs_lesson_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });
  })

3.lesson.html页面中的模块代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="text/tempalte" id="cs_lesson_tpl">
        <div class="brief">
                        <div class="thumb">
                            <img src="./uploads/course_1.jpg" alt="">
                        </div>
                        <dl class="info">
                            <dt>{{cs_name}}</dt>
                            <dd>{{tc_name}}</dd>
                            <dd>课时：{{lessons.length}}</dd>
                        </dl>
                    </div>
                    <!-- 步聚 -->
                    <ul class="forwards list-unstyled">
                        <li>
                            <a href="/course/basic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            基本信息
                            </a>
                        </li>
                        <li>
                            <a href="/course/pic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            课程图片
                            </a>
                        </li>
                        <li>
                            <a href="/course/lesson?cs_id={{cs_id}}" class="active">
                            <b>3</b>
                            课时管理
                            </a>
                        </li>
                    </ul>
                    <!-- 课时管理 -->
                    <div class="content">
                        <!-- 标题 -->
                        <div class="title">
                            <h5>课时管理 <small>LESSON MANAGE</small></h5>
                            <a src="javascript:;" id='addLesson'  data-target="#lesson" class="btn btn-success btn-sm pull-right">
                                <i class="fa fa-plus"></i>
                                课时
                            </a>
                        </div>
                        <div class="lessons">
                            <ul class="list-unstyled">
                                {{each lessons as v i}}
                                <li>
                                    <i class="fa fa-file-video-o"></i>
                                    <span class="order">课时：{{i+1}}</span>
                                    <span class="name">{{v.ct_name}}</span>
                                    <span class="duration">{{v.ct_video_duration}}</span>
                                    <!-- 操作 -->
                                    <div class="action pull-right">
                                        <a href="javascript:;" class="btn btn-info btn-xs" data-toggle="modal" data-target="#lesson">编辑</a>
                                        <a href="javascript:;" class="btn btn-info btn-xs">预览</a>
                                        <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                                    </div>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
</script>

9.课时管理之添加按钮

  • 1.添加按钮的时候，当点击添加按钮的时候，要显示模态框
1
2
3
4
5
//当单击课时按钮的时候，要显示模态框来添加课时
$(".steps").on("click",'#addLesson',function (){
  //chepter  章节
     $("#lesson").modal();  //显示模态框   这是检测好不好用
});
  • 2.单击添加按钮，要渲染模板(因为添加和编辑是一个模态框)
1
2
3
4
5
6
7
8
9
10
$(".steps").on("click", "#addLesson", function(){
		var html = template("cs_lesson_tpl", {
			title: "添加课时",
			saveBtnText: "添加",
			actionUrl: "/api/course/chapter/add"   //这是后来添加的内容 
		});
		$("#editPanel").html(html);
		$("#chapterModal").modal();	
	})
  • 3.此时的模板数据是这样的：这里面的模板中的input标签是没有value值的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="text/template" id="cs_modal_tpl">
       <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">{{title}}</h4>
       </div>
       <div class="modal-body">
           <form action="" class="form-horizontal">
               <div class="form-group">
                   <label for="" class="col-md-2 control-label">标题</label>
                   <div class="col-md-6">
                       <input type="text" name="ct_name"  class="form-control input-sm">
                   </div>
                   <div class="col-md-2">
                       <div class="checkbox">
                           <label>
                               <input type="checkbox" id="ct_is_free" name="ct_is_free" > 免费课时
                           </label>
                       </div>
                   </div>
               </div>
               <div class="form-group">
                   <label for="" class="col-md-2 control-label">简介</label>
                   <div class="col-md-8">
                       <textarea name="ct_brief" rows="5" id="ct_brief" class="form-control input-sm"></textarea>
                   </div>
               </div>
               <div class="form-group">
                   <label for="" class="col-md-2 control-label">视频</label>
                   <div class="col-md-8">
                       <div class="input-group">
                           <input type="text" class="form-control input-sm" name="ct_video" placeholder="支持优酷、土豆、腾讯、网易公开课的视频页面地址导入">
                           <span class="input-group-btn">
                                       <button class="btn btn-success btn-sm">获取</button>
                                   </span>
                       </div>
                   </div>
               </div>
               <div class="form-group form-inline">
                   <label for="" class="col-md-2 control-label">时长</label>
                   <div class="col-md-8">
                       <input type="text" name="ct_minutes" class="form-control input-sm small">
                       分
                       <input type="text" name="ct_seconds" class="form-control input-sm small">
                       秒
                       <p class="help-block">时长必须为整数。</p>
                   </div>
               </div>
               <div class="form-group form-inline">
                   <label for="" class="col-md-2 control-label">建议学习时长</label>
                   <div class="col-md-8">
                       <input type="text" name="ct_recommend_duration" class="form-control input-sm small">
                       小时
                       <p class="help-block">（如未设置，则默认学习时长为视频时长3倍取整。）</p>
                   </div>
               </div>
           </form>
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-link btn-sm" data-dismiss="modal">取消</button>
           <button type="button" id="saveBtn" class="btn btn-success btn-sm"> {{savaBtnText}} </button>
       </div>
   </script>
  • 3.当单击按钮 的时候，要向服务器提交数据，代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#editPanel').on('click','#saveBtn',function (){
         // alert(123);
    var ct_is_free = Number($('#ct_is_free').prop('checked'));
         // ct  chapter 章节
    $('form').ajaxSubmit({
      url:'/api/course/chapter/add',
      type:'post',
      data:{
        ct_cs_id:id,
        ct_is_free: ct_is_free
      },
      success:function (info){
        if(info.code==200){
          alert('课程添加成功');
          renderLesson();
          $('#lesson').modal('hide');
        }
      }
    })
  });// on
  • 4.添加成功之后，刷新当前页面，也就是相当于再次打开当前页面，因此需要 将之前的代码 进行封装：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
  * 封装了一个刷新 当前页面的函数
  */
 function renderLesson(){
   $.ajax({
     url:'/api/course/lesson',
     type:'get',
     data:{
       cs_id:id
     },
     success:function (info){
       // 渲染模板
       var htmlStr = template('cs_lesson_tpl',info.result);
       $('.steps').html(htmlStr);
     }
   })
 }
  • 5.上面的代码都需要改变一下，如上

10.课时管理之编辑按钮

  • 1.当单击编辑按钮的时候，要弹出模态框并将当前课时的数据显示在页面上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.steps').on('click','#editBtn',function (){
         //要发送数据，显示模态框
    var ct_id = $(this).parent().attr('data-id');
          $.ajax({
            url:'/api/course/chapter/edit',
            type:'get',
            data:{
              ct_id:ct_id
            },
            success:function (info){
              if(info.code==200){
                //渲染模板
                var htmlStr = template('cs_modal_tpl',info.result);
                $('#editPanel').html(htmlStr);
                $('#lesson').modal();
              }
            }
       })
  })
  • 2.此时的模板中的数据，如下所示： 也是给之前的文本框添加了value属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="text/template" id="cs_modal_tpl">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">
            <form action="" class="form-horizontal">
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">标题</label>
                    <div class="col-md-6">
                        <input type="text" name="ct_name" value="{{ct_name}}"  class="form-control input-sm">
                    </div>
                    <div class="col-md-2">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="ct_is_free" {{if ct_is_free==1}}checked{{/if}} name="ct_is_free" > 免费课时
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">简介</label>
                    <div class="col-md-8">
                        <textarea name="ct_brief" rows="5" id="ct_brief" class="form-control input-sm">{{ct_brief}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-2 control-label">视频</label>
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm" name="ct_video"  value="{{ct_video}}" placeholder="支持优酷、土豆、腾讯、网易公开课的视频页面地址导入">
                            <span class="input-group-btn">
                                        <button class="btn btn-success btn-sm">获取</button>
                                    </span>
                        </div>
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="" class="col-md-2 control-label">时长</label>
                    <div class="col-md-8">
                        <input type="text" name="ct_minutes" value="{{ct_minutes}}" class="form-control input-sm small">
                        分
                        <input type="text" name="ct_seconds" value="{{ct_seconds}}" class="form-control input-sm small">
                        秒
                        <p class="help-block">时长必须为整数。</p>
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label for="" class="col-md-2 control-label">建议学习时长</label>
                    <div class="col-md-8">
                        <input type="text" name="ct_recommend_duration" value="{{ct_recommend_duration}}" class="form-control input-sm small">
                        小时
                        <p class="help-block">（如未设置，则默认学习时长为视频时长3倍取整。）</p>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-link btn-sm" data-dismiss="modal">取消</button>
            <button type="button" id="saveBtn" class="btn btn-success btn-sm"> {{savaBtnText}} </button>
        </div>
    </script>
  • 3.此时你会发现，课程编辑的按钮和右下角保存的按钮不存在了，需要 我们自己添加对应的属性，来渲染在当前的模板上，完整的代码如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('.steps').on('click','#editBtn',function (){
        //要发送数据，显示模态框
   var ct_id = $(this).parent().attr('data-id');
         $.ajax({
           url:'/api/course/chapter/edit',
           type:'get',
           data:{
             ct_id:ct_id
           },
           success:function (info){
             info.result.title = '课时编辑';  //实际上就是多了这两行代码
             info.result.savaBtnText = '保存'; //实际上是多了这两行代码 
             if(info.code==200){
               //渲染模板
               var htmlStr = template('cs_modal_tpl',info.result);
               $('#editPanel').html(htmlStr);
               $('#lesson').modal();
             }
           }
      })
 })
  • 4.当单击保存按钮 的时候，你会发现，虽然你是重新编辑的内容，但是却当成了添加，因为课时添加和课时编辑是同一个模板，同一个按钮 ，此时需要 进行区分，如何让一个按钮根据不同的功能，分别提交到不同的接口呢，此时就不能用按钮提交数据了，得用表单提交数据，因此给表单添加一个属性
1
<form action="{{actionUrl}}" class="form-horizontal">
  • 5.那么课程添加的按钮中的代码如下： 其实只增加了一行代码 ，就是第6行
1
2
3
4
5
6
7
8
9
10
//2. 当我们单击添加按钮的时候，要显示模态框
 $('.steps').on('click','#addLesson',function (){
     var htmlStr = template('cs_modal_tpl',{
       title:'课时添加',
       savaBtnText:'添加',
       actionUrl:'/api/course/chapter/add'   //实际上就是在原来的代码基础上增加了这行代码 
     });
     $('#editPanel').html(htmlStr);
        $('#lesson').modal();
 });
  • 6.那么编辑代码中的代码如下： 其实只增加了一行代码 ，就是第14行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//3. 当我们单击编辑按钮的时候，要显示当前课程的所有信息在模态框上
  $('.steps').on('click','#editBtn',function (){
         //要发送数据，显示模态框
    var ct_id = $(this).parent().attr('data-id');
          $.ajax({
            url:'/api/course/chapter/edit',
            type:'get',
            data:{
              ct_id:ct_id
            },
            success:function (info){
              info.result.title = '课时编辑';
              info.result.savaBtnText = '保存';
              info.result.actionUrl = '/api/course/chapter/modify'  // 实际上就是增加了这一行的代码 
              if(info.code==200){
                //渲染模板
                var htmlStr = template('cs_modal_tpl',info.result);
                $('#editPanel').html(htmlStr);
                $('#lesson').modal();
              }
            }
       })
  })

要当单击编辑按钮的时候，也要显示当前的模态框，而且还要把数据渲染在上面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".steps").on("click", ".editBtn", function(){
		var ct_id = $(this).parent().attr("data-id");
		$.ajax({
			type: "get",
			data: {ct_id: ct_id},
			success: function(data){
				data.result.title="编辑课时";
				data.result.saveBtnText= "保存";
				data.result.actionUrl = "/api/course/chapter/modify";
				var html = template("lesson_info_tpl", data.result);
				$("#editPanel").html(html);
			}
		});
		$("#lesson").modal();	
	})

3.由于是添加和编辑的按钮，都是同一个模态框，此时编辑按钮功能，再把添加按钮修改一下：

1
2

4.当我们单击保存按钮的时候，就是下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$("#editPanel").on("click", "#saveBtn", function(){
		var is_free = Number($("#free").prop("checked"));
		$("form").ajaxSubmit({
			type: "post",
			data: {ct_is_free: is_free, ct_cs_id: cs_id}, //要跟课程的id连接起来
			success: function(data){
				if(data.code == 200){
					$("#lesson").modal("hide");	
					renderLessons();
				}
			}
		});
	})
	//封装一个ajax渲染的方法
	function renderLessons(){
		$.ajax({
			url: "/api/course/lesson",
			type: "get",
			data: {cs_id: cs_id},
			success: function(data){
				if(data.code == 200){
					var html = template("lesson_tpl", data.result);
					$(".steps").html(html);
				}
			}
		});
	}

11.课程列表实现

1.在js/course文件夹下面，新建list.js文件，并定义模块

1
2
3
4
5
6
7
8
9
10
11
12
define(['jquery','template'],function ($,template){
    $.ajax({
      url:'/api/course',
      type:'get',
      success:function (data){
        if(data.code==200){
          var htmlStr =template('cs_list_tpl',data);
          $('.courses').html(htmlStr);
        }
      }
    })
});

2.list.html模板的拼接(下面的很多course是重复的，在模板里面，只需要一个即可)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/template" id="cs_list_tpl">
   <!-- 搜索 -->
   <div class="search">
     <form action="" class="form-inline">
       <select name="" class="form-control input-sm">
         <option value="">按年龄</option>
       </select>
       <select name="" class="form-control input-sm">
         <option value="">按性别</option>
       </select>
       <select name="" class="form-control input-sm">
         <option value="">按地区</option>
       </select>
       <select name="" class="form-control input-sm">
         <option value="">按日期</option>
       </select>
       <button class="btn btn-success btn-sm">筛选</button>
       <div class="input-group pull-right">
         <input type="text" class="form-control input-sm">
         <span class="input-group-btn">
                       <button class="btn btn-success btn-sm">搜索</button>
                   </span>
       </div>
     </form>
   </div>
   {{each result as v i}}
   <div class="course">
     <div class="pic">
       <img src="{{v.cs_cover}}" alt="">
     </div>
     <div class="info">
       <a href="javascript:;">{{v.cs_name}}</a>
       <ul class="list-unstyled">
         <li>
           <span>讲师：{{v.tc_name}}</span>
           <span>类别：{{v.cg_name}}</span>
         </li>
         <li>
           <span>课时：32</span>
           <span>学员：9823</span>
         </li>
         <li>
           <span>浏览：11313</span>
           <span></span>
         </li>
       </ul>
     </div>
   </div>
   {{/each}}
 </script>

3.在list.html页面中调用模板

1
2
3
<script>
  require(['js/course/list']);  //数据很多，需要等待一会儿
</script>

12.Echarts

  • 1.在js/dashboard下面新建一个index.js文件，新粘进如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
define(['echarts'],function (echarts){
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})
  • 2.在js/libs/config.js文件中添加依赖，代码如下：
1
'echarts':'assets/echarts/echarts.min'
  • 3.在页面中调用代码
1
2
3
<script>
        require(['js/dashboard/index']);
</script>

13.NProgress 的用法

  • 1.在common.js中，添加下面的代码 ：

1
2
3
// 这两行代码是每个页面加载或是切换的时候，都会执行的，每个页面都会有一个进度条的效果
    NProgress.start();
    NProgress.done();
  • 2.如果想让每一个ajax也有如此的效果的话，则需要 再添加两行代码 ：
1
2
3
4
5
6
7
8
// 全局ajax事件监视，是整个页面中
    // 每一次ajax请求的时候，都会有的一个进度条的效果
    $(document).ajaxStart(function (){
      NProgress.start();
    });
    $(document).ajaxStop(function (){
      NProgress.done();
    })
  • 3.注意一定要添加模块引入，或是清一下缓存，看一下效果
-------------本文结束感谢您的阅读-------------