实用列表页, 弹出框, 图片上传JS整理

1. 全选/反选(Jquery实现)

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*HTML结构*/
<input type="checkbox" id="check_all">

<table class="table">
...
</table>

/*全选按钮*/
    $("#check_all").click(function () {
        if(this.checked) {
            $('.table :checkbox').prop("checked", true);
        } else {
            $('.table :checkbox').prop("checked", false);
        }
    })

2. 列表页提交:弹窗表单框,点击提交后自动关闭

第1步:添加按钮

Select Code
1
<a href="javascript:void(0)" class="btn btn-primary" onclick="add_edit_article(0)">添加文章</a>

第2步:添加按钮点击事件

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*添加文章*/
function add_edit_article(id) {
    if (id>0) {
        // 修改
    } else {
        var url = "{:U('Ucenter/Seo/add_article', array('call_back'=>'call_back_fun'))}";
        layer.open({
            type: 2,
            title: '发布文章',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url,
        });
    }
}

/*回调函数,关闭窗口*/
function call_back_fun(v) {
    layer.closeAll();
    location.href = "弹出页面的URL";
}

第3步:弹出的页面

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public function add_article()
{
    header("Content-Type:text/html; charset=utf-8");
    if ($this->isPost()) {
        $postData = $this->_post();

        // TODO:数据校验

        // 写入数据库操作

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

3. 图片插件的使用

演示效果:

插件官网:http://www.uploadify.com/

第1步:HTML表单制作

Select Code
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
<form action="{:U('Ucenter/Seo/add_video')}" method="post" id="videoForm">
<div class="form-group">
    <label for="v_name">视频名称:</label>
    <input type="text" class="form-control" id="v_name" placeholder="视频名称" name="v_name"/>
</div>
<div class="form-group">
    <label for="cate_id">选择视频分类:</label>
    <select name="cat_id" id="cate_id" class="form-control" style="width: 300px;">
        <option value="0">请选择视频分类</option>
        <volist name="videos_category" id="vo">
            <option value="{$vo.vc_id}">{$vo.vc_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="type">选择课程类型:</label>
    <select name="v_lesson_id" id="type" class="form-control" style="width: 300px;">
        <option value="0">请选择课程类型</option>
        <volist name="videos_lesson" id="vo" key="k">
            <option value="{$vo.l_id}">{$vo.l_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_teacher">选择博主:</label>
    <select name="v_teacher_id" id="v_teacher" class="form-control" style="width: 300px;">
        <option value="0">请选择博主</option>
        <volist name="videos_teacher" id="vo" key="k">
            <option value="{$vo.t_id}">{$vo.t_name}</option>
        </volist>
    </select>
</div>
<div class="form-group">
    <label for="v_code">播放码:</label>
    <input type="text" class="form-control" id="v_code" placeholder="填写视频播放码" name="v_code"/>
</div>
<div class="form-group">
    <label for="keywords">关键字:</label>
    <input type="text" class="form-control" id="keywords" placeholder="关键字" name="keywords"/>
</div>
<div class="form-group">
    <label for="file_upload">封面图片:</label>
    <input type="file" id="file_upload" multiple="true"/>
    <img src="" style="display: none" id="upload_image" width="200"/>
    <input type="hidden" name="image" id="upload_image_input" multiple="true" value=""/>
</div>
<div class="form-group">
    <label for="description">短描述:</label>
    <textarea name="description" id="description" class="form-control" name="keywords" cols="30"
              rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" onclick="checkForm()">提交</button>
<input type="reset" class="btn btn-default" value="重置">
<div></div>
</form>

第2步:引入JS,CSS文件

Select Code
1
2
3
<script src="__PUBLIC__/uploadify/jquery.min.js" type="text/javascript"></script>
<link href="__PUBLIC__/uploadify/uploadify.css" rel="stylesheet">
<script src="__PUBLIC__/uploadify/jquery.uploadify.js" type="text/javascript"></script>

第3步:编写JS

Select Code
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
<script type="text/javascript">
    // 检查表单内容
    function checkForm() {
        var v_name = $("input[name='v_name']").val();
        var v_code = $.trim($("input[name='v_code']").val());
        var keywords = $("input[name='keywords']").val();
        var image = $("input[name='image']").val();
        var cat_id = $("select[name='cat_id']").val();
        var v_lesson_id = $("select[name='v_lesson_id']").val();
        var v_teacher_id = $("select[name='v_teacher_id']").val();
        var description = $.trim($("textarea[name='description']").val());
        var error = "";

        if (v_name == "") {
            error += "视频名称不能为空<br />";
        }
        if (v_code == "") {
            error += "播放码不能为空<br />";
        }
        if (v_code.length != 32) {
            error += "播放码长度必须为32<br />";
        }
        if (keywords == "") {
            error += "关键字不能为空<br />";
        }
        if (image == "") {
            error += "必须上传封面图片<br />";
        }
        if (cat_id == "" || cat_id == "0") {
            error += "请选择视频类别<br />";
        }
        if (v_lesson_id == "" || v_lesson_id == "0") {
            error += "请选择课程类别<br />";
        }
        if (v_teacher_id == "" || v_teacher_id == "0") {
            error += "请选择博主<br />";
        }
        if (description == "") {
            error += "描述内容不能为空<br />";
        }
        if (description.length > 250) {
            error += "描述内容最多250字<br />";
        }

        if (error) {
            layer.alert(error);
            return false;
        }
        return $("#videoForm").submit();
    }

    var SWF = '__PUBLIC__/uploadify/uploadify.swf';
    var UPLOAD_IMG = '{:U("Home/Image/upload")}';

    $(function () {
        $("#file_upload").uploadify({
            height: 40,
            swf: SWF,
            uploader: UPLOAD_IMG,
            width: 120,
            buttonText: '图片上传',
            fileObjName: 'file',
            fileTypeExts: '*.gif;*.jpg;*.png',
            onUploadSuccess: function (file, data, response) {
                if (response) {
                    var obj = JSON.parse(data);
                    if (obj.status == 0) {
                        alert(obj.info);
                        return false;
                    }
                    $("#upload_image").attr("src", obj.img_url);
                    $("#upload_image").show();
                    $("#upload_image_input").attr("value", obj.img_url);

                }
            }
        });
    });

</script>

第4步:表单提交

Select Code
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
public function add_video()
{
    header("Content-Type:text/html; charset=utf-8");

    $videos_category = M("VideosCategory")->field('vc_id,vc_name')->select();
    $videos_teacher = M("VideosTeacher")->field('t_id,t_name')->select();
    $videos_lesson = M("VideosLesson")->field('l_id,l_name')->select();
    $this->assign('videos_category', $videos_category);
    $this->assign('videos_teacher', $videos_teacher);
    $this->assign('videos_lesson', $videos_lesson);

    if ($this->isPost()) {
        $postData = $this->_post();
        // TODO:数据校验

    $data = array(
            'v_name' => $postData['v_name'],
            'v_lesson_id' => $postData['v_lesson_id'],
            'v_teacher_id' => $postData['v_teacher_id'],
            'v_code' => $postData['v_code'],
            'v_picture' => $postData['image'],
            'v_keywords' => $postData['keywords'],
            'v_description' => $postData['description'],
            'zan_num' => 0,
            'create_time' => date('Y-m-d H:i:s')
        );

    $model = M('');
        $model->startTrans();
        $video_id = D("VideosInfo")->add($data);
        if (!$video_id) {
            $model->rollback();
        }

        $data_body = array(
            'video_id' => $video_id,
            'cat_id' => $postData['cat_id'],
        );

        $result = D("VideosCategoryInfo")->add($data_body);
        if ($result) {
            $model->commit();
        } else {
            $model->rollback();
        }

        $call_back = $this->_get("call_back","","call_back_fun");
        echo "<script>parent.{$call_back}('success');</script>";
        exit();
    }

    $this->display();
}

第5步:图片上传图片方法

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function upload()
{
    import('ORG.Net.UploadFile');
    $upload = new UploadFile();
    $upload->maxSize = 3145728;
    $upload->allowExts = array('jpg','png','gif', 'jpeg');
    $upload->savePath = './Public/Uploads/video/';
    if (!$upload->upload()) {
        $data = array(
            'status' => 0,
            'info' => $upload->getErrorMsg(),
        );
    } else {
        $info = $upload->getUploadFileInfo();
        $data = array(
            'status' => 1,
            'info' => 'ok',
            'img_url' => ltrim($info[0]['savepath'] . $info[0]['savename'], '.'),
        );
    }
    $this->ajaxReturn($data, 'JSON');
}

PHPStorm的xdebug工具使用步骤

1.给php安装xdebug模块

百度具体安装流程

2.配置

注意配置的步骤1234

3.运行

先打断点,然后点击 debug 按钮,当运行至断点处 phpstorm 会在任务栏闪烁,此时按 f8 会往下一行一行执行。

非常方便,非常有必要掌握,尤其是你需要阅读源码的项目,非常方便!

使用Samba,Windows上开发,代码同步到Linux

说明:在Linux上安装Samba文件服务器,然后添加Samba用户,即可在Windows上使用我的电脑(包括Sublime编辑器打开Linux上的文件)打开Linux上的文件(注意设置权限为777,或者使用ACL权限设置),在Windows上做的任何修改,保存时会更新到Linux。

服务器环境:

  • CentOS 6.8
  • LNMP1.2一键搭建环境

步骤如下:
1. 安装samba:

Select Code
1
yum -y install samba samba-client smaba-common

2. 设置samba的配置文件

Select Code
1
vim /etc/samba/smb.conf

添加如下设置,也就是你的项目文件夹设置可写、可浏览

Select Code
1
2
3
4
5
6
[web]                                  # 自定义节点
comment = 网站根目录                   # 备注
path = /home/wwwroot                   # Nginx主目录
writable = yes                         # 是否可写
browseable = yes                       # 是否可浏览
valid users = web                      # 允许的用户

3. 启动smb服务器:

Select Code
1
service smb restart|start|stop

4. 到 windows 系统下访问,使用路径「\\192.168.199.200」

5. 设置项目文件夹ACL权限

Select Code
1
2
setfacl -R -m u:bls:rwx 目标文件夹
setfacl -R -m d:bls:rwx 目标文件夹 // 新建的文件也拥有rwx权限

或者:

Select Code
1
chmod 777 domain.com

6. 效果预览

常见PHP框架安装

一文搞定常见的PHP框架的安装。环境的搭建,使用了LNMP1.3一键安装,参考:http://www.webjust.org/archives/460

YII
PHP >= 5.4.0
版本:YII2.0的basic版

Select Code
1
2
composer global require "fxp/composer-asset-plugin:^1.2.0"
composer create-project --prefer-dist yiisoft/yii2-app-basic basic // 被墙

被墙可以使用国内的git源:

// yii2.0 basic版

Select Code
1
git clone https://code.csdn.net/wbo86/yii2_basic.git basic

// yii2.0 advance版

Select Code
1
git clone https://code.csdn.net/wbo86/yii2_advance.git advance

备注:注意YII框架安装后,需要配置服务器的环境才能够使用。请参考:http://www.yiichina.com/doc/guide/2.0/start-installation

ThinkPHP
PHP >= 5.4.0

版本1:thinkphp 3.2

Select Code
1
composer create-project --prefer-dist topthink/thinkphp tp3 // 被墙

被墙,使用国内的git源:

Select Code
1
git clone https://code.csdn.net/topthink2011/ThinkPHP.git tp3

版本2:thinkphp 5

Select Code
1
composer create-project topthink/think tp5 --prefer-dist

Laravel
PHP >= 5.5.9
storage 和 bootstrap/cache 目录必须让服务器有写入权限

版本1:Laravel 5.3.*

Select Code
1
composer create-project --prefer-dist laravel/laravel lar53 "5.3.*"

版本2:Laravel 5.2.*

Select Code
1
composer create-project --prefer-dist laravel/laravel lar52 "5.2.*"

版本3:Laravel 5.1.*

Select Code
1
composer create-project --prefer-dist laravel/laravel lar51 "5.1.*"

特殊权限设置:

Select Code
1
2
setfacl -R -m u:www:rwx /home/wwwrot/laravel
setfacl -R -m d:www:rwx /home/wwwrot/laravel

备注:此处的“/home/wwwrot/laravel”指的是你的项目的文件夹。

其他管理工具安装:

Nodejs:
http://nodejs.cn/download/

Composer:
http://docs.phpcomposer.com/