[2022.LEARN.020][筆記]javacript UUID

 

crypto.randomUUID()

[2022.LEARN.019][筆記]重設防火牆dns等設定

問題：

1.微軟相關服務，帳號認證都有些問題。服務常斷線。

2.安裝部分程式會出現，出現"SmartScreen 篩選工具目前無法使用"。

解法：
參考網址：https://answers.microsoft.com/zh-hant/windows/forum/all/window-10/69a37fa9-f689-4e0e-83db-0f31aa081173

重設防火墻，或者，搜cmd 右鍵點擊，選擇以系統管理員身份運行，分別執行下面命令重設網路協議。

Netsh int ip reset

Netsh winhttp reset proxy

Netsh winsock reset

Netsh advfirewall reset

Ipconfig /flushdns

--其他方法

ipconfig /all  看看DNS 是不是 1.1.1.1 跟 8.8.8.8

如果是 使用 ipconfig /renew 重抓

--用Edge登入，或預設瀏覽器看看吧!!

[2022.LEARN.018][NOTE][SHOPEE]蝦皮訂單狀態(API)

參考：

• https://ithelp.ithome.com.tw/articles/10285209
• shopee api

狀態：這裡列出API活報的資料中，出現的狀態集合

• IN_CANCEL：提出取消?(有出現在LOG但沒有在蝦皮流程表中。)
• SHIPPED：物流中
• READY_TO_SHIP：付款後準備出貨
• COMPLETED：訂單完成(可能生命週期結束)
• PROCESSED：安排物流
• TO_CONFIRM_RECEIVE：標記收到貨
• CANCELLED：已取消
• UNPAID：未付款(可能開始的狀態)
• TO_RETURN：退貨
• RETRY_SHIP：投遞失敗，可能會回到準備出貨。(這筆也沒在LOG中出現過)

[2022.LEARN.017][TSQL][筆記]rownumber自然排序

 row_numer() over (order by select 1)

[2022.LEARN.016][筆記]Web API Controller可以Partial嗎?

問題：

• 同事問：Web API Controller太肥太多方法(主要是不好查)。
• 不想改路由的情況下，可以像patial class那樣使用嗎？

方法：

• public partial class TestController:ApiController{程式一}  
• public partial class TestController:ApiController{程式二}
• 就是兩個controller都加上partail就可以(當然.cs的檔名要不同或是分開目錄放)。
• 若有使用[RoutePrefix("Test")]，只要其中一個Controller有設定就可以。
  
  

[2022.LEARN.015][筆記]base64影像在safari瀏覽器上無法呈現

問題：Html Image使用base64影像的網址，Chrome等瀏覽器正常，但Safari卻無法呈現。
            ex:<img src='data:image/png;base64,iVB....' >

參考：

•  https://stackoverflow.com/questions/27396376/base64-image-tag-in-safari-did-not-showed-up
• 其中提到的解法：
  // Add an actual base64 string
  var encodedImgString = 'data:image/png;base64,iVBORw0KGgoAAA...';
  // Create an image, set img source and cross origin attribute
  var iosImg = new Image;
  iosImg.src = encodedImgString;
  iosImg.crossOrigin = 'Anonymous';
  // Change this to target your element and add it wherever you need it to appear document.body.appendChild(iosImg);
  
  

解法：

1. 前端處理起來麻煩的話，可能會取向改後端產生圖片網址。
2. 文中的解法是new一個Image的物件，然後把Image物件加到畫面。

[2022.LEARN.014][筆記]Sendgrid發送信件的狀態

參考：

• https://docs.sendgrid.com/ui/analytics-and-reporting/email-activity-feed
• https://sendgrid.com/blog/the-nine-events-of-email/
• https://www.activecampaign.com/blog/email-bounce
• https://www.socialmediatoday.com/content/8-reasons-emails-bounce

原文：

