2017年9月19日星期二

解決使用注音輸入時選字按 Enter 會送出的問題

解決方法：監聽的事件由 keyup 改為 keypress

來源：[JavaScript] 解決使用新注音輸入時選字按 Enter 會送出的問題

2017年8月1日星期二

C# Router 設定

App_Start\RouteConfig.cs

// 自定義 Router
routes.MapRoute(
name: "Hello",
url: "{controller}/{action}/{name}/{count}"
);

2017年7月16日星期日

Angular2 表格分頁模組

import { Component } from '@angular/core';

@Component({

  selector: 'app-pagging-table',

  templateUrl: './pagging-table.component.html',

  styleUrls: ['./pagging-table.component.css']

})

export class PaggingTableComponent {

  // 待辦清單 開始 結束與限制筆數

  taskStart = 0;

  taskEnd = 0;

  taskLimit = 10;

  // 待辦清單 目前頁數 總頁數與總筆數

  taskCurrentPage = 1;

  taskTotalPage = 0;

  taskMaxcount = 0;

  // 數字轉陣列

  Arr = Array;

  // 顯示 -> 文字

  showText = '顯示';

  // 到 -> 文字

  toText = '～';

  // 共 -> 文字

  totalText = '共';

  // 筆 -> 文字

  countText = '筆';

  // 下一頁 -> 文字

  nextText = '下一頁';

  // 上一頁 -> 文字

  prevText = '上一頁';

  // 設定表格資料載入完成後需要做的事情

  private tableLoadCallback;

  // 設定頁面載入完成後需要做的事情

  private ngAfterViewInit_Callback;

  // 建構子

  constructor() {

    // 建立預設方法 設定表格資料載入完成後需要做的事情

    this.tableLoadCallback = function () {

      console.error('力煒-表格分頁功能錯誤，表格資料載入完成後需要做的事情 必須重新定義 -> setTableLoadCallback');

    };

    // 建立預設方法 設定頁面載入完成後需要做的事情

    this.ngAfterViewInit_Callback = function() {

      console.error('力煒-表格分頁功能錯誤，設定頁面載入完成後需要做的事情 必須加入物件的 ngAfterViewInit()');

    };

  }

  // 設定頁面載入完成後需要做的事情

  getNgAfterViewInit_Callback(tableId: string) {

    this.ngAfterViewInit_Callback = () => {

      // 確認分頁資訊物件存在

      if ($('.dataTables_info').length === 0) {

        // tslint:disable-next-line:max-line-length

        console.error('力煒-表格分頁功能錯誤，必須新增 >> <div class="dataTables_info" id="task-list_info" role="status" aria-live="polite">{{_paggingTable.showText}} {{_paggingTable.taskStart}} {{_paggingTable.toText}} {{_paggingTable.taskEnd}} {{_paggingTable.totalText}} {{_paggingTable.taskMaxcount}} {{_paggingTable.countText}}</div>');

      }

      // 確認分頁資訊物件存在

      if ($('.dataTables_paginate').length === 0) {

        console.error(

          `力煒-表格分頁功能錯誤，必須新增 >> 

        <div class="dataTables_paginate paging_simple_numbers" id="task-list_paginate">

            <a class="paginate_button previous" (click)="_paggingTable.prevPage()">{{_paggingTable.prevText}}</a>

            <span>

                <a class="paginate_button" (click)="_paggingTable.goToPage(i + 1)" *ngFor="let data of _paggingTable.Arr(_paggingTable.taskTotalPage); let i = index">{{i + 1}}</a>

            </span>

            <a class="paginate_button next" (click)="_paggingTable.nextPage()">{{_paggingTable.nextText}}</a>

        </div>`

        );

      }

      // 確認表格存在

      if ($('#' + tableId).length === 0) {

        console.error(`力煒-表格分頁功能錯誤，指定編號的表格不存在`);

      } else {

        $('#' + tableId).parent().addClass('dataTables_wrapper');

        $('#' + tableId).addClass('dataTable no-footer');

      }

    };

    return this.ngAfterViewInit_Callback;

  }

  // 上一頁

