gaofeifiy 发布的文章

调用 ajax-process接口显示上传进度

使用ajax上传文件的时候为了通过 files api来获取文件信息,从而可以看到显示进度
html

   <div class="row">
            <label for="file">
                Upload Image:</label>
            <input type="file" name="fileToUpload" id="fileToUpload"  multiple="multiple" onchange="fileSelected();" />
        </div>

        <div id="fileName">
        </div>
        <div id="fileSize">
        </div>
        <div id="fileType">
        </div>
        <div class="row">
            <input type="button" onclick="uploadFile()" value="Upload Image" />
        </div>
        <div id="progressNumber">
        </div>

js

        function fileSelected() {
            var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
            }
        }

        function uploadFile() {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "Home/Upload");
            xhr.send(fd);
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }

        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
        }

        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }

        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

这里加了一个监听事件,可以通过异步来不断获取上传信息,从而能正常的显示上传进度

文章来源
另一个资料-使用 JavaScript File API 实现文件上传

使用 hexo + github pages 搭建博客

本地搭建 hexo

* 构建hexo需要在本地安装`node.js` ``` brew install node ``` 当前版本的node版本 ``` node -v v7.7.3 ``` * 全局安装 `hexo` ``` npm install -g hexo ``` > 国外镜像慢的话可以搜索找下淘宝的 `cnmp`
  • 创建一个目录并且安装 hexo
mkdir hexo_blog
cd hexo_blog
hexo init
npm install
  • 新建一个文章
hexo new "your-first-page"

文件在 hexo_blog/source/_post/下进行编辑啊

  • 然后就是生成静态文件
hexo generate
hexo server

这时就可以访问 http://localhost:4000 来查看效果,这个时候hexo已经搭建成功了,
但是我们需要外网能够访问,这就用到了今天的另一个主角:github page

hexo 放到github上

  • 需要一个github账号,具体申请登录看 https://github.com 上的引导就行
  • 创建一个新的 repository 名字格式是固定的,比如我的账户名是 gaopengfei123123 那么这个库的名字就是 gaopengfei123123.github.io 不能改的哦
  • 为了可以直接提交远程文件需要添加 ssh 密匙
    本地操作
ssh-keygen -t rsa -C "5173180@qq.com” -f ~/.ssh/github-rsa
cat ~/.ssh/github_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC3K5mcQxH9mu1cUIu2+byK1iksES/7Tnfh23l2U6y1fOKO4XFhPLdAoMQdePnI51PAF4faXxucOYsiDb6IpQimWPwORKTkEkcglOiZ414eZZ829gY98RAldbFQeT2L9A0l2APfcan1fH4HvrCmZKlY8CNDQDDfRzXub9hfSX3LS5mQlgS9PHiFoXRfrS10hYweere9Cb9OFiEdkdCfMKUBr25ImGahqbaHxE8Vb3QzMT8Q5PBITaqFwYnIE/z6HU6Lok92EZ/uVG81SMJb9A5SQCZdsjWmyDqXj1eDZ1A2YyUlA+/6QM7JjCrLoZAAtZHTH+ylNAG79w9WG0eYAuL GaoPengFeiFiy@github.com

把这一段完整的复制到 https://github.com/settings/keys 这个地址下,添加一条新的ssh-key,这样就能免登录提交版本文件

  • 现在编辑本地hexo根目录下的站点配置文件 path/to/hexo_blog/_config.yml
    查找字段 deploy 编辑成这样
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:gaopengfei123123/gaopengfei123123.github.io.git
  branch: master

设置好后,就将本地生成的静态文件发到github上

hexo deploy

#如果报错就可能是少个插件
npm install hexo-deployer-git
  • 进入 你的版本库地址/settings 比如我的就是 https://github.com/gaopengfei123123/gaopengfei123123.github.io/settings
    找到 github pages 设置块按照你的需求调整,这时访问 https://gaopengfei123123.github.io就能访问 hexo 上传的内容了

绑定一个自己的域名,通过它来访问github pages

我用的是阿里云的万网来举例

  • 首先进入到万网云解析的页面
记录类型:A
主机记录:blog
记录值:xxx.xxx.xxx  #这里需要 ping -c 3 https://gaopengfei123123.github.io 获取ip地址
  • 然后返回到 你的版本库地址/settings 这里,将 Custom domain 设置成你刚才解析的名字,
    与此同时在github上版本的根目录下添加一个文件 CNAME 内容是
#in CNAME
blog.justwe.site

这时再返回settings中就能看的 github pages 部分的域名绑定的是你的域名了,到这里博客算是搭建成功了