• Processed：
• Requests from your website, application, or mail client via SMTP Relay or the API that SendGrid processed.
• 當SendGridAPI新增將觸發此事件，(第一個事件)，除非信件被判斷為dropped。
• Clicks：
• Whenever a recipient clicks one of the Click Tracked links in your email. In the Email History, SendGrid displays the date, time, and the URL for the link that was clicked.
• 信件連結被點擊了。（理論上應該是收到信才有可能觸發）
• Delivered
• The accepted response generated by the recipients' mail server.
• 此事件不保證接收伺服器接收到信件，只是標記已經傳送信件。
• 後續還有相關狀態回報。
• Delivered、Bounced、Blocked、Deffered
• Opens
• The response generated by a recipient opening an email.
• 信件被打開了。（理論上應該是收到信才會打開）
• Unsubscribes
• Whenever a recipient unsubscribes from your emails.
• Group Unsubscribes
• Whenever a recipient unsubscribes from a suppression group.
• Group Resubscribes
• When a recipient resubscribes themselves to a suppression group.
• 
  
• Deferred
• The recipient mail server asked SendGrid to stop sending emails so fast.
• 收件郵件伺服器要求SendGridd停止短時間快速送信。
• Drops
• SendGrid will drop an email when the contact on that email is in one of your suppression groups, the recipient email previously bounced, or that recipient has marked your email as spam.
• SendGrid將會【Drop】信件的幾種情況。
• 當你的聯絡人Email在黑名單(禁止群)中。
• 或是該收件人之前被【bounce】。
• 或是email被收件人標記為垃圾郵件。
• Bounces
• The receiving server could not or would not accept the message. If a recipient has previously unsubscribed from your emails, your attempt to send to them is bounced.
• 接收服務器無法接收此訊息。
• 如果收件人之前已取消訂閱您的電子郵件，您發送給他們的郵件將被【bounce】退回。
• 常見：
• 軟退回:可能臨時無法寄送成功，會嘗試重送。
• 郵箱已滿。
• 夾檔附件太大。
• 伺服器以關閉。
• 收件方啟用自動回覆。
• 硬退回:無效的電子郵件，不重送。
• 假信箱：故意提供假的信箱。
• 驗證規則可能就可以判斷。
• 不正確：打錯了。
• 不小心拚打錯，驗證可能可以通過。
• abc@gmail.com->abv@gmail.com
• 被阻止：政府機關可能會擋某些網域的郵件。
• 可能要加入白名單之類。
• 黑名單:被列入黑名單。
• 8個原因：
• 垃圾郵件過濾器
• 被管理者擋掉(Individual Server Administrators)
• 主題出現「免費」、「訂閱」、類似詐騙信件、只有主旨沒有內容等。
• Subject starts with “Free”
• Contains, “If you want to subscribe...”
• Offers a full refund
• Claims you have provided permission
• “See for yourself”
• Subject is all capitals
• Message is 0% to 10% HTML
• HTML title contains no text
• “Free Preview”
• 自然消亡(Natural Database Decay):企業，離職或是網域消失。
• 臨時無法交付(Temporary Un-deliverables):信箱滿了，夾黨太大，臨時狀況拒絕電子郵件，會發生軟退回(退回重送)。
• 無效地址(Invalid Addresses):地址無效，發生硬退回(不重送)。
• 不小心打錯或是故意填錯。
• 發信人信譽(Sender Reputation)：網域或郵件不被信任。
• 列入黑名單ip(Blacklisted IP Ranges)
• 不斷發展業界標準（evolving  industry standards)
• Blocks
• When your IP address has been blocked by an ISP or messaging organization. Blocks are less severe than bounces and do not result in permanent suppressions: subsequent sends to blocked email addresses are not automatically suppressed.
• 當你的IP位置被ISP或 messaging organization 【block】。
• 【Block】不像【bounce】那麼嚴重，不會導致永久禁止。
• 後續發送的已被block的信件也不會自動禁止。
• Spam Reports
• Whenever a recipient marks your email as spam and their mail server tells us about it.
• 收件人將您的email標記為垃圾郵件，他們的mail  server回傳告知。

筆記：自己依流程定義