  prevPage() {

    // 如果不能再上一頁了

    if (this.taskCurrentPage === 1) {

      return;

    }

    // 設定參數

    this.taskStart = (this.taskStart - this.taskLimit < 0) ? 0 : this.taskStart - this.taskLimit;

    this.taskCurrentPage = (this.taskCurrentPage - 1 < 1) ? 1 : this.taskCurrentPage - 1;

    this.tableLoadCallback();

    // 設定當前頁碼顯示

    this.setCurrentPage_UI(this.taskCurrentPage);

  }

  // 下一頁

  nextPage() {

    // 如果不能再下一頁

    if (this.taskCurrentPage === this.taskTotalPage) {

      return;

    }

    // 設定參數

    this.taskStart = (this.taskStart + this.taskLimit < 0) ? 0 : this.taskStart + this.taskLimit;

    this.taskCurrentPage = (this.taskCurrentPage + 1 < 1) ? 1 : this.taskCurrentPage + 1;

    this.tableLoadCallback();

    // 設定當前頁碼顯示

    this.setCurrentPage_UI(this.taskCurrentPage);

  }

  // 跳轉頁面

  goToPage(page: number) {

    // 如果點擊的頁面是當前頁面 就不重新載入

    if (page === this.taskCurrentPage) {

      return;

    }

    // 計算參數並重新整理

    this.taskStart = (1 + (this.taskLimit * (page - 1)) < 0) ? 0 : 1 + (this.taskLimit * (page - 1));

    this.taskCurrentPage = page;

    this.tableLoadCallback();

    // 設定當前頁碼顯示

    this.setCurrentPage_UI(this.taskCurrentPage);

  }

  // 設定當前頁碼顯示

  setCurrentPage_UI(page: number) {

    // ngFor 可能有短暫的延遲

    setTimeout(function() {

      $('a.paginate_button').removeClass('current');

      $('a.paginate_button:contains("' + page.toString() + '")').addClass('current');

    }, 10);

  }

  // 設定表格資料載入完成後需要做的事情

  setTableLoadCallback(callback: any) {

    this.tableLoadCallback = callback;

  }

  // 回傳帶有 start limit 的網址

  setStartAndLimit_ByUrl(url: string) {

    // 起始筆數參數

    if (url.includes('?')) {

      url = url + '&start=' + this.taskStart;

    } else {

      url = url + '?start=' + this.taskStart;

    }

    // 限制筆數參數

    if (url.includes('?')) {

      url = url + '&limit=' + this.taskLimit;

    } else {

      url = url + '?limit=' + this.taskLimit;

    }

    return url;

  }

  // 設定分頁初始化(0筆的情況)

  setPaggingTable_NoData() {

    // 設定目前頁數

    this.taskCurrentPage = 1;

    // 設定總頁數

    this.taskTotalPage = 0;

    // 設定從第幾筆開始

    this.taskStart = 0;

    // 設定總筆數

    this.taskMaxcount = 0;

    // 設定當前頁碼顯示

    this.setCurrentPage_UI(this.taskCurrentPage);

  }

  // 設定分頁有資料

  setPaggingTable_Data(count: number, maxCount: number) {

    // 最大數量

    this.taskMaxcount = (maxCount) ? maxCount : count;

    // 設定總頁數

    this.taskTotalPage = Math.ceil(this.taskMaxcount / this.taskLimit);

    // 設定從第幾筆開始

    this.taskStart = 1 + ((this.taskCurrentPage - 1) * this.taskLimit);

    // 設定單頁總共幾筆

    let tempEnd = (this.taskStart - 1) + (this.taskCurrentPage - 1) * (this.taskLimit);

    tempEnd = (tempEnd === 0) ? this.taskLimit : tempEnd;

    this.taskEnd = (maxCount < tempEnd) ? maxCount : tempEnd;

    // 設定總筆數

    this.taskMaxcount = maxCount;

    // 設定當前頁碼顯示

    this.setCurrentPage_UI(this.taskCurrentPage);

  }

}

2017年7月14日星期五

