mina

研究好一陣子的flutter，頁面陸續完成中！！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

呼叫範例 HtmlTableToJson("targetTable")

回傳結果範例

[{"LABEL2":"C4","LABEL3":"T1","PARAMETER_TYPE":"1"
 ,"VALUE1":"1000.00","SUBTOTAL":"","REMARK":"OK","ATTACHMENT":""},　　  
 
 {"LABEL2":"C4","LABEL3":"T1","PARAMETER_TYPE":"1"
 ,"VALUE1":"2000.00","SUBTOTAL":"","REMARK":"OK","ATTACHMENT":""}]

Javascript Function 實作如下（考量table有merge cell的議題的寫法），

=====================================================================

function HtmlTableToJson(tableid){
            var jsondata = [];
            var heads = [];
            $("#"+tableid+' thead th').each(function(index,item){
                heads.push($(item).attr("name"));
            });
            var tmpRowdata = {}; //考量table有merge cell的議題的寫法，所以需要這個變數
            $("#"+tableid+' tbody tr').each(function(index, item){
                var rowdata = {};
                $(item).find('td').each(function(index,item2){
                    for (let i = 0; i < heads.length; i++) {
                        if (item2.innerHTML.indexOf(heads[i]) >= 0) { 
                            if ($(item2).find('[jsonval]').length > 0) {
                                tmpVALUE1 = $(item2).find('[jsonval]').val(); //input欄位的取值方式
                            } else {
                                tmpVALUE1 = item2.innerText; //其餘欄位取值方式
                            }
                            if ($(item2).find('[number]').length > 0) {
                                tmpVALUE1 = tmpVALUE1.replace(/,/g, ""); //遇到數值欄位自動將千分號去掉，例如1,000 -> 1000
                            } 
                            tmpRowdata[heads[i]] = tmpVALUE1; //將資料塞入object（若遇到merge cell，會自動取得同群組的merge cell值）
                            rowdata = JSON.parse(JSON.stringify(tmpRowdata)); //以deep copy的方式取得資料
                        }
                    }
                });
                if (Object.keys(rowdata).length > 0) {
                    jsondata.push(rowdata); //將資料集合至同一個array
                }
            });
            return jsondata;
        };

-------------------------------------------------------------------------------------------------------------------------

Table格式如下

=====================================================================

<table width="100%" id="targetTable" style="border-collapse: separate;">
    <thead>
        <tr style="background-color:white;top:150px;position:sticky;border-bottom: 1px solid;">
            <th name="LABEL2" style="text-align: center;border: 1px solid">Stage</th>
            <th name="LABEL3" style="text-align: center;border: 1px solid">子項</th>
            <th name="PARAMETER_TYPE" style="text-align: center;border: 1px solid">參數類別</th>
            <th name="VALUE1" style="text-align: center;border: 1px solid">單價</th>
            <th name="SUBTOTAL" style="text-align: center;border: 1px solid">Sub-Total</th>
            <th name="REMARK" style="text-align: center;border: 1px solid">Remark</th>
            <th name="ATTACHMENT" style="text-align: center;border: 1px solid">附件</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>

-------------------------------------------------------------------------------------------------------------------------

Table的部分列資料由以下生成

=====================================================================

