發表文章

[JavaScript] 將 CSV 檔案轉換成 JSON 資料

我們在拿到客戶提供的資料的時候常常會拿到 excel 檔案(這算幸福的)
至少我們可以簡單的利用一些軟體轉成 csv丟進資料庫裡處理。如果搭配個後端 API 基本上資料都不會是太大的問題可以做成 JSON 供 JavaScript 使用,但是如果在沒有後端或是資料庫的環境中呢?


首先我們先把 csv 檔案放到 server上 利用 $.get() 取得內容,接著將內容String 丟進我們待會會用到的 csvJSON 外掛 function 中。就會取得 JSON
但是這個時候的 JSON 還是 String 的形態所以還無法被解析,我們再加個 JSON.parse() 就可以拿到整個 JSON 物件摟!


function 來源:
https://gist.github.com/iwek/7154578

fullCalender 語系設定

圖片
fullCalender 是一個非常好用的行事曆外掛。
官網在這
https://fullcalendar.io

不過他預設的日期格式是使用英文(月份這樣超麻煩,我是文盲)

好險其實他有提供語言包
locale-all.js
這個檔案在官方下載的檔案
然後掛上


<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/locale-all.js'></script>
<script>

  $(function() {

    $('#calendar').fullCalendar({
      locale: 'zh-tw'
    });

  });

</script>



就變成我們看的懂得啦!


官方說明文件:
https://fullcalendar.io/docs/locale

php CodeIgniter 使用 mongoDB

這是使用的外掛
http://intekhab.in/mongodb-library-for-codeigniter.html

安裝設定主要是要設定 config 和 library 這個部分可以在這邊直接找到 github 連結下載即可。

使用的方式在官方的文件上面並沒有很清楚的著墨 所以我們在這邊補充一下


資料新增 insert
$user = array('username' =>"james", 'name' => "wolf2","time"=>time()); $this->mongo_db->insert('users', $user);
這樣就完成了資料新增的動作了,需要注意的一點就是:雖然 mongodb 是 json 的儲存方式。但是 CIMongo 要求輸入的格式是陣列喔


取得資料 get
$list = $this->mongo_db->get('users');

找尋資料 where
$list = $this->mongo_db->where('name','wolf2')->get('users');

Vue.js 取得 ajax 清單資料

圖片
在 Vue.js 中並沒有內建自己的呼叫 ajax 功能,所以 Vue.js 官方有推薦一款 axios。

我們可以先試著用一下

axios.get("api_booking/get_order_list",{ params: { member_id: "james" } }).then(response => this.items = response.data.datalist); 上面這個例子就是我們可以利用 get 的方式去取得 API 的資料。我們可以看到這裡面直接可以使用 then 也就是說可以確認 api 是跑完了以後才執行裡面的動作。


new Vue({ el:"#list", data:{ items: [] }, mounted(){ axios.get("api_booking/get_order_list",{ params: { member_id: "james" } }).then(response => this.items = response.data.datalist); } })
結合 Vue.js 就會變成這樣。當取得資料後可以將資料寫入 items 這個變數給 Vue.js 使用

Let's Encrypt 免費 SSL 憑證

之前~ SSL 憑證都是要錢的,又很難設定。申請還要填寫一堆表格。自從 2016年開始陸陸續續有一些免費的SSL憑證可以拿來使用。重點是 小灰狼剛剛試用了一下,設定超簡單。在 Linux 的指令裡面就可以完成
1.先利用 yum 安裝需要的相關套件 sudo yum install gcc libffi-devel python-devel openssl-devel git
2.安裝設定程式 cd /usr/share sudo git clone https://github.com/letsencrypt/letsencrypt letsencrypt
3.給他跑下去執行 cd /usr/share/letsencrypt sudo ./letsencrypt-auto --apache -d 你要申請的網域名稱 設定自動更新憑證 sudo /usr/share/letsencrypt/letsencrypt-auto renew sudo vim /etc/cron.daily/letsencrypt-renew 內容: #!/bin/bash /usr/share/letsencrypt/letsencrypt-auto renew > /var/log/letsencrypt-auto.log sudo chmod +x /etc/cron.daily/letsencrypt-renew

利用 Firebase 達成 Facebook 第三方登入

圖片
第三方登入在目前的網站系統中已經是廣泛被使用的功能了。
如果你跟我一樣每次實作 Facebook 登入都會遇到奇怪的問題的話~不妨可以試試看利用 Firebase 實作。









第一步仍然是要記得載入 Firebase 的環境: 這個我就不多說了


接著就是在 Firebase 上的設定了,請依照上圖指示動作。至於應用程式ID和應用程式密鑰是指 Facebook 那邊的應用程式設定,請記得在 Facebook 那邊申請。最後記得將重新導向 URI 新增到應用程式設定。

接著

我們要來去設定重新導向網域,這樣才可以開始實作(Facebook 彷彿就不用特別設定應用程式網址了,改用上一張圖的重新導向 URI )

接著就是實作的 code
文件在此



function login(){ var provider = new firebase.auth.FacebookAuthProvider(); provider.setCustomParameters({ 'display': 'page' }); // provider.addScope('user_birthday'); // provider.addScope('email'); firebase.auth().signInWithRedirect(provider).then(function(result) { console.log(result); // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = result.credential.accessToken; // The signed-in user info. var user = result.user; console.log(user); // ... }).catch(function(error) { console.log(error); // Handle Errors h…

Laravel 5.3 自學筆記 (建立 Auth 登入系統)

圖片
剛建立起來的 Laravel 真是有夠無聊,因為裡面什麼都沒有。所以我們拿一個會員登入功能來驗證一下他是不是超級強大。

首先先建立一個路由:

php artisan make:auth
接著,把資料庫備齊(先假設你 .env 設定過了)
php artisan migrate 如此一來,artisan 就已經幫你把 登入相關的功能 Login,Register,Logout 都寫好了~神奇吧!

註冊畫面
登入畫面,還有記住帳號和忘記密碼的功能
忘記密碼

Auth 文件