hexo官网

hexo的next模版官网

js获取api的一系列API接口

window.location.host
document.domain(vue下会发生错误)

//全地址
window.location.href

补充:
获取当前域名信息
代码如下

thisTLoc = top.location.href;
thisPLoc = parent.document.location;
thisTHost = top.location.hostname;
thisHost = location.hostname;
strwrite = ” thisTLoc: [" + thisTLoc + "]”
strwrite += ” thisPLoc: [" + thisPLoc + "]”
strwrite += ” thisTHost: [" + thisTHost + "]”
strwrite += ” thisHost: [" + thisHost + "]”
document.write( strwrite );

json 格式化打印

想练手的可以手写一个出来,比如

<?php
class Helper{
    public static function jsonFormat($data, $indent=null){
        // 对数组中每个元素递归进行urlencode操作,保护中文字符
        array_walk_recursive($data, [self::class,'jsonFormatProtect']);

        // json encode
        $data = json_encode($data);

        // 将urlencode的内容进行urldecode
        $data = urldecode($data);

        // 缩进处理
        $ret = '';
        $pos = 0;
        $length = strlen($data);
        $indent = isset($indent)? $indent : '    ';
        $newline = PHP_EOL;
        $prevchar = '';
        $outofquotes = true;

        for($i=0; $i<=$length; $i++){

            $char = substr($data, $i, 1);

            if($char=='"' && $prevchar!='\\'){
                $outofquotes = !$outofquotes;
            }elseif(($char=='}' || $char==']') && $outofquotes){
                $ret .= $newline;
                $pos --;
                for($j=0; $j<$pos; $j++){
                    $ret .= $indent;
                }
            }

            $ret .= $char;

            if(($char==',' || $char=='{' || $char=='[') && $outofquotes){
                $ret .= $newline;
                if($char=='{' || $char=='['){
                    $pos ++;
                }

                for($j=0; $j<$pos; $j++){
                    $ret .= $indent;
                }
            }

            $prevchar = $char;
        }

        return $ret;
    }

    public static function jsonFormatProtect(&$val){
        if($val!==true && $val!==false && $val!==null){
            $val = urlencode($val);
        }
    }
}

$array = [
  'key1' => 123,
  'key2' => 'abc',
  'key3' => '中文测试'
];

$json = Helper::jsonFormat($array);
echo '</pre>';
print_r($json);

转自博客 原文

还有一种方法就是使用 json_encode() 函数,它再不断的添加参数来丰富它的功能,上面同样的操作可以简化成这样:

<?php
$array = [
  'key1' => 123,
  'key2' => 'abc',
  'key3' => '中文测试'
];

$json = json_encode($$array, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);
echo '</pre>';
print_r($json);

想知道 json_encode更多的参数可以看文档 文档地址

yii2.0 多数据库操作

演示的版本是 basic 版,但是原理很好理解

编辑配置文件 @app/config/web.php

......
'db' => require(__DIR__ . '/db.php'), //框架提供的一个默认连接
'localDb' => require(__DIR__ . '/db2.php'), //这个是我们新加的一个连接配置
......

在同目录下的 db2.php 内容格式和 db.php 格式一样,只是连接不同

修改 model 中需要使用的 connection id

这时再在想改的 model 中复写 getDb() 方法

class Members extends \yii\db\ActiveRecord
{
    /**
     * @inheritdoc
     */
    public static function tableName()
    {
        return 'members';
    }

    /**
     * @return \yii\db\Connection the database connection used by this AR class.
     */
    public static function getDb()
    {
        return Yii::$app->get('localDb');
    }

    ......some functions.................
}

这个 model 中我们使用了 localDb 的链接配置,可以追踪代码 \yii\db\ActiveRecord中的 getDb() 方法,

//in \yii\db\ActiveRecord

/**
    * Returns the database connection used by this AR class.
    * By default, the "db" application component is used as the database connection.
    * You may override this method if you want to use a different database connection.
    * @return Connection the database connection used by this AR class.
    */
   public static function getDb()
   {
       return Yii::$app->getDb();
   }


有这么一段,既然已经显示出来 Yii::$app 这种核心的东西了,说明已经离那个connection容器已经不远了
再追踪到getDb() 显示的是 $this->get('db') 转换一下不就是默认使用的 Yii::$app->get('db') 吗? 于是回到最开始的 model 中,将其重写为 Yii::$app->get('localDb'),之后我们再使用这个 model 的时候就是使用的id 为localDb的 connection 单例了