function drawTable(jsonObj) { 
            var table = document.getElementById("targetTable");
            for (var i = 0; i < jsonObj.length; i++) {
                var tmpObj = jsonObj[i];
                var row = table.insertRow(-1);
                var cell = row.insertCell();
                tmpStr = (tmpObj.LABEL2 == null ? '' : tmpObj.LABEL2);
                cell.style.borderBottom = "1px solid";
                tmpStr = '<div name="LABEL2">' + tmpStr + '</div>';
                cell.innerHTML = tmpStr;

                cell = row.insertCell();
                cell.style.borderBottom = "1px solid";
                tmpStr = (tmpObj.LABEL3 == null ? '' : tmpObj.LABEL3);
                cell.innerHTML = '<div style="text-align:center;" name="LABEL3">' + tmpStr + '</div>';

                cell = row.insertCell();
                cell.style.borderBottom = "1px solid";
                cell.innerHTML = '<div style="text-align:center;" name="PARAMETER_TYPE">' + (tmpObj.PARAMETER_TYPE == null ? '' : tmpObj.PARAMETER_TYPE) + '</div>';
                cell = row.insertCell();
                cell.style.borderBottom = "1px solid";
                cell.innerHTML = '<input name="VALUE1" number="" jsonval="" type="text" style="text-align:right;width:100%;" value="' + toFormatNum(tmpObj.VALUE1 == null ? '' : tmpObj.VALUE1) + '">';
         
                cell = row.insertCell(); //Sub - Total 
                cell.style.borderBottom = "1px solid";
                cell.innerHTML = '<div name="SUBTOTAL" style="text-align:right;">' + toFormatNum(tmpObj.SUBTOTAL == null ? '' : tmpObj.VALUE1) + '</div>';

                cell = row.insertCell(); //Remark
                cell.style.borderBottom = "1px solid";
                cell.innerHTML = '<input name="REMARK" jsonval="" type="text" style="text-align:right;width:100%" value="' + (tmpObj.REMARK == null ? '' : tmpObj.REMARK) + '">';

                cell = row.insertCell(); //附件
                cell.style.borderBottom = "1px solid";
                cell.innerHTML = '<input name="ATTACHMENT" type="button" value="上傳附件">';
            }
        }

• 高級語言：可讀性高，容易撰寫，ex. Object-Oriented Language當中的Java。
• 編譯原理的五個步驟

1. 詞法分析
   • 基本字 ex. begin for
   • 標識符 ex. 變數名稱
   • 常數
   • 運算符 ex.+ - *
   • 界符 ex. , ; {}
2. 語法分析
3. 中間代碼生成
4. 優化
5. 目標代碼產生

重新閱讀ASP.Net MVC相關資訊後，溫故知新~

參考影片來源：https://www.bilibili.com/video/BV1ri4y1c7em/?p=17&spm_id_from=pageDriver

• 好用的工具1：ILSpy 可以將dll還原為原始的code。
• 好用的工具2：ViewState decoder 可以將WebForm的ViewState屬性內的值由 "一串英數夾雜的文字" 轉為 "使用者可以看得懂的文字"。

• http  get method：參數會顯示在URL。
• http post method：參數不會顯示在URL。

•  cookie機制：無法儲存過多的信息，亦無法跨不同的瀏覽器，其生命週期即瀏覽器的生命週期，當瀏覽器重啟，cookie就自動刪除了，但可以透過設定Expires屬性變更其生命週期。
• session機制：cookie是將資料儲存在客戶端，session是將資料儲存在服務器端，且session有自動銷毀機制，一段時間內瀏覽器與服務器沒有任何的交互，session會定時銷毀，ex. 登錄功能。

• html頁籤的id屬性for DOM操作使用，name屬性for 傳送資訊到後端使用。

• AJAX：是一種進行頁面局部非同步刷新的技術。利用javascript進行封裝，減少繁瑣的程式碼。

• Bootstrap5網頁排版（切版）：
  • 不再依賴JQuery
  • 不支援IE瀏覽器

• ashx：是一種由Microsoft開發的ASP.NET Web Handler File。
• aspx（vs. ashx）：aspx是一個特殊的ashx，屬於page類，實現了IHttpHandler接口，目的是生成HTML。
  • 可透過<% C# code %>符號在aspx網頁寫入C# code 或call C# 的function取得function執行結果。
  • aspx使用ViewState屬性將http模擬成有狀態的形式。但ViewState屬性會造成網頁資源佔用，拖慢網頁速度，故能不使用就盡量不使用（可將EnableViewState設置為"false"，可於全頁面禁用或針對控件禁用）。
• WebForm 開發模式：Code Behind 開發模式（Tag 與 Code分離，但Code與Tag的耦合度仍高） vs. Code Inline 開發模式（Tag 與 Code會在同一個檔案）。
• cshtml：使用Razor模板搭配C#語法。
• MVC Controller：控制器的三個原則：非靜態類，實現IController接口，必須以Controller結尾命名。
• MVC使用補充說明：
  •  "<%= %>" vs. "<%: %>"："<%: %>"會在遇到特殊字元時，將特殊字元轉為代碼，可保頁面安全性，惟若寫成 "<%: Html.Raw() %>" 或 "<%: new HtmlString() %>" 或 "<%: new MvcHtmlString() %>"，效果將與前者無異；"<%= %>"會輸出原始文字，若為script，會有相應的效果，網頁可能有安全性的疑慮。