Angular2 Binary to File

  // 定義以 Get 的方法下載檔案 (網址, 檔案名稱, Loading Mask)

  getDownloadRequest(url: string, fileName: string, useMask?: boolean) {

    // 開啟Loading Mask

    if (useMask === undefined || useMask) {

      this._uiComponent.showLoading();

    }

    // 定義常數 headers 並且新增自定義 header

    const headers = new Headers();

    headers.append('Content-Type', 'application/json');

    headers.append('Authorization', 'JAuth ' + localStorage.getItem('auth'));

    // 新增忽略快取機制

    if (url.includes('?')) {

      url = url + '&_liwei=' + new Date().getTime();

    } else {

      url = url + '?_liwei=' + new Date().getTime();

    }

    // 定義常數 requestoptions 並且設定請求參數

    const requestoptions = new RequestOptions({

      method: RequestMethod.Get,

      url: url,

      headers: headers

    });

    // 實際發出請求 並且判斷特定請求代碼

    return this.http

      .request(new Request(requestoptions))

      .map((res: Response) => {

        if (useMask === undefined || useMask) {

          // 關閉 Loading

          this._uiComponent.closeLoading();

        }

        // 請求成功時 回傳 json

        if (res) {

          if (res.status === 201) {

            return res.json();

          } else if (res.status === 200) {

            // 取得二進位編碼檔案

            const binaryData = [];

            binaryData.push(res['_body']);

            const file = window.URL.createObjectURL(new Blob(binaryData));

            // 產生超連結下載

            const a = document.createElement('a');

            a.href = file;

            a.download = fileName;

            document.body.appendChild(a);

            a.click();

            // 自動刪除

            window.onfocus = function () {

              document.body.removeChild(a);

            };

            return res;

          }

        }

        // 請求失敗時

      }).catch((error: any) => {

        if (useMask === undefined || useMask) {

          // 關閉 Loading

          this._uiComponent.closeLoading();

        }

        if (error.status === 500) {

          // this._uiComponent.errorDialog('未預期的伺服器錯誤');

          return Observable.throw(error);

        } else if (error.status === 403) {

          this._uiComponent.errorDialog('憑證授權已過期');

          setTimeout(() => {

            this.loggingOut();

          }, 1000);

        } else {

          // 判定最近伺服器常出現的錯誤 -> 405 - 不允許用來存取此網頁的 HTTP 指令動詞。

          if (error.status === 405) {

            // 錯誤訊息

            this._uiComponent.errorDialog('不允許用(GET)來存取此網頁的 HTTP 指令動詞');

            // 回傳非 Json 才不會錯

            return Observable.throw(error);

            // 相同來源錯誤

          } else if (error.status === 404) {

            // 錯誤訊息

            // this._uiComponent.errorDialog('網頁不存在');

            // 回傳非 Json 才不會錯

            return Observable.throw(error);

          } else {

            if (error.toString().includes('Unexpected')) {

              // 錯誤訊息

              console.log(url + ' 不存在');

              // 回傳 Json

              return Observable.throw(error);

            } else {

              // 如果沒有 success 代表 api 端給了錯誤格式

              if (error.json()['success'] !== undefined) {

                // 錯誤訊息

                this._uiComponent.errorDialog(error.json()['message']);

              }

              // 回傳 Json

              return Observable.throw(error.json());

            }

          }

        }

      });

  }

2017年7月9日星期日

Base64 UTF8 Encoding

// 字串 轉成 Base64

  public getBase64_Encode(inpuString: string) {

    return btoa(encodeURIComponent(inpuString).replace(/%([0-9A-F]{2})/g,

      function toSolidBytes(match, p1) {

        return String.fromCharCode(parseInt('0x' + p1, 16));

      }

    ));

  }

確認是不是假日

// 取得日期是否為六日(例休假日)

  public getWeekEnd(date: Date) {

    return (new Date(date).getDay() % 6 === 0);

  }

身分證檢查

// 身分證

  public checkTwID(id) {

    // 建立字母分數陣列(A~Z)

    const city = new Array(

      1, 10, 19, 28, 37, 46, 55, 64, 39, 73, 82, 2, 11,

      20, 48, 29, 38, 47, 56, 65, 74, 83, 21, 3, 12, 30

    );

    id = id.toUpperCase();

    // 使用「正規表達式」檢驗格式

    if (id.search(/^[A-Z](1|2)\d{8}$/i) === -1) {

      return false;

    } else {

      // 將字串分割為陣列(IE必需這麼做才不會出錯)

      id = id.split('');

      // 計算總分

      let total = city[id[0].charCodeAt(0) - 65];

      for (let i = 1; i <= 8; i++) {

        // tslint:disable-next-line:no-eval

        total += eval(id[i]) * (9 - i);

      }

      // 補上檢查碼(最後一碼)

      // tslint:disable-next-line:no-eval

      total += eval(id[9]);

      // 檢查比對碼(餘數應為0);

      return ((total % 10 === 0));

    }

  }

