vue $emit

vue $emit
Add Comment Edit

 子(對話窗)

  <div>
      <v-row justify-end>
        <v-btn icon dark @click="close" class="mt-10" color="teal"> <v-icon>mdi-close</v-icon> </v-btn>
      </v-row>
    </div>

 methods: {
    close() {
      this.$emit('closeRegist');
    },
}


父(頁面)

  <v-dialog persistent v-model="RegistDialoge" >
      <v-card > >
        <register @closeRegist="closeRegistDialog"></register>
      </v-card>
    </v-dialog>

RegistDialoge: false,
 methods: {
    closeRegistDialog() {
      this.RegistDialoge = false;
    },
}

 原理是:當子元件的按鈕被觸發(想要關掉對話窗)時，會對父元件出發$emit('closeRegist');，項父元件申請說[子元件提出這個事項]，父元件就會去[找到@closeRegist這個事項]，並執行觸發事件closeRegistDialog(關掉對話窗)，任務完成。

Read More»

Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached. 超时时间已到。超时时间已到，但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用，并且达到了最大池大小。

Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached. 超时时间已到。超时时间已到，但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用，并且达到了最大池大小。
Add Comment Edit

 

 Timeout expired.  The timeout period elapsed prior to obtaining a connection from the pool.  This may have occurred because all pooled connections were in use and max pool size was reached.

 超时时间已到。超时时间已到，但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用，并且达到了最大池大小。

前提:程式已經有close&dispose

可能發生的問題:


這個錯誤通常跟應用程式的兩個地方有關：

  1. 資料庫連線字串所使用的 connection pool 參數。
  2. 程式的寫法有問題，導致資料庫連線沒有盡快釋放，以至於連線池爆滿。

此錯誤訊息很容易就可以重現。例如，你可以寫個程式，裡面用一個迴圈不斷開啟新的資料庫連線，但都不要釋放它。很快地，例如開啟 100 個連線之後，就會出現這個錯誤訊息。

引用 https://www.huanlintalk.com/2012/05/net-connection-pool.html


監測效能監視器Connection Pool

 https://dotblogs.com.tw/rainmaker/2017/04/26/143316

[code Connection Pool行為]

  • 1.連線字串要完全相同才能共享 Pool，故要避免動態產生不同連線字串以免搞出一堆 Pool 失去共用資源的意義(術語叫 Pool Fragmentation)
  • 2.Pool 最大連線數(Max Pool Size)預設為 100 條
  • 3.Pool 連線數達上限時需排隊等待，若逾時將拋出錯誤，預設等待上(Connection Timeout)限為 15 秒
  • 4.最低連線數(Min Pool Size)是每個 Pool 維持的基本連線數(低消)，預設為 0
  • 5.Pool 中的連線若閒置 4-8 分鐘或發生斷線(Severed Connection)，將被從 Pool 移除。

https://blog.darkthread.net/blog/sql-conn-pooling-experiment/

[C#] SQL 資料庫 Connection Pool 連線池觀念釐清

https://ithelp.ithome.com.tw/articles/10210068

[觀念]

超时时间已到.错误及Max Pool Size设置

https://www.cnblogs.com/delphinet/archive/2010/09/29/1838494.html

連線池機制

https://www.cnblogs.com/eaglet/archive/2011/10/31/2230197.html

Connection Pool (連線池)

https://vocus.cc/article/5f800406fd89780001365d17

dispose()與close()的區別 及pooling連線池相關

https://www.itread01.com/content/1542172150.html

連線池错误的解决方案：

https://www.cnblogs.com/kerrycode/p/12502884.html

已超過連接逾時的設定。在取得集區連接之前超過逾時等待的時間，可能的原因為所有的共用連接已在使用中，並已達共用集區大小的最大值。

https://www.gss.com.tw/blog/1-8
 Connection 有2個 Clear Pool 的 Method,
一個是 ClearAllPools() ，另一個是 ClearPool(你的Connection) 。..

Connection Pool 是什麼呢 ?[運作]

原文網址：https://read01.com/0M7EM.html
https://read01.com/zh-tw/0M7EM.html#.YgDhqepByUk



💬統整:
釋放連線、釋放連線池連線應該是兩件事，
所以即使已經做到conn.close(); conn.dispose();也可能生連線池過滿的問題
因此我的問題應是出在連線池中的連線並未被重複使用，每次動作都建立新的連線而使連線池過滿。
(排除問題一)但我的連線字串connrction string放在appsettings裡，連線字串理應完全相同，原因待查....
💬暫時解決方法:
直接把Pool=False;目前沒發生過滿 
(但ConnectionPool是為了效能，即使關了電腦端口的連線數也是有限的->也是可能爆掉，所以這部是解決方法)
💢嘗試調整
;Max Pool Size=5;Connection Lifetime=20;(讓連線會再時間內斷開並移出連線池)
發現同一頁面重新整理5次後，第六次timeout了，且理應20秒後會釋放Connection ，但重整仍然timeout,等了20分鐘都沒回來
(使否可能連線被占用,if占用中的connection部會被移除?)
(連線沒有被正常關閉!)
 
💬最後解決方法:
using還是using一直不面對改寫成using(不熟所以原本怎麼改也錯)
SqlConnection cn = null; 
using ( cn = new SqlConnection(this.Connection.ConnectionString)) {
 // SQL操作
 }
https://ithelp.ithome.com.tw/articles/10199186
 






Read More»

JS part6_Ajax_axios

Add Comment Edit

 #AJAX:非同步的JS與XML技術

不重整改動頁面的情況下能取得部分頁面資料

-vertical dots->更多工具>網路開發工具->network -> 可以看到網頁有多少個網路請求

載入順序 index.html->img.src(html順序)->all.js(html順序)

 #網路請求狀態碼(由伺服器回傳)

  1. 資訊回應 (Informational responses, 100–199),
  2. 成功回應 (Successful responses, 200–299),
  3. 重定向 (Redirects, 300–399),
  4. 用戶端錯誤 (Client errors, 400–499),
  5. 伺服器端錯誤 (Server errors, 500–599).

 # 3xx為 已有暫存資料 所以不重新抓取 直接從暫存抓 節省記憶體資源

(若要清除重抓 可以打開開發人員工具 對重新整理右鍵 清除快取...)

 #Request 請求  Response回傳

-Chrome->vertical dots->更多工具>網路開發工具->network -> 網路請求->Headers

請求資料: Request Header +Request Data

回傳資料:Response Header+Response  Data

 #AJAX

(1)JS的網路請求原生寫法: XMLHttpRequest (冗長), Fetch(回傳要轉json)


(2)套件，需額外載入JS: axios

#可CDN載入
#axios整理好的response資訊

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {  //response是axios整理好的資訊
    console.log(response.data);//data本身
    console.log(response.status);//狀態馬
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });
#取出資料後顯示在網頁上https://codepen.io/xarielleex/pen/eYWMpMp?editors=1010

 #Axios非同步