• IsPostBack使用時機。

Linux下安裝軟件:

• 源碼包形式:（解包方式 tar -zxvf *.tar.gz 或 tar -jxvf *.tar.bz2）
  • config/configure/bootstrap（配置）-> make/bootstrapd（編譯）-> make install/bootstrapd install（安裝）
  • 指定安裝的路徑 --prefix=路徑
  • 需要依賴的路徑 --with-PACKAGE名=包所在的路徑
  • 不需要依賴 --without-PACKAGE名
    • ex. ./configure --prefix=/usr/local/ncurses（配置）
    •     make（編譯）
    •     make install（安裝）
• 二進制包形式（rpm形式）
  • rpm -qa|grep 關鍵詞
  • rpm -e 關鍵詞 --nodeps
  • rpm -ivh 完整名稱
  • rpm -Uvh 完整名稱
  • rpm -qf 文件路徑（查詢指定文件屬於哪個包）
• yum傻瓜式安裝
  • yum list（列出當前已經裝的和可以裝的軟件）
  • yum search 包名（搜索指定的關鍵詞的包）
  • yum [-y] install 包名（-y表示安裝過程中不需確認，若沒有，會有需要確認的動作）
  • yum [-y] update 包名（此處若沒有指定包名，會更新所有的包）
  • yum [-y] remove 包名
  • 若mysql透過yum安裝，數據庫儲存目錄為/var/lib/mysql，配置文件目錄為/etc/my.cnf

補充縮寫全名:
LAMP:  Linux + Apache + MySQL + PHP
LNMP:  Linux + Ngine  + MySQL + php-fpm
LNMPA: Linux + Nginx  + MySQL + PHP + Apache

Linux網路基礎:

• LAN（Local Area Network）
• MAN（Metropolitan Area Network）
• WAN（Wide Area Network）
• IP（Internet Protocol）:
  • 留用的內部私有地址（私有地址屬於非註冊地址）
  •     A:10.0.0.0--10.255.255.255
  •     B:172.16.0.0--172.31.255.255
  •     C:192.168.0.0--192.168.255.255
• 網卡（硬體，負責數據的封裝和解封），MAC地址為網卡的物理地址或稱之為設備編號，默認是全球唯一的，為16進制。
  • ipconfig可列出相關資訊
  • OSI參考模型，ip地址是基於第三層（網路層），MAC地址是基於第二層（數據連接層）

網路相關命令:

• "ping 主機地址（ip地址或主機名或域名）": 檢測當前主機與目標主機之間是否可連通（有些服務器禁ping，此命令就無效果）
• "netstat -tanlp": 查看網路的連接訊息，-t表示tcp協議，-n表示將字母轉化成數字，-l表示列出狀態為監聽，-p表示process相關訊息，-a表示all
• "traceroute 主機地址": 找出當前主機與目標主機之間的所有路由器（會給沿途各個路由器發送icmp數據包，路由器可能不會響應），該命令不是內置命令，需要安裝，類似於Windows下"tracert 主機地址"
• "arp":（Address Resolution Protocol）根據ip地址獲取MAC物理地址的協議
• "arp -a":查詢本地緩存的MAC地址
• "arp -d 主機地址":刪除指定的緩存紀錄
• "tcpdump": 抓取數據包
• "tcpdump port 數字" 或 "tcpdump host ip地址" 或 "tcpdump -1 網卡設備名稱"

shell基礎: Linux默認的shell是/bin/bash

• shell編寫規範:
  • #!/bin/bash: 指定shell解釋器的路徑，此亦為默認路徑
  • shell相關指令
• 文件命名規範:
  • 文件名.sh
• 使用流程:
  • 1.touch/vim  創建.sh文件
  • 2.編寫shell代碼
  •     #!/bin/bash
  •     echo 'hello world!'
  • 3.執行shell腳本  "./文件名.sh"或 "/bin/bash 腳本的路徑"
  • 備註79-85（待完成）
     