遞迴取代文字

// 取代字串中所有值

  public replaceAll(str, find, replace) {

    return str.replace(new RegExp(find, 'g'), replace);

  }

2017年5月29日星期一

Javascript 取得日期與時間

//取得日期
function getDate(date)
{
 try
 {
  if(date)
  {
   var d = new Date(date);

   var month = d.getMonth()+1;
   var day = d.getDate();

   var output = d.getFullYear() + '/' +
    (month<10 ? '0' : '') + month + '/' +
    (day<10 ? '0' : '') + day;
   return output;
  }
  else
  {
   return ' ';
  }
 }
 catch(err)
 {
  if(App_Debug)
  {
   console.log(err);
  }  
 }
}
//取得時間
function getTime(date)
{
 try
 {
  if(date)
  {
   var d = new Date(date);

   var hours = d.getHours();
   var minutes = d.getMinutes();
   var seconds = d.getSeconds();

   var output = (hours<10 ? '0' : '') + hours + ':' +
    (minutes<10 ? '0' : '') + minutes + ':' +
    (seconds<10 ? '0' : '') + seconds;
   return output;
  }
  else
  {
   return ' ';
  }
 }
 catch(err)
 {
  if(App_Debug)
  {
   console.log(err);
  }  
 }
}

2017年5月23日星期二

Angular2 Ajax

import { UiToolComponent } from 'app/ui-tool/ui-tool.component';

import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpServiceService {

  // 定義 http 協定

  constructor(private http: Http, private _uiComponent: UiToolComponent) { };

  // 定義以 Post 的方法發出請求 (網址, 傳送參數)

  postRequest(url, data) {

    // 定義常數 headers 並且新增自定義 header

    const headers = new Headers();

    headers.append('Content-Type', 'application/json');

    headers.append('Authorization', 'teset ' + localStorage.getItem('auth'));

    // 定義常數 requestoptions 並且設定請求參數

    const requestoptions = new RequestOptions({

      method: RequestMethod.Post,

      url: url,

      headers: headers,

      body: JSON.stringify(data)

    });

    // 實際發出請求 並且判斷特定請求代碼

    return this.http

      .request(new Request(requestoptions))

      .map((res: Response) => {

        // 請求成功時 回傳 json

        if (res) {

          if (res.status === 201) {

            return res.json();

          } else if (res.status === 200) {

            return res.json();

          }

        }

        // 請求失敗時

      }).catch((error: any) => {

        if (error.status === 500) {

          this._uiComponent.errorDialog('未預期的伺服器錯誤');

        } else if (error.status === 401) {

          this._uiComponent.errorDialog('憑證授權已過期');

        } else {

          return Observable.throw(error.json());

        }

      });

  }

  // 定義以 Get 的方法發出請求 (網址)

  getRequest(url) {

    // 定義常數 headers 並且新增自定義 header

    const headers = new Headers();

    headers.append('Content-Type', 'application/json');

    headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

    // 定義常數 requestoptions 並且設定請求參數

    const requestoptions = new RequestOptions({

      method: RequestMethod.Get,

      url: url,

      headers: headers

    });

    // 實際發出請求 並且判斷特定請求代碼

    return this.http

      .request(new Request(requestoptions))

      .map((res: Response) => {

        // 請求成功時 回傳 json

        if (res) {

          if (res.status === 201) {

            return res.json();

          } else if (res.status === 200) {

            return res.json();

          }

        }

        // 請求失敗時

      }).catch((error: any) => {

        if (error.status === 500) {

          return Observable.throw(new Error(error.status));

        } else if (error.status === 401) {

          return Observable.throw(new Error(error.status));

        }

      });

  }

}

// 發出 Post 請求

this.httpService.postRequest('https://jsonplaceholder.typicode.com/posts', {}).subscribe(

  (data) => console.log(data)

);

// 發出 Get 請求

const testUrl = 'https://jsonplaceholder.typicode.com/posts';

this.httpService

    .getRequest(testUrl).subscribe(

      (res) => {

        console.log(res);

      },

      err => {

        console.log(err.toString());

      }

    );

2017年5月21日星期日

Angular2 上架專案的效能改善方法

使用AOT預編譯Angular2專案

