2019-04-01 / JSN / 0 Comments / 95 人來過
HTML5 有一個元素叫做 <template>，在使用 jQuery 取得內容並複製成為模板，除了使用 clone() 之外，記得搭配 outerHTML 使用。以下範例
詳細程式碼如下
|
|
<h1>訂單</h1> <table class="orders" border="1"> </table> <template class="item"> <tr> <th class="id"></th> <td class="title"></td> </tr> </template> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// 取得模板，透過取得 HTML 以後複製一份 var getTemplate = function (){ var html = $("template.item").html(); return $(html).clone(); } // 假設這是 AJAX 取得的資料 var ajaxData = function (){ return [{ id: 1, title: '蔬菜' }, { id: 2, title: '水果' }] } $(function (){ // 開始 var data = ajaxData() var temp = getTemplate() // 準備一個用來組合的 html 編碼的變數 var mix = ''; // 批次組合 $.each(data, function (key, ele){ temp.find(".id").text(ele.id) temp.find(".title").text(ele.title) // 必須要使用 outerHTML 才能取得根節點 <tr> mix += temp[0].outerHTML }) // 迴圈結合後再一次寫入 html 可以減少效能負擔 $("table.orders").html(mix) }) |
2019-03-25 / JSN / 0 Comments / 16 人來過
預設的時候通常使用相對路徑，可是會很不容易管理，例如
|
|
import '../compoments/tabs' import '../../template/helloWorld' |
這時我們只要在 webpack.config.js 使用模塊的解析方式 “resolve” 來設定別名，就能在 import 的時候簡寫來能省去計算相對位置的麻煩，例如
|
|
module.exports = { //... resolve: { alias: { '@compoments': path.resolve(__dirname, 'assets/src/javascript/compoments'), '@template': path.resolve(__dirname, 'assets/src/javascript/template'), '@scss': path.resolve(__dirname, 'assets/src/scss'), } } } |
修改成
|
|
import '@compoments/tabs' import '@template/helloWorld' import '@scss/app.scss' |
當然開頭的 @ 是我習慣自訂用來區別純單字的符號，你也可以不要使用，更多方法可以參考官網說明。
參考官方網站
2019-03-04 / JSN / 0 Comments / 123 人來過
安裝套件
|
|
composer require melihovv/base64-image-decoder |
使用範例
透過套件解碼後自訂檔案名稱，配合使用 Storage::put 就可以將圖檔存放到 storage\app 底下。
|
|
use Illuminate\Support\Facades\Storage; use Illuminate\Support\Str; use Melihovv\Base64ImageDecoder\Base64ImageDecoder; try { $dataUri = 'data:image/gif;base64,R0lGODlhLAH6AOZ/AMyokXJMK0uE...'; $decoder = new Base64ImageDecoder($dataUri, ['jpeg', 'jpg', 'png', 'gif']); $fileName = strtoupper(Str::uuid()) . "." . $decoder->getFormat(); Storage::put($fileName, $decoder->getDecodedContent()); } catch (\Exception $e) { dd($e->getMessage()); } |
2019-03-04 / JSN / 0 Comments / 166 人來過
這次要介紹的功能真的太好用了！常遇到的案例是
- 預先存在資料表(資料庫)，可能是之前沒有製作 migrate 的習慣而自己建立 Database
- 透過 ERD 軟體DB Schema 畫好關連並自動寫入 Database
這時候我們透過這款 mysql-workbench-export-laravel-5-migrations 自動轉換 migrate，就可以免去手動一筆一筆建立了。
安裝 MySQL Workbench
因為這是一款 MySQL Workbench 的外掛功能，所以我們前往下載。
▲點選下載按鈕
▲ 選擇你的作業系統後，點擊下載
▲ 可以不用註冊，我們直接下載
下載完成後直接安裝，不用特別設定什麼，這裡就不贅述了。
下載外掛
▲我們從 Github 下載到桌面後並解壓縮
安裝外掛
▲ 打開我們安裝好的程式
▲ 替 Workbench 安裝網友開發的外掛
▲ 點選後開啟，就會進行安裝
我們開始匯出流程
▲外掛安裝完成後，我們點選開新模型
▲接著再點選匯入SQL
▲選取我們的要轉換為 migration 的 SQL 文件
▲點選下一步
▲選取後畫面會顯示你的 SQL 內的 Tables，接著我們點選剛剛安裝好的外掛，準備匯出
▲會顯示預覽，因為每個 Table 會產出一支 migrate ，所以我們要建立資料夾來存放
▲完成後就會看到資料夾，有依照格式產出 migrate 囉！這時候只要把這批文件，丟到 Laravel 底下的 database\migrations，並運行 php artisan migrate 就會自動匯入資料表。
2019-02-19 / JSN / 0 Comments / 43 人來過
因為 Laravel 會製作快取，所以我們要清空
測試看看
|
|
php artisan tinker env('DB_DATABASE') |
這樣就可以正常顯示了