[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活報的資料中，出現的狀態集合

• INCANCEL：提出取消?(有出現在LOG但沒有在蝦皮流程表中。)
• SHIPPED：物流中
• READYTOSHIP：付款後準備出貨
• COMPLETED：訂單完成(可能生命週期結束)
• PROCESSED：安排物流
• TOCONFIRMRECEIVE：標記收到貨
• CANCELLED：已取消
• UNPAID：未付款(可能開始的狀態)
• TORETURN：退貨
• 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:

參考：

•  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
¨C18C¨C19C¨C20C¨C21C¨C22C¨C23C¨C24C¨C25C¨C26C¨C27C¨C28C¨C29C¨C30C¨C31C¨C32C

黑名單:被列入黑名單。

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>

   

    <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('');

      $('#imgpreviewPic').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即為元素

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

      }

      else{

        console.log('圖片OK');

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

        previewFiles(file); // this即為元素

      }

    }

    // 預覽圖片，將取得的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))

        })

      }

     

    }

    // 在頁面上新增

    function showPreviewImage(src, fileName) {

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

        image.name = fileName

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

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

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

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

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

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

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

         

檔案：'+fileName+'

');

    }

    // 使用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都是抓第一次進入的頁面資訊。

[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>

    <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>

   

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

   

    <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>

   

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

   

    <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>

   

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

   

   

    <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>

   

    <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>

   

    <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 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 databasename SET COMPATIBILITYLEVEL = 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)