相關參考
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;
});

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
 

AddPageDebugMessage 造成購物車變慢.

因為有發現主要時間是花在 Coupon 的處理, 研突了半天, 覺得之前丟出來的 Debug 訊息太多, 所以我想把所有 coupon 處理時丟出來的 Debug 訊息關掉, 一個一個慢慢打開來看看哪一個步驟造成問題. 突然發現它就好了.

後來想想, 應該是因為我們把 Debug 訊息合併成大字串造成的, 這個花費的總時間會以 coupon 數量的平方或三次方的速度成長.  當 Coupon 的數量變多時, 花費的時間會成長的很快. 因為要夠多上線的 coupon 才會造成這個問題, 所以之前的測試都沒有發現這類的問題.

購物車中有用到 AddPageDebugMessage 請改成成使用  arraylist 的版本. 理論上會是固定時間, 另外還有做了一個開關, 要用定參數才會開啟 AddPageDebugMessage 的功能.

這兩天發現的現象。有點不好找錯，所以紀錄一下
因為制式報名頁面使用 ajax form 物件，但 ios 的 safari 一直發生資料有送出，
但是送出後網頁就不跑success後面的 javascript，例如彈跳訊息及導到下個頁面
一開始debug的方向有點猜錯，所以花了點時間找問題
後來才注意到，原來他跑到 ajax error去了，不是 ajax success
直覺可能是 ContentType 的問題，因為預設是 text/html
結果 Response.ContentType 改 application/x-javascript, 就過了  (WTF)
我猜 application/json 應該也沒問題吧
------------------------------
經查證: application/json 比較正確 



 

使用Android手機透過facebook開啟網頁
發現圖片無法出現的問題 如下圖：



使用IOS手機開啟卻是正常的

可能是因為開啟的網站為SSL加密的關係
圖片連結若為http的話會被Facebook擋掉
將圖片連結改為https後就正常了

點選開始結帳卻發現觸發後面商品數量的select按鈕
若select z-index=200 則蓋在上面的按鈕則z-index=201
上面的z-index要比下面的z-index大
就可以解決了

 

轉換文章內容成為excel 檔案的時候
發生的錯誤
網路上查都好像是跟圖片有關的錯誤
後來才確認是 emoji 的問題
文章裡有出現

🙋‍♀️🙋‍♀️🙋‍♀️

這種東西 

SQL:
SQL 好像也沒辦法完美的取代 ( 如果有辦法對準是哪個字元就可以 但如果是一個字串好像會無法取代)
只有剛好對到那個字元開頭時才能換
NCHAR(65039)  NCHAR(8205)

Select TOP 10 
Replace(SUBSTRING(content,10,15),NCHAR(65039) ,'XX') ,                                    ---HongKong‍️‍️‍️🙋‍♀️怎
REPLACE(SUBSTRING(content,17,8),NCHAR(65039),'OO')                                        ---OO怎 
FROM [Table] 


C#
最後回到C#來處理
首先用 把string  .ToArray() 變成char
找出字元後 轉成 int 來確認要怎麼表達這個 char
最後結果就變成>>
Convert.ToInt32(Table.Rows[0]["Content"].ToString().ToArray());
之後直接變成 char去取代
row["mycolumn"].ToString().Replace((char)65039, ' ').Replace((char)8205, ' ');
然後就暫時 沒錯誤了
只是這網站一直再更新
https://emojipedia.org/unicode-12.0/

所以未來可能還會有新的問題
目前還不知道甚麼快速的解法







 

<a class="del" href="#" data-yano="1250453286" data-pdno="04360003">

    <img src="/TC/template/Shopping/images/del.png" alt="">

</a>

用 $(".del").data("pdno") 會回傳 4360003
被這個搞了好久..

要避免這個問題, 可以使用 attr  來代替 data
$(".del").attr("data-pdno")

錯誤訊息如下, 完全沒有錯誤訊息, 以及沒有錯誤的程式碼位置

 <Item time="2016-01-11T05:39:01" page="/fr/iconic-bright-cushion-spf-50-pa-nude-perfection-compact-foundation/p/5490/c/30"

url="http://www.shopunt.com/fr/iconic-bright-cushion-spf-50-pa-nude-perfection-compact-foundation/p/5490/c/30?utm_source=edm&amp;utm_medium=email&amp;utm_content=20160107_cushion_4&amp;utm_campaign=makeup&amp;OutAD_Id=5825" username="Not Member" browserName="Chrome" browserVersion="34.0" userAgent="Mozilla/5.0 (Linux; Android 5.1.1; SAMSUNG SM-N915FY Build/LMY47X) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.1 Chrome/34.0.1847.76 Mobile Safari/537.36" RemoteIP="37.160.206.7" Ref="No Ref" RequestType="GET" Ver="3">

    <ErrMsg>

    </ErrMsg>

    <ErrStack> 於 System.Web.CachedPathData.ValidatePath(String physicalPath)

於 System.Web.HttpApplication.PipelineStepManager.ValidateHelper(HttpContext context)</ErrStack>

    <Post>

    </Post>

    <Cookie>

    </Cookie>

</Item>

查了一下，原來網址後面多了空白 (%20) , 也就是 ? 前面多了空白
只是exception物件會自作聰明把他濾掉了，反而從 exception log 看不到資料
測試過，userd可以正常看網站，只是server會有不斷 excetion產生，有點煩
網路上雖有一些解法，但我想還是要求下廣告時，要注意網址問題


 

這是指網址列的參數未經處理直接丟回頁面造成的問題.

例如 a.aspx 中, 參數 R 會被丟回頁面, 則 <a href='http://yahoo.com/a.aspx?R=<script>...</script>'>Yahoo 大拍賣</a> 這種網址放在某人的 blog 中, 點選的人已登入 yahoo, 那就中奬了, script 中的程式可以把你的 cookie 丟到其它的網站去, 或是用你的身份做一些其它的事情..