Coding...: 2019

2019年12月31日星期二

[ng] Angular　note

Angular　note

Angular CLI 實用指令
npm install -g angular-cli 安裝
ng --help 說明
ng new 建立新專案
ng g c 建立component
ng g p 建立pipe
...常用<schematic>：
class component directive enum guard interface module pipe service
ng serve --open 啟用網站

基本內容建立格式
1. Import
2. 修飾詞
3. Output

資料綁定 4種
{{}}
[property] = "value" : 屬性綁定
(event) = "hander" : 事件綁定
[(ngModel)] = "property" : 雙向綁定


<input [(ngModel)]="property">

<input [ngModel]="property">

<input (ngModelChange)="handler($event)">

裝飾結構說明
@Component :
@Pipes
@Directive :
結構型Structural Directives:*ngfor,
屬性型Attribute Directives:[(ngModel)]
@Injectable : Service 的裝飾器

Routing說明
forRoot
forChild
路由在查找的時候是有順序性:AppRoutingModule放後面
模組延遲載入 : ex.loadChildren: './feature/feature.module#FeatureModule'
預先載入 :頁面初始化的時候就把所有可延遲載入的模組透過背景非同步地下載
負責重新配置頁面中應該顯示哪些 Component
[routerLink]="['..', path.checkoutFlow.paymentInfo]" 回上層

其他:
Angular JIT vs AOT
Component 只負責處理畫面、資料綁定
Service 則負責像是取得資料、表單驗證等等的邏輯處理，

ref :
[Angular 深入淺出三十天] https://ithelp.ithome.com.tw/articles/10205808
custom pipes https://angular.io/guide/pipes#custom-pipes
[Angular 大師之路] https://ithelp.ithome.com.tw/articles/10203550
[Angular2速成班]用Angular CLI節省你的開發時間　https://dotblogs.com.tw/wellwind/2016/09/30/angular2-angular-cli
HTTP Cache 機制 https://blog.techbridge.cc/2017/06/17/cache-introduction/

好用擴充:
angular2-prettyjson

2019年12月20日星期五