rpm管理: 類似於Windows上的電腦管家中的軟件管理，主要是對Linux服務器上的軟件包進行管理操作，包含查詢/卸載/安裝。

• 查詢某個軟件的安裝情況 rpm -qa|grep 關鍵詞，-q表示查詢，-a表示全部
• 卸載某個軟件 rpm -e 軟件的名稱（當存在依賴關係又不想解決這個問題 rpm -e 軟件的名稱 --nodeps）
  • lsblk查看設備的訊息，Name為名稱，Size為設備大小，Type為類，mountpoint為掛載點。
  • 解掛載: umount 當前設備的掛載點（路徑）
  • 掛載: mount 設備的原始地址 要掛載的位置（路徑），設備的原始地址"/dev/設備名稱"，要掛載的位置"/mnt/指定的資料夾"
• 安裝某個軟件 rpm -ivh 軟件的完整名稱，-i install，-v顯示進度，-h表示以"#"形式顯示進度

cron/crontab計畫任務: 

• crontab 選項，選項-l表示列出計畫任務列表，-e表示編輯，-u表示指定的用戶名（未指定則用當前用戶），-r表示刪除計畫任務列表
• 編輯計畫任務的規則語法格式，以行為單位，一行為一個計畫: "分 時 日 月 周 需要執行的命令"，ex. 0 0 * * * reboot表示每天的0點0分執行reboot指令，
  • 分的範圍0~59，時的範圍0~23，日1~31，月1~12，周0~7（0&7表示星期日）
  • *則表示取值範圍中的每一個數字
  • -則用做區間表達式
  • /則表示每多少個，例如每10分鐘一次，在分的位置寫*/10
  • ,表示多個取值，例如1點及6點均要執行，在時的位置寫1,6
• 配置文件位於/etc/cron.deny（管理員可透過此文件拒絕特定用戶設定計畫任務），在裡面每一行寫一個用戶名
  • 配置文件位於/etc/cron.allow（此文件本身不存在，須自己創建，透過此文件允許特定用戶設定計畫任務），在裡面每一行寫一個用戶名
  • 補充: 白名單優先級高於黑名單，同時存在兩個名單中，會默認允許。

Linux權限管理: 分為3種身份owner/group/others及3種權限read/write/execute

• 權限設置 chmod 選項 權限模式 檔案或資料夾，選項-R表示遞迴設置權限（for資料夾使用）
• 字母形式選項: u表示user，g表示同組用戶，o表示其他用戶，a表示所有人，若未指定會默認給所有人；+表示增加權限，-表示刪除權限，=表示將權限設置成具體的值
  • ex. chmod u+x,g+rx,o+r 文件名稱（表示所有者擁有全部權限，同組用戶有讀和執行權限，其他用戶只有讀取）
  • ex. chmod u=rwx,g=rx,o=r 文件名稱
• 數字形式選項: r=4, w=2, x=1，排列組合去產生，0表示沒有任何權限，1表示可執行，2表示可寫，3表示可寫可執行，4表示可讀，5表示可讀可執行，6表示可讀可寫，7表示可讀可寫可執行。
  • ex. 上述範例可更改為 chmod 754 文件名稱

屬主（所屬的用戶）與屬組（所屬的用戶組）設置:

• chown -R username 檔案（更改檔案所屬用戶，若為資料夾且需要遞迴才需要加上-R）
• chgrp -R groupname 檔案（更改檔案的所屬用戶組，若為資料夾且需要遞迴才需要加上-R）
• chown -R username:groupname 檔案 （可同時更改所屬用戶與所屬用戶組）

延伸議題:

• reboot/shutdown/init/halt/user管理，在一般用戶身份操作不了，但有些特殊情況又需要有執行權限，又不能提供root用戶的密碼，可使用sudo（switch user do）命令來進行權限設置，sudo可以讓root事先定義某些特殊命令誰可以執行。
  • 默認sudo中是沒有除root之外用戶的規則，需要先配置sudo，sudo配置文件路徑為 /etc/sudoers
  • 配置sudo文件需使用"visudo"指令，無法使用vim指令
    • 

設置主機名（hostname或hostname -f）

