今天發生一個SQL奇怪的現象，記錄一下
就是訂單列表(使用分頁的SQL 找出 top 20)跑很久才出來，大約10多秒 
SQL指令條件僅有訂單日期(預設是1年內訂單，訂單總數有130萬筆)，而訂單日期也有做index
之前都大約1~2秒就出來，這一兩天卻要10秒才跑出來

用執行計畫評估功能查也看不出哪裡有問題，把一些子查詢拿掉也沒有改善
所以就改一下搜尋條件，改搜尋半年內訂單，大約 5秒
改搜尋兩年內訂單，1秒!!! 真是神奇，把條件區間拉大反而很快???????
直覺上覺得索引table是不是太大太亂了，剛好看到CreateDate索引有個重建按鈕
就勇敢把他按下去，想說會不會跑很久，結果重建只要不到1秒就好了
然後神奇的事發生了，訂單列表不須一秒就顯示出來啦!

SQL 指令大概長這樣

Select * from (

Select Top 20 * from (

select Top 20 a.*

--, CompelteOrderId= (select top 1 K.Id from packing_list_main k With(NoLock) join Order_Main p With(NoLock) on k.Order_Id=p.Id where k.En_Packing_List_Status=300 and P.MEmber_Id=a.Member_Id )

--, [MemoCount_前台問題] = (Select COUNT(*) from Order_Memo With(NoLock) where Order_Memo.Order_Id = a.Id and Memo_Type = 1)

--, [MemoCount_業務備註] = (Select COUNT(*) from Order_Memo With(NoLock) where Order_Memo.Order_Id = a.Id and Memo_Type = 3)

--, [MemoCount_系統檢查] = (Select COUNT(*) from Order_Memo With(NoLock) where Order_Memo.Order_Id = a.Id and Memo_Type = 4)

--, QnACount = (select count(*) from Order_QnA With(NoLock) where Order_Id = a.Id)

from V_Order_Main_For_Admin_List a With(NoLock) left join Member b with(NoLock) on a.Member_Id=b.Id where (1=1) and En_Order_Status <> -300 and a.Create_Date >='2018-06-20' order by Id Desc

) AS T1 order by Id

) AS T2 order by Id Desc

參考 will will web 的舊文章，原來定期把索引整理整理，也是要記得做的。
不過週期上我想 1季或半年跑一次應該就可以了
-------------------------------------------------------------------
後記: 2020/6/22 -  一年後又發生一樣的狀況，真是神奇
這次 OrderMain CreateDate 沒有很分散。只有 2.X %
想說其他 index 是不是該重建，但是都沒有效果
最後只好重建 CreateDate --> 結果居然解決了

看 2021年會在發生嗎?

 

先寫幾個, 有空再整理.

1. Upload Folder 的執行權限要關閉
2. 在HTTP Header加入X-Frame-Options: DENY或SAMEORIGIN。
3. web.config 的 connection string 和 app setting 要加密

如下, 要記得修改 database_name, userOLD, userNEW 三個參數

CREATE TABLE #Command

    (

    Id int NOT NULL IDENTITY (1, 1),

    command nvarchar(MAX) NOT NULL

    )  ON [PRIMARY]

     TEXTIMAGE_ON [PRIMARY]

GO



USE database_name  -- Use the database from which you want to extract the permissions

GO



SET NOCOUNT ON



DECLARE @OldUser sysname, @NewUser sysname



SET @OldUser = 'userOLD' --The user or role from which to copy the permissions from

SET @NewUser = 'userNEW' --The user or role to which to copy the permissions to



insert into #Command(command)

Select convert(nvarchar(max), '--Database Context')



insert into #Command(command)

SELECT 'USE' + SPACE(1) + QUOTENAME(DB_NAME())



insert into #Command(command)

SELECT '--Cloning permissions from' + SPACE(1) + QUOTENAME(@OldUser) + SPACE(1) + 'to' + SPACE(1) + QUOTENAME(@NewUser)



insert into #Command(command)