http://ithelp.ithome.com.tw/articles/10187551

【重要】启用AOT+TreeShaking+Gzip大幅度压缩Angular2应用的体积

https://my.oschina.net/mumu/blog/830742

參考及引用上述文章

2017年5月19日星期五

Angular2 字串連接

在 Angular2 中
當字串連接的時候使用 ` 來取代 '
就可以不用多打字串連接的加號

例如
'<div></div>'+
'<div></div>'

↓

`<div></div>

<div></div>`

2017年5月13日星期六

VSCode 安裝的好用套件

Angular2 HTTP Ajax 完整檔案

import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpServiceService {

  // 定義 http 協定

  constructor(private http: Http) { };

  // 定義以 Post 的方法發出請求 (網址, 傳送參數)

  postRequest(url, data) {

    // 定義常數 headers 並且新增自定義 header

    const headers = new Headers();

    headers.append('Content-Type', 'application/json');

    headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

    // 定義常數 requestoptions 並且設定請求參數

    const requestoptions = new RequestOptions({

      method: RequestMethod.Post,

      url: url,

      headers: headers,

      body: JSON.stringify(data)

    });

    // 實際發出請求 並且判斷特定請求代碼

    return this.http

      .request(new Request(requestoptions))

      .map((res: Response) => {

        // 請求成功時 回傳 json

        if (res) {

          if (res.status === 201) {

            return res.json();

          } else if (res.status === 200) {

            return res.json();

          }

        }

      // 請求失敗時

      }).catch((error: any) => {

        if (error.status === 500) {

          return Observable.throw(new Error(error.status));

        } else if (error.status === 401) {

          return Observable.throw(new Error(error.status));

        }

      });

  }

  // 定義以 Get 的方法發出請求 (網址)

  getRequest(url) {

    // 定義常數 headers 並且新增自定義 header

    const headers = new Headers();

    headers.append('Content-Type', 'application/json');

    headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

    // 定義常數 requestoptions 並且設定請求參數

    const requestoptions = new RequestOptions({

      method: RequestMethod.Get,

      url: url,

      headers: headers

    });

    // 實際發出請求 並且判斷特定請求代碼

    return this.http

      .request(new Request(requestoptions))

      .map((res: Response) => {

        // 請求成功時 回傳 json

        if (res) {

          if (res.status === 201) {

            return res.json();

          } else if (res.status === 200) {

            return res.json();

          }

        }

      // 請求失敗時

      }).catch((error: any) => {

        if (error.status === 500) {

          return Observable.throw(new Error(error.status));

        } else if (error.status === 401) {

          return Observable.throw(new Error(error.status));

        }

      });

  }

}

Angular2 import Jquery

在 .ts 檔裡面 import 的後面加入這行

declare var $: any;

就可以讓 Angular2 不針對 Jquery 語法報錯誤訊息

訂閱：文章 (Atom)

Tony's Blogger

2017年9月19日星期二

解決使用注音輸入時選字按 Enter 會送出的問題

2017年8月1日星期二

C# Router 設定

2017年7月16日星期日

Angular2 表格分頁模組

2017年7月14日星期五

Angular2 Binary to File

2017年7月9日星期日

Base64 UTF8 Encoding

確認是不是假日

身分證檢查

遞迴取代文字

2017年5月29日星期一

Javascript 取得日期與時間

2017年5月23日星期二

Angular2 Ajax

2017年5月21日星期日

Angular2 上架專案的效能改善方法

使用AOT預編譯Angular2專案

2017年5月19日星期五

Angular2 字串連接

↓

2017年5月13日星期六

VSCode 安裝的好用套件

Angular2 HTTP Ajax 完整檔案

Angular2 import Jquery

remove last word from SQL query

2017年9月19日 星期二

2017年8月1日 星期二

2017年7月16日 星期日

2017年7月14日 星期五

2017年7月9日 星期日

2017年5月29日 星期一

2017年5月23日 星期二

2017年5月21日 星期日

使用AOT預編譯Angular2專案

2017年5月19日 星期五

↓

2017年5月13日 星期六

2017年9月19日星期二

2017年8月1日星期二

2017年7月16日星期日

2017年7月14日星期五

2017年7月9日星期日

2017年5月29日星期一

2017年5月23日星期二

2017年5月21日星期日

2017年5月19日星期五

2017年5月13日星期六