因為在資料還未回傳時，js允許程式先繼續往下跑(防止使用者看到整個頁面空白)，所以可能會有資料來不及回傳、賦值的問題

function內資料還未回傳所以未執行，而下方console.log程式先跑，所以是空陣列



#用函式處理非同步.
https://codepen.io/xarielleex/pen/GRmxopz?editors=1010


#Http請求方法

#POST 

api練習 https://github.com/hexschool/nodejs_ajax_tutorial


#POST 四種常見contentType

請求資料格式Request header contentType

1. application/x-www-form-urlencoded
2.multipart/form-data (請求為檔案)
3. application/json(axios預設,練習的api也適用此)
4. text/xml(記事本)

#練習API


成功CONSOLE會回傳

"message": "帳號註冊成功"


失敗CONSOLE會回傳

 "message": "此帳號已被使用"

-Chrome ->vertical dots->更多工具>網路開發工具->network 

API --> preflight : 先個網址是否支援跨網域有的話執行xhr 
API --> xhr : 請求網址

#自行練習註冊登入功能(同一api)

























Read More»

JS part5_event偵聽事件_forEach

Add Comment Edit

 

#event偵聽事件

※addEventListener

※偵聽事件搭配DOM

※CHROME瀏覽器

右鍵-->檢查-->EventListener分頁可查看網頁中的監聽事件
console.log(e);//e會回傳點擊事件的物件(紀錄點擊時的詳細資訊eg.點擊座標等)

※nodeNmae :知道此目標在目前 DOM 的 HTML哪個標籤(only tag name)

※e.target :知道此目標在目前 DOM 的 HTML的標籤位置(整段tag)

※nodeName+e.target 抓到我要的位置(可能用重複的class name)

   nodeName被包在其他標籤裡面抓不到需要先e.targe再nodeName

※e.preventDefault :取消默認(預設)的觸發行為

#forEach

let data=[30,31];//一筆資料30的陣列
data.forEach(function(item,index,array){ //forEach陣列會自動產生帶入item,index,array這三參數(若沒用到可省略)
console.log(item,index,array);//item當下這筆資訊;index資料筆數;array讀取陣列狀態
//30,0->(2)[30,31]
//31,1->(2)[30,31]
})





Read More»

JS part4_function_DOM

Add Comment Edit

 

#函式function

※函式宣告

function sayHello(){ //函式宣告
 console.log("Hello");
 Shakehand();//函式中執行函式
}
function Shakehand(){ //函式宣告
console.log("Shake hand");
}

sayHello();//執行

※函式參數、回傳return

function calculate(num1,num2){ //函式宣告
 return num1+num2;
}
 let total =calculate(1,2);//total為3

※return可以中斷函式的執行

#DOM(Document Object Model)

※<script>的英方在<html>之後，這樣才讀取的到解析完的document

※抓取document網頁元素

querySelector選擇器:只會抓第一個

 const el=document.querySelector('h1');//選取h1
 const el2=document.querySelector('.header');//css選擇器 選取header class

querySelectorAll選擇器:可抓多個

 const el=document.querySelectorAll('h1');//el會以陣列回傳el[0].el[1]..選取

textContent文字寫入

el.textContent="new word"//複寫h1文字

innerHTML插入標籤:會清空內部所有物件再插入(put?)

innerHTML可以變數加入(字串改成變數或字串穿插變數)

el2.innerHTML =ˋ<h1 class="header2">h1標題</h1>ˋ//可以單引號雙引號包覆;插入class為header2的h1段落
el2.innerHTML =ˋ<h1 class="header2">${name}</h1>ˋ

setAttribute新增標籤屬性

const link=document.querySelector('a');
link.setAttribute("href","https:...");//更換連結屬性的連結網址("屬性","加入參數")

 .innerHTML(取出標籤內容)、.textContent(取出文字)、.getAttribute(取出屬性)取值

console.log(link.getAttribute("href"));//網址
console.log(link.innerHTML);//link<a>內標籤//輸出<span>123</span>//原html<a href=..><span>123</span>></a>
console.log(link.textContent);//123

※表單元素取值












Read More»
訂閱： 文章 ( Atom )