• hostname 暫時的名稱　<-切換用戶後才會看到效果（只是暫時改名，重啟後會還原）
• 永久設置主機名（需要重啟）: 
  • cat /etc/sysconfig/network，將內部的HOSTNAME改掉
  • 然後修改hosts文件，將新的HOSTNAME指向本地（設置FQDN），才能被訪問，檔案位置在/etc/hosts

chkconfig服務配置: 類似Windows下的電腦管家之類的安全輔助工具，提供開機啟動項的一個管理服務
若非開機就啟動的服務，需要透過此去添加或者透過此刪除開機啟動項的項目

• chkconfig --list 查詢，其中0-6表示各個啟動級別
• chkconfig --del 服務名
• chkconfig --list|grep httpd 過濾後只查詢指定的資料
• chkconfig --add 服務名（但並非安裝的所有軟件都有服務名）
• 設置服務在某個級別下開機啟動/不啟動: chkconfig --level 連在一起的啟動級別 服務名 on/off (ex. 35，會在3,5級別添加)

ntp服務: 用於對電腦的時間同步管理操作

• （一次性）ntpdate 時間服務器的域名或ip地址（ip地址查看: http://www.ntp.org.cn/pool.php）
• service ntpd start: 設置時間同步服務（或者 /etc/init.d/ntpd start）

防火牆服務（軟體防火牆）: 

• CentOS 6.5內服務稱之為 iptables；CentOS 7.x內服務稱之為 firewalld
• 查看是否開機啟動 ps -ef|grep firewalld 或 chkconfig --list|grep firewalld
• 服務啟動/重啟/關閉 service firewalld start/restart/stop或/etc/init.d/firewalld start/restart/stop
• service firewalld status: 查看狀態
• iptables -A INPUT -p tcp --dport 80 -j ACCEPT （允許訪問80 port）
  • -A添加規則，INPUT進站請求，-p protocol協議，--dport端口號，-j行為結果（Accept/Reject）
  • /etc/init.d/iptables save（將防火牆規則保存到配置文件）
     

網路設置: 網卡配置文件位置 /etc/sysconfig/network-scripts/ 下有（ifcfg-網卡名稱）ifcfg-ens33 & ifcfg-lo

• ONBOOT: 是否開機啟動
• BOOTPROTO: ip地址分配方式，DHCP表示動態主機分配協議
• HWADDR: 硬體地址，MAC地址
• 若需要重啟網卡 "service network restart" 或 利用/etc/init.d目錄描述的快捷方式 "/etc/init.d/network restart"
• 若需要修改網卡的配置文件，但目錄不容易記住，可以利用創建捷徑的方式，方便以後查找 
  • "ln -s /etc/sysconfig/network-scripts/ifcfg-ens33 ~/ifcfg-ens33" <- ln -s 原始路徑 快捷方式路徑
  • 透過 ls -l 可查詢上述快捷的特性，第一碼為l（link），且列出原始路徑
• 如何重啟或停止單個網卡? "ifdown ifcfg-ens33" 停止網卡ens33；"ifup ifcfg-ens33" 開啟網卡ens33

ssh服務（secure shell協議）:有兩個常用的作用，一是遠程連接協議，二是遠程文件傳輸協議。

• 協議使用port: 默認是22（防火牆默認也是22），若需要修改，需修改ssh的配置文件 /etc/ssh/ssh_config，port範圍 0~65535，但不能使用別的服務已經佔用的port
• 服務啟動/停止/重啟: "service sshd start/stop/restart" （ps -ef|grep ssh指令可查詢確認） 或 "/etc/init.d/sshd start/stop/restart"
• 遠程終端: 終端工具可幫助維運人員連接遠程的服務器，例如xshell、secureCRT、Putty。
  • 先用ifconfig查詢虛擬機對應的ip位址，再透過Putty連線。
• >文件傳輸（目前透過FileZilla）: 有支持直接拖曳，或pscp.exe（直接丟至Windows資料夾下使用較方便）
      pscp [options] [user@]host:source target（下載到Windows）
      pscp [options] source [user@]host:target（上傳到Linux）
      pscp [options] -ls [user@]:host:filespec（列出遠程路徑下結構）