[C#] 推薦分析程式工具

推薦暗黑大筆記 : 重構筆記 - .NET 壞味道補充包

裡面有NDepend 套件內的依些壞味道rule

一些常見的壞味道

1.一個類別太大 200行以上
2.方法太大太複雜
3.方法參數過多

還有很多值得學習與思考的地方
強烈推薦可以去研究看看

2019年12月19日星期四

[sql] 將特定欄位當作 column

最近遇到要把資料庫某個欄位當作 column 使用

所以就查詢了一下,目前有兩種方式

1.使用PIVOT, 轉置table, 但是原始column name 不能跟欄位裡面的值重複, 不然會出錯

說明: 先動態取得要轉置成column的欄位, ColumnGroup , 組成需要的字串, 再用PIVOT轉置TABLE

2019年12月13日星期五

[sql] 撈取所有DB 的所有TABLE

最近有個需求是直接給一張table, 但卻不知道在眾多DB的哪一個DB裡面

因此股哥到列出所有DB 及其 Table 並整理如下:

2019年11月21日星期四

[Nlog] 簡易config

<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd"
      autoReload="true"
      throwExceptions="false"
      internalLogLevel="Off" internalLogFile="c:\temp\nlog-internal.log">

  <!-- optional, add some variables
  https://github.com/nlog/NLog/wiki/Configuration-file#variables
  -->
  <variable name="myvar" value="myvalue"/>

  <!--
  See https://github.com/nlog/nlog/wiki/Configuration-file
  for information on customizing logging rules and outputs.
   -->
  <targets>

    <!--
    add your targets here
    See https://github.com/nlog/NLog/wiki/Targets for possible targets.
    See https://github.com/nlog/NLog/wiki/Layout-Renderers for the possible layout renderers.
    -->


    <target xsi:type="File" name="f" fileName="${basedir}/logs/${shortdate}.log"
            layout="${longdate} ${uppercase:${level}} ${message}" />
  </targets>

  <rules>
    <!-- add your logging rules here -->
    <logger name="*" minlevel="Trace" writeTo="f" />
    <!--
    Write all events with minimal level of Debug (So Debug, Info, Warn, Error and Fatal, but not Trace)  to "f"
    <logger name="*" minlevel="Debug" writeTo="f" />
    -->
  </rules>
</nlog>

補充：

如果想要自訂參數 ex.${event-context:item=Name}

程式中記得自訂log level 與參數即可

private static void WriteLog(string msg)
{
    LogEventInfo ei = new LogEventInfo(NLog.LogLevel.Trace, "", "");
    ei.Properties["Name"] = Guid.NewGuid();
    ei.Properties["msg"] = msg;
    logger.Log(ei);
}

config 加入 event-context 參數即可

    <target xsi:type="File" name="f" fileName="${basedir}/logs/${shortdate}/${event-context:item=appName}.log"
            layout="${longdate} |${uppercase:${level}}| ${event-context:item=msg}" />
  </targets>

[pdf] [C#] 網頁匯出PDF - PuppeteerSharp

最近遇到需要將頁面轉PDF

這裡推薦一個套件,真的滿厲害的

比起自己用itext刻快多了~

參考範例 :

特別說明,如果要讓pdf完整套用跟畫面一致,請記得設定參數唷
new PdfOptions() { PrintBackground = true, PreferCSSPageSize = true }

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
{
    Headless = true 
}))
{
    //參考頁面 https://www.puppeteersharp.com/api/PuppeteerSharp.ScreenshotOptions.html
    using (var page = await browser.NewPageAsync())
    {
        
        var loginPath = $"https://google.com";
        await page.GoToAsync(loginPath);
        await page.EmulateMediaTypeAsync(PuppeteerSharp.Media.MediaType.Screen);
        //透過SetViewport控制視窗大小決定抓圖尺寸
        await page.SetViewportAsync(new ViewPortOptions
        {
            Width = 1024,
            Height = 768
        });
 
        var outputFile = $"test.pdf";
        await page.PdfAsync(outputFile, new PdfOptions() { PrintBackground = true, PreferCSSPageSize = true });
 
    }
}

參考

黑暗blog :https://blog.darkthread.net/blog/headless-chrome/

Api說明 : https://www.puppeteersharp.com/api/PuppeteerSharp

2019年10月25日星期五

[deploy] 遠端發佈 error - 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”

錯誤訊息 : 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”

解法 : 發現結果是沒有安裝 .net 4.6, 再安裝即可

1.進windows功能啟用 .net 4.6

2.管理者權限進入 cmd

32位元：C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i

64位位元：C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe -i

ref :https://www.cnblogs.com/mrma/p/3529859.html

2019年10月18日星期五

[sql] 切開同一欄位用逗點隔開的資訊

遇到一個狀況，資料庫顯示為

| CODE |   FK    |
-----------------------
|  A  |   1,2,3 |

我需要轉如下才能關聯....

| CODE |  FK   |
-----------------------
|  A  |     1 |
|  A  |     2 |
|  A  |     3 |

解法 :
參考 : https://stackoverflow.com/questions/13527537/sql-query-to-split-column-data-into-rows

先建立sql function

create FUNCTION [dbo].[Split](@String varchar(MAX), @Delimiter char(1))       
returns @temptable TABLE (items varchar(MAX))       
as       
begin      
    declare @idx int       
    declare @slice varchar(8000)       

    select @idx = 1       
        if len(@String)<1 or @String is null  return       

    while @idx!= 0       
    begin       
        set @idx = charindex(@Delimiter,@String)       
        if @idx!=0       
            set @slice = left(@String,@idx - 1)       
        else       
            set @slice = @String       

        if(len(@slice)>0)  
            insert into @temptable(Items) values(@slice)       

        set @String = right(@String,len(@String) - @idx)       
        if len(@String) = 0 break       
    end   
return 
end;

然後下以下sql 句即可
select t1.Code, s.items FK
from [table] t1
outer apply dbo.Split(t1.FK, ',') s

outer apply : 說明參考 https://ithelp.ithome.com.tw/articles/10195219