• processed：已處理
• delivered：已送達
• open：開啟郵件
• click：開啟信件連結
• deferred：異常重送
• bounce：駁回重送'--rejected by the receiving mail server
• blocked：駁回
• dropped：被排除
• success：發送成功
• fail：發送失敗

正常流程：processed-->delivered(-->open開啟信件表示受件人有讀取到信)

[2022.LEARN.013][筆記]html5上傳圖片轉base64預覽

 範例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  

</head>

<body>

    <div class="container">

    <label>圖片預覽:</label>

    <div id="previewDiv">

     

    </div>

    <!-- IMG.END -->

    <button type="button">

      上傳相片

    </button>

    <input type="file" id="upimg" accept=".png, .jpg, .jpeg" onchange='imgUploadCheck(this)' />

    <button type="button" id="btnRemovePic"

            class="am-btn am-btn-default am-radius am-btn-sm" style="display:none">移除圖片</button>        

 

  </div>

  <script>

    $(function(){

   

    });

    //圖片上傳檢查

    /* 1.只能是jpg/jpeg  2.檔名只接受小寫英文、數字、底線、連字號  3.不可超過150KB*/

    function imgUploadCheck(input){

      //清空網址上傳欄位

      /*$('#upimg').val('');

      $('#img_previewPic').attr({

        src: ''

      });

      $('#imgErrorTip').html('').hide();*/

      var file = $(input)[0].files;

      //為空值>重置

      if(file.length==0){

        $('#btnRemovePic').click();

        $(input).parent().removeClass('am-form-error');

        $('#imgErrorTip').html('').hide();

        return false;

      }

      var fileName = file[0].name;

      var fileType = file[0].type;

      var fileSize = file[0].size;

      console.log(file,fileType,fileSize);

      var typeRule = ["image/jpg", "image/jpeg", "image/png"];

      if ($.inArray(fileType, typeRule) < 0) {

        alert(input,'檔案格式不符，請上傳 jpg/png 檔案');

        return false;

      }

      if((fileSize/1024) > 150){

        //lert('圖片大於150KB');

        $("#previewDiv").empty(); // 清空當下預覽

        previewFiles(file) // this即為<input>元素

        //--------------

      }

      else{

        console.log('圖片OK');

        $("#previewDiv").empty(); // 清空當下預覽

        previewFiles(file); // this即為<input>元素

      }

    }

    // 預覽圖片，將取得的files一個個取出丟到convertFile() ,IE不支援

    function previewFiles(files) {  

      console.log('previewFiles',files);

      if (files && files.length >= 1) {

        $.map(files, file => {

          convertFile(file)

            .then(data => {

              console.log(data) // 把編碼後的字串輸出到console

              showPreviewImage(data, file.name)

            })

            .catch(err => console.log(err))

        })

      }

     

    }

    // 在頁面上新增<img>

    function showPreviewImage(src, fileName) {

        /*let image = new Image(250) // 設定寬250px

        image.name = fileName

        image.src = src // <img>中src屬性除了接url外也可以直接接Base64字串

        $("#previewDiv").append(image).append(`<p>File: ${image.name}`)*/

        $('#div_previewPic').show();

        $('#btnRemovePic').show();

        $("#previewDiv").html('');

        $("#previewDiv").html('<a href="'+src+'" data-fancybox="gallery">\

          <img src ="'+src+'" alt ="'+fileName+'" width="250"/></a>\

          <p>檔案：'+fileName+'</p>');

    }

    // 使用FileReader讀取檔案，並且回傳Base64編碼後的source ,IE不支援(2022-06-15停用)

    function convertFile(file) {

      return new Promise((resolve,reject)=>{

          // 建立FileReader物件

          let reader = new FileReader()

          // 註冊onload事件，取得result則resolve (會是一個Base64字串)

          reader.onload = () => { resolve(reader.result) }

          // 註冊onerror事件，若發生error則reject

          reader.onerror = () => { reject(reader.error) }

          // 讀取檔案

          reader.readAsDataURL(file)

      });

    }

  </script>

</body>

</html>

[2022.LEARN.012][MAUI]微軟跨平台開發MAUI-02-建置為Windows模式

參考：https://docs.microsoft.com/zh-tw/dotnet/maui/windows/setup

除了Android模式，這次改為建置Windows模式。

但出現以下訊息：

這邊需要將【開發人員模式】啟用。

執行建置，就可以成功看到結果：

[2022.LEARN.011][MAUI]微軟跨平台開發MAUI-2022年5月新發表

參考：

• .net maui-建置您的第一個應用程式

筆記：Windows Visual Studio 2022 17.3 Preview中啟用安裝.net maui功能。

• 安裝後新增專案時就可以看到相關的範本。
• 這邊案例使使用.net maui app(應用程式)。
• 開發過程中，建置專案時會讓你選擇模擬器(以android為例)。
• 沒安裝模擬器，過程會引導安裝套件。
• 啟用偵錯，初次會引導Android裝置管理員。
  

• 新增有一些預設的手機裝置可以選擇：預設為pixel5
  
  過程中會下載建置環境，下載完成後可直接【啟動】。
  
  或是關閉模擬器管理。使用上方建置的功能。
  
• 初次設定，會引導啟用hyper-v功能。【繼續執行】
  
  安狀過程或是啟動時有問題(表示需要安裝Hyper-V)
  
  未啟用hyper-v，啟動時就會是黑屏。
  
• 啟動中，啟動桌面需要一段時間。
  

• 啟動後須要等一段時間預設的程式才會開啟。
  
  
  
• 或向上劃動，叫出APP。
  

[2022.LEARN.010]切換(開關)正式區與測試區前端console.log

問題:前端測試環境會用到console.log，但正式區想把它關閉或不顯示。

參考：

https://stackoverflow.com/questions/1215392/how-to-quickly-and-conveniently-disable-all-console-log-statements-in-my-code

概念：重寫console.log的方法

如:console.log=function(){}
正式環境啟用此方法，就可以快速關閉(不呈現)console.log的結果。

[2022.LEARN.009][筆記]MVC站台快取問題

• 日前踩了個坑 ，(MVC產生的網頁*.html)被快取了。
  後面切換querystring都是抓第一次進入的頁面資訊。

<system.webServer>
<caching>
<profiles>
<add extension=".html" policy="CacheForTimePeriod" kernelCachePolicy="DontCache" duration="23:00:00" />
</profiles>
</caching>
</system.webServer>

[2022.LEARN.008][筆記]BootstrapTable簡易用法

<div class="mainContent am-u-md-8 am-u-lg-10">  

    <div class="container">

        <h3>社員訂餐</h3>

        <table id="table1"

            data-show-columns="false"

            data-search="true"

            data-show-toggle="true"

            data-pagination="true"  

            data-url='@Url.Content("~/Get/myList")?Mode=02'

            data-resizable="true">

            <thead>

                <tr>    

                    <th data-field="ClubName" data-sortable="true">社團</th>  

                    <th data-field="UserName" data-sortable="true">社員</th>

                    <th data-field="SidesCode" data-sortable="true">餐點代號</th>

                    <th data-field="SidesName" data-sortable="true">餐點名稱</th>                  

                </tr>  

            </thead>    

        </table>       

    </div>    

</div>

data-sortable="true">餐點小計</th>

                    <th data-field="UserTotalAmount" data-sortable="true">社員小計</th>                

                    <th data-field="ClubTotalAmount" data-sortable="true">社團費用合計</th>

                    <th data-field="TotalAmount" data-sortable="true">費用總計</th>            

                </tr>  

            </thead>    

        </table>

    </div>    

</div>

<!--bootstrap-->

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!--fontawesome-->

    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>

    <!--bootstrap-table-->

    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>

    <!--bootstrap-table-lanuage-->

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>

    <!--bootstrap-table-export-->

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>

    <!--在客户端保存生成的导出文件-->

    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

    <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->

    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>

    <!--以PNG格式导出表格-->

    <!--对于IE支持包括 html2canvas 之前的 es6-promise-->

    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>

    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

    <!--将表导出为PDF文件-->

    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>

    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

    <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->

    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

<script>

       

  $(function() {

    $('#table1').bootstrapTable({

      striped: true,                      //是否顯示行間隔色(斑馬線)

      pagination: true,

      showRefresh: true,                  //是否顯示刷新按鈕

      minimumCountColumns: 2,             //最少允許的列數

      showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕            

      onLoadSuccess: function(){  //加載成功時執行

          console.info("加載成功");

      },

      onLoadError: function(){  //加載失敗時執行

          console.info("加載數據失敗");

      },

      pageList: [10, 25, 50, 100,1000,2000],//

      showExport: true,  

      exportDataType: "all",  //basic', 'all', 'selected'.

      exportTypes:['xlsx'],//'excel',

      exportOptions:{  

            //ignoreColumn: [0,0],            //忽略某一列的索引  

            fileName: '社員訂餐',              //文件名稱設置  

            worksheetName: 'Sheet1',          //表格工作區名稱  

            tableName: '社員訂餐',  

            excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  

            //onMsoNumberFormat: DoOnMsoNumberFormat  

      }

    });

</script>

參考: https://www.twblogs.net/a/5b7cfd412b71770a43dd6bdf https://bootstrap-table.com/

[2022.LEARN.007][筆記]Javascript小數相乘誤差

問題：5.145*1300=6688.5 

看起來本應該是6688.5的結果，
javascript 相乘之後會變成 6688.4999999...
這會導致若是要四捨五入到整數，誤差就變成1。

解法：(value).tofixed(4)


參考：

• 保哥：前端工程研究：關於 JavaScript 中 Number 型別的常見地雷與建議作法

[2022.LEARN.006]右鍵選單開啟檔案使用cmder

 參考：https://www.796t.com/article.php?id=222332

1.環境變數path：加上cmder.exe所在目錄

2.可能cmder.exe要改成「以系統管理者開啟」。

3.註冊右鍵開啟方法。
cmd，執行cmder.exe /REGISTER ALL

[2022.LEARN.005]建立AzureDB外部資料表

語法如下：

CREATE EXTERNAL TABLE [dbo].[MYUSER]

(

[Id] [bigint] NULL,

[USERID] [varchar](128) NULL,

)

WITH (DATA_SOURCE = [TestDBDataSource])

• 最主要的是聯線的DataSource要建立

[2022.LEARN.004][TSQL]多筆Row欄位合併為一欄(欄位合併)

指令：
1.for xml path('') 配合select ','+convert(nvarchar(128),applid)
   多筆欄位用【逗號,】連接起來。
   ex: ,id001,1d002
2.前方會多一個逗號，使用stuff指令移除。
   stuff(',id001,id002',1,1,'')
   =>第一個字元位置，移除長度1字元，插入空字串。

範例：

select STUFF((select ','+convert(nvarchar(128),applid)

  from AasApplAct where userid=u.userid and actid=@actid for xml path('')

),1,1,'') as ApplId

[2022.LEARN.003]TSQL 使用OpenJson

• 問題：OPENJSON does not work in SQL Server？
• TSQL使用OPENJSON指令時發生錯誤。
• 
  
• 解法：
• 更改層級：
  ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = 130 

[2022.LEARN.002]VSCode Using Git設定篇

參考：

• https://www.rs-online.com/designspark/github-microsoft-visual-studio-code-cn

作法：

• 安裝Git軟體
• Git設定email跟username (config)
• VS Code 安裝擴充：Git Extension Pack
  
• 安裝後，點【複製存放庫】上方就會有輸入欄位。(可以正常使用了。)
• 這邊是使用github上面的.git 網址。
• 開啟後，選擇git存放路徑。
• 開始編輯：這邊是使用ReadMe的文件來測試。
• 編輯後會有異動標示(M)。
• 如果要嵌入(上傳)，上面原始檔控制要輸入異動原因，並按【認可V】。
  
• 更新時若位認證或登入。(取得access token)