SELECT 'EXEC sp_addrolemember @rolename ='

    + SPACE(1) + QUOTENAME(USER_NAME(rm.role_principal_id), '''') + ', @membername =' + SPACE(1) + QUOTENAME(@NewUser, '''') AS '--Role Memberships'

FROM    sys.database_role_members AS rm

WHERE USER_NAME(rm.member_principal_id) = @OldUser

ORDER BY rm.role_principal_id ASC



insert into #Command(command)

SELECT CASE WHEN perm.state <> 'W' THEN perm.state_desc ELSE 'GRANT' END

    + SPACE(1) + perm.permission_name + SPACE(1) + 'ON ' + QUOTENAME(USER_NAME(obj.schema_id)) + '.' + QUOTENAME(obj.name)

    + CASE WHEN cl.column_id IS NULL THEN SPACE(0) ELSE '(' + QUOTENAME(cl.name) + ')' END

    + SPACE(1) + 'TO' + SPACE(1) + QUOTENAME(@NewUser) COLLATE database_default

    + CASE WHEN perm.state <> 'W' THEN SPACE(0) ELSE SPACE(1) + 'WITH GRANT OPTION' END AS '--Object Level Permissions'

FROM    sys.database_permissions AS perm

    INNER JOIN

    sys.objects AS obj

    ON perm.major_id = obj.[object_id]

    INNER JOIN

    sys.database_principals AS usr

    ON perm.grantee_principal_id = usr.principal_id

    LEFT JOIN

    sys.columns AS cl

    ON cl.column_id = perm.minor_id AND cl.[object_id] = perm.major_id

WHERE usr.name = @OldUser

ORDER BY perm.permission_name ASC, perm.state_desc ASC



insert into #Command(command)

SELECT CASE WHEN perm.state <> 'W' THEN perm.state_desc ELSE 'GRANT' END

    + SPACE(1) + perm.permission_name + SPACE(1)

    + SPACE(1) + 'TO' + SPACE(1) + QUOTENAME(@NewUser) COLLATE database_default

    + CASE WHEN perm.state <> 'W' THEN SPACE(0) ELSE SPACE(1) + 'WITH GRANT OPTION' END AS '--Database Level Permissions'

FROM    sys.database_permissions AS perm

    INNER JOIN

    sys.database_principals AS usr

    ON perm.grantee_principal_id = usr.principal_id

WHERE usr.name = @OldUser

AND perm.major_id = 0

ORDER BY perm.permission_name ASC, perm.state_desc ASC



Select command from #Command order by Id

drop table #Command

使用範例如下:

    void getList()

    {

        var Q = TN.Admin.TCatOrderDeliveryRecord.Select().OrderBy("DeliveryCompletion_Date, Id Desc");



        if (U2.WU.IsNonEmptyFromQueryStringOrForm("OD00"))

        {

            Q.And("OD00 = ", U2.WU.GetValue("OD00"));

        }



        if (U2.WU.V.StartDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date >= ", U2.WU.V.StartDate);

        }



        if (U2.WU.V.EndDate_IsOK)

        {

            Q.And("DeliveryCompletion_Date < ", U2.WU.V.EndDate);

        }



        U2.JSON.WriteSuccessData(Q.GetPageDT2(U2.WU.V.CurrentPage, U2.WU.V.PageSize));

    }

V 是 Value 的意思, 這裡放各種常用的上傳參數

U2.WU.V.CurrentPage  可以取代 U2.WU.GetIntValue("currentPage")
U2.WU.V.PageSize  可以取代 U2.WU.GetIntValue("pageSize")
U2.WU.V.Id  可以取代 U2.WU.GetIntValue("Id")
U2.WU.V.Action  可以取代 U2.WU.GetIntValue("Action")

歡迎繼續擴充哦..

相關參考
https://vuejs.org/v2/guide/

1.
加入vue.js

2.
先"包裹"一層 要用到Vue的元素
個人覺得有點想原本習慣的<!--Content-->
但這次只要放入標籤(我是用Id)
像是範例為 vMain   
然後宣告js 物件 我是取名也叫做 vMain 不知道會不會有撞名問題
所以我的el: 就是 #vMain

3.
再來加入變數
{{Creat_Date}}  兩個括號 桃紅色的
如果data 這個物件裡面有一個叫Creat_Date 的資料他就會被放進去

這樣第一個app 就完成了。

其中 Vue 裡面包含幾樣東西 
el >> 標示 這個Vue 的標籤
data >> 裡面存放的資料變數
created >> 生命週期的
methods>>包含各種功能function

這次的列表頁需要用到以前用的 List Item 跟 Pager
對應到vue 會使用到
v-for for 迴圈
v-for" item in dt  ">> dt 為data中的一個array陣列 (此範例中 為PD 中的 DT)
item 則是在這裡的區域變數

有些要顯示有些要隱藏
v-if
v-if" pager.currentPage  > 1" pager 為data 中的一個物件 裡面有包含 currentPage 的變數

還有要傳ajax 回去要資料
所以要在 vue 中的 methods 建立 function
已這次的例子 getList就是目前的function 可以用到一些 data 裡面的資料
回傳成功之後資料也可以回寫在data上面

以及之前會在各種事件的觸發 
@click 觸發點擊事件
在標籤上加上 @click 可以觸發 類似 onclick 的事件 
但是是調用methods裡面function

日期格式
由於之前的套件PD 回傳的日期資料會是 yyyy-MM-ddTHH:mm:ss 這樣的格式
所以使用了 map  將 dt 裡面的日期 轉換成為我要的格式

v.dt.map(function (obj) {
      var rObj = obj;
      rObj["Create_Date"] = $.datepicker.formatDate('yy-mm-dd', new Date(obj["Create_Date"]));
      return rObj;
});

1. Asp.Net Session 會造成 Block
2. ashx 和 aspx 在 Session 的預設值是不同的.
3. Clinet 的非同步和 Session 造成的 block 的差異
4. 靜態物件也會互相等待(Browser concurrent connetion 的限制, Edge:8個 Connection, Chrome: 6 個, 2019/4 的測試)
5.ashx 和 aspx 的 session 閞關方式.
6. asp.net 的 session 是看 Cookie, 嘗試做 session hijack

額外追加: 服務的三個 Level(告知, 陪同完成, 詢問並給予進一步的建議)

過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

A下拉霸
 <div class="col-md-6">
                                        <label for="contact:fromlan">Source Language <span class="red">*</span></label>
                                        <div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
                                            <!--FromLanItem S-->
                                            <div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
                                            <!--FromLanItem E-->
                                        </div>
                                    </div>

自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值

套件來源
http://bootstrapformhelpers.com/select/

B電話號碼
<label for="contact_department">Your Phone Number </label>
                                        <div>
                                            <input id="phone" name="phone" type="tel">

                                        </div>
                                        <div style="display:none">
                                            <input id="PhoneCountry" name="PhoneCountry" type="">
                                        </div>


                                        <script src="/assets/build/js/intlTelInput.js"></script>
                                        <script>
                                            var input = document.querySelector("#phone");
                                            var iti1 = window.intlTelInput(input, {
                                                // allowDropdown: false,
                                                // autoHideDialCode: false,
                                                // autoPlaceholder: "off",
                                                // dropdownContainer: document.body,
                                                // excludeCountries: ["us"],
                                                // formatOnDisplay: false,
                                                // geoIpLookup: function(callback) {
                                                //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                                //     var countryCode = (resp && resp.country) ? resp.country : "";
                                                //     callback(countryCode);
                                                //   });
                                                // },
                                                // hiddenInput: "full_number",
                                                // initialCountry: "auto",
                                                // localizedCountries: { 'de': 'Deutschland' },
                                                // nationalMode: false,
                                                // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                                                placeholderNumberType: "MOBILE",
                                                // preferredCountries: ['cn', 'jp'],
                                                separateDialCode: true,
                                                utilsScript: "/assets/build/js/utils.js",
                                            });
                                            input.addEventListener("countrychange", function () {
                                                $('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
                                                // do something with iti.getSelectedCountryData()
                                            });
                                        </script>

需要用另一個欄位來記錄電話號碼的國家資料 

套件的來源
https://github.com/jackocnr/intl-tel-input
 

 
1. 從最外層找 Security(安全性) > 確認有bulkadmin

2. 從最外層找 Logins(登入) > 會使用 Bulk Inset 的帳號 
3. 右鍵點選Properties (屬性) > 點選 ServerRoles (伺服器角色)
4. 勾起 bulkadmin > Ok 即設定完成