2019年10月16日星期三

deadlock 相關蒐集

開始之前先補充一下,查詢專案sql使用狀況,可以用SSMS的活動監控器

接下來就可以觀察最近使用次數最多或是最耗時的sql, 進而觀察table的使用情況

---

最近上完非同步後,認識後deadlock, 多發生於呼叫非同步方法後,結果尚未回傳,, 就又用同步的方式去要結果導致 (ex. .Result)

這次在專案log發現deadlock, 檢查後發現,卻是sql 查詢時, datareader 查詢較久導致, 所以找一些相關文獻如下, 目前推測的狀況應該就是sql查詢使用到平行查詢,才導致deadlock情況

做個紀錄

目前看到幾個解決方式 :

1.修正SQL
2.不使用平行執行計畫。
3.maxdop=1。
4.用try catch(Error 1205 is a deadlock)預防處理死結。
等等

參考內容 :
[SQL Server][Deadlock]Intra-Query Parallel Thread Deadlocks初體驗
https://dotblogs.com.tw/stanley14/2017/07/22/intra-queryparallelthreaddeadlocks

[SQL Server][DeakLock]觀察死結的工具(四)擴充事件(Extended events)
https://dotblogs.com.tw/stanley14/2017/01/28/191015

限定資料表僅能用 Table Lock
https://byronhu.wordpress.com/2011/05/18/%e9%99%90%e5%ae%9a%e8%b3%87%e6%96%99%e8%a1%a8%e5%83%85%e8%83%bd%e7%94%a8-table-lock/

[SQL SERVER]內部平行查詢死結特性
https://dotblogs.com.tw/ricochen/2016/08/25/191618

2019年9月25日星期三

[angularJs] popup 使用 : angular-ui

使用 : angular-ui

預覽參考 : https://plnkr.co/edit/?p=preview

1. 加入ui-bootstrap-tpls-2.5.0.min.js
2. module include ui.bootstrap
3. 加入$uibModal
4. 建立fn openMyModalView
5. 建立template controller

<script type="text/ng-template" id="DetailView.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <ul>
            <li ng-repeat="item in ctrl.items">
                <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ ctrl.selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="ctrl.cancel()">Cancel</button>
    </div>
</script>
    <script>
    var DefaultApp = angular.module("Default", ['ngTable','ui.bootstrap']);
    DefaultApp.controller('RegistrationController',
        ['$scope', '$http', 'NgTableParams', '$uibModal', function ($scope, $http, NgTableParams, $uibModal) {
            console.log("test12")
 
            var self = this;
            self.List = @Html.Raw(ViewBag.Registration);
            console.log(self.List);
 
            //初始化
            self.Init = function()
            {
                self.tableParams = new NgTableParams({ count: 50 }, { dataset: self.List });
            }
            self.Init();
 
             //方法
            // ref : https://angular-ui.github.io/bootstrap
            self.openMyModalView = function (item) {
                var modalInstance = $uibModal.open({
                    templateUrl: 'DetailView.html',
                    controller: 'UserDetailCtrl as ctrl',
                    resolve: {
                        item: function () {
                            return item;
                        }
                    }
                });
 
                modalInstance.result.then(function (obj) {
                    console.log(obj)
                }, function () {
                    $log.info('modal-component dismissed at: ' + new Date());
                });
            };
 
            self.SaveHandWrite = function () {
                console.log(self.Edit);
            }
    }]
);
    //popup 事件
    angular.module('Default').controller('UserDetailCtrl', function ($uibModalInstance, item) {
        console.log(item);
        var $ctrl = this;
 
        item.Name = "test";
 
        $ctrl.ok = function () {
            $uibModalInstance.close(item);
        };
 
        $ctrl.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    });
    </script>

訂閱：文章 (Atom)

網頁

2019年12月31日 星期二

2019年12月20日 星期五

2019年12月19日 星期四

2019年12月13日 星期五

2019年11月21日 星期四

2019年10月25日 星期五

2019年10月18日 星期五

2019年10月16日 星期三

2019年9月25日 星期三