simonallen 技術部落格

Sign in Subscribe

SimonAllen

SimonAllen

SQL 筆記：排序查詢結果 SELECT ORDER BY

在 SQL 中，一般從資料表篩選資料的時候，如果沒有指定特別的排序順序，會無法預測資料的結果會按照什麼樣的順序排列。即使是相同的 SELECT 指令，每次執行的時候可能後會出現不同的結果。但在實務應用中，如果沒有按照排序整理資料，會讓資料變得難以使用。這時，我們就會需要 ORDER BY 這個重要的子句來協助我們排序。這時可以使用 ORDER BY 對搜尋結果進行排序。在預設情況下，使用 ORDER BY 的排序結果為 ASC 升冪排列，項目會由低至高遞增出現，如果要降冪排列可使用 DESC 的關鍵字。舉例來說，若要以年份排序： * 升冪排列，可寫成 ORDER BY years ASC，或是是忽略不寫：ORDER BY years； * 降冪排列，可寫成 ORDER BY years

SQL 筆記：更新資料 UPDATE SET WHERE

UPDATE & SET 語法 UPDATE $表名稱 SET $欄位1 = $值1, $欄位2 = $值2, ... 但這樣寫會有個問題，一般較少這樣寫...原因是「會更新全部的 row 欄位」 UPDATE SET WHERE 語法但要注意，一般不會如上述這樣寫，因為缺少了「WHERE」來篩選目標對象，會導致表中的所有 row 紀錄資料都將被更新！一般還是會加上 WHERE 來指定特定目標更新資料 UPDATE $表名稱 SET $欄位1 = $值1, $欄位2 = $值2, ... WHERE $目標對象的條件; 範例：更新指定的使用者資料假設我們有一個 users 資料表： id name email age

callback、promise 與 async/await

一般在ajax時，幾乎沒人會用ES5以前的xmlhttp方法去處理，因為太髒又難寫、瑣碎，我們可能會使用最常見的jQuery來寫，可能會是這樣 $.getJSON('https://randomuser.me/api/',function(data){ console.log(data) }) 或者是這樣 $.ajax({ url:'https://randomuser.me/api/', dataType:'json', success:function(data){ console.log(data) } }) 結果可說是一模一樣在結構上也差不多，要給AJAX的目標對象(網址)與後續接收到資料處理的函式。這個「函式」、「function」，就是我們所說的callback回呼函式 callback回呼函式當我們執行非同步的呼叫時，我們不知道什麼時候執行完，但我們可以傳入一個function給它，

Vuex 變更狀態的 Mutations

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 每個 Mutations 都包含了兩個要素： * 函式名字 * 函式內的功能而寫在Mutations內的函式，是唯一能直接改變State的值的Vuex方法。例如先前Vuex 引入與範例筆記的 store.js const store = new Vuex.Store({ state:{ count:0, }, mutations:{ addCount(state){ state.count += 1; } } }); 我們不該在mutations內突然使用個我們沒在state宣告的屬性(值)，想要這麼做要在mutations寫 Vue.set(state,’資料名稱’,’ ‘值'); 在mutations內動態用vuex的set去新增state的內容如果是要新增state內物件的新屬性也可以用這種方式 const store = new Vuex.Store({ state:{ count:0, box:

Vuex 發出指令的 Actions

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 延續Vuex系列筆記如果要進行非同步的AJAX，就要在Actions裡面操作例如我們在store.js裏面用fetch，去AJAX(舉例說明而已) import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ todos:[ ], }, actions:{ ajaxTodos(store){ fetch(`$(url)/todos`) .then(re => re.json()) .then(ajax到的東西 => { //呼叫某個函式更新state }) } } }); export

Vuex Modules 模組劃分

假如今天的專案有很多組件，並且有很多功能需要Vuex來管理，那麼Vuex的State、Mutations、Getters、Actions可能會塞太多東西，變得臃腫龐大。例如今天在store.js是這樣的我們有很多功能像是代辦清單(todos)、購物車(cart)、產品(product)...etc 這些功能全寫進一個Vuex store，那麼store之後會變得太過攏長 import Vue from ‘vue'; import Vuex from ‘vuex’; Vue.use(Vuex); const store = new Vuex.Store({ state:{ todos:[ ], cart:[ ], product:[ ], //…etc }, mutations:{ //…etc }, //下略... }); 這種時候我們可以用Modules來幫我們適當地拆開、劃分不同Vuex物件，把const store = new Vuex.

Vuex 取得狀態的 Getters

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 如果把Vuex用Vue實例的屬性來比喻(注：這樣比喻是錯的不精準得，但方便聯想) state存放資料類似data Mutations設定方法函式讓人能主動呼叫、觸發，類似methods 那Getters呢？ Getters類似computed 例如現在store.js中是這樣 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ todos:[ ], }, getters:{ } }); export default store; state裡有個陣列todos代辦清單，現在我們想知道有哪些代辦是沒做的？我們可能會在(.vue)組件這樣寫(注意這只是範例說明，