上周開始,進行開發研究記錄,效果不錯,繼續前進。
記錄開發與生活的點滴。
2017/4/3(周一):
天氣不錯,帶孩子出去游玩,并吃了好吃的生日蛋糕
關于oauth2.0服務器,原本自己實現
目前發現有更好的選擇:
使用github進行oauth2.0驗證授權
2017/4/4(周二):
竟然發現微軟的chakracore javascript引擎可以完美的與c++進行互調,現在感覺蠻爽的。
為了更好的了解chakracore javascript引擎,就寫篇文章吧!
名字叫: ms chakracore js引擎之初體念
2017/4/5(周三):
上午:
花了兩個小時,終于搞定了google v8引擎的鏈接問題。
碰到很多鏈接問題,查找需要的鏈接庫,一個個試過去
終于弄齊所有鏈接庫,成功生成v8test.exe程序!
成功的將測試程序在VS2015中順利運行起來,真是不容易啊!!
龐大的V8靜態鏈接庫,Release版靜態鏈接庫文件超過2個G,
編譯后的程序鏈接需要花200秒,好在exe文件尺寸還能接受。
目前,三大JS Engine都已經編譯成功,
并且已經在ms chakra和google v8中成功的運行起來,
接下來就是使用moliza spidermonkey運行一個Demo.
spidermonkey還是很好用的,比較容易上手
未來是屬于JavaScript的,要選擇一個JS引擎作為腳本解釋器使用。
下午:
為OAuth2.0實戰教程制作登陸頁面
簡單期間,直接參考簡書html/css
花了半個小時,抽取出必要文件。
花了兩個小時,邊學vue2.0,邊將上面的頁面移植到vue中去
并且將沒用到的css去除掉,這樣就干凈利落了
整個頁面html25行左右,css 100行,看著也心情舒暢
今天的成果還是蠻多的啦,很滿意!
2017/4/6(周四):
上午:
研究一下iconfont相關知識,
發現現在前端都在使用。
那肯定也要掌握一下!
通過icomoon網站,生成iconfont
然后在vue2中使用,圖標正確顯示出來了
下午:
有事出門會客
晚上:
構造loopback服務器,建立oauth2.0登陸數據庫模型:
構造數據庫對象:
user
userIdentity
userCredential
accessToken配置datasource為mongodb
設置model-config,建立起數據庫對象和數據源的關聯關系
config cookieSecret 用于session cookie技術
5、配置 session密碼,用于session cookie技術
6、npm passport-facebook以及passport-github
7、http以及https支持
8、編寫loopback初始化代碼,讓服務器運行起來
2017/4/7(周五):
上午:
繼續昨晚的工作,編寫Loopback服務器程序
-
localhost:3000后進入首頁
首頁.png 點擊早餐頁面,由于沒登陸,因此轉跳到登陸頁面
在loopback中,只要使用如下代碼,就可以完成上述功能
關鍵是 ensureLoggedIn('/login') 這句代碼
//早餐頁面
app.get('/breakfast', ensureLoggedIn('/login'), function(req, res) {
res.render('breakfast.html');
});
授權成功,將驗證數據寫入mongodb,并跳轉到需要的頁面
現在是11.30分,上午工作結束,吃飯運動
下午:
增加cookie和session支持
花了一個半小時,搞定cookie和session在loopback中存儲問題
原本是存儲在內存,導致每次服務器啟動都會重新登陸
現在則存儲在mongodb,當然也可以存儲在內存服務器中
目前已經可以支持github ouath2.0授權,并且通過cookies和session(持續化到mongodb),在accessToken失效前不需要重新授權登陸了
開始實現local注冊登陸方式,既需要注冊,
并且發郵件驗證后才能給予注冊通過并登陸
以jacky11cn@aliyun.com的郵箱進行注冊,自動從47178234@qq.com進行驗證回復
完成本地用戶注冊并登陸
2017/4/8(周六):
上午/下午:
帶著孩子出去玩
晚上:
整合本地登陸,你會發現整個邏輯需要增加多個頁面
目前服務器端基本的注冊,登陸差不多都好了
現在需要的是對應的頁面,目前也就主頁,登陸頁,早餐頁
由于本地登陸,要引入注冊頁,退出頁等
現在除了登陸頁外,其他都是jquery,現在開始需要研究
vue2,特別是單頁路由的方式和原理
在JQuery中,我使用mobilebone作為單頁切換,效果不錯
現在開始要使用vue2中的路由功能
編譯通過微軟chakracore js 引擎版 nodejs,試著測試一下。
2017/4/9(周日):
上午:
孩子學校要進行系鞋帶比賽,目的是樹立良好的
生活自理能力及增加安全性。
發現一個不錯的系鞋帶方式
孩子學了5分鐘,練習了20分鐘,系出的鞋帶又牢又好看!
重要的是,再也不會過半小時就散開,并且避免自己踩到
鞋帶而發生本可避免的悲劇!
下午:
繼續vue2.0之旅,研究一下其體系結構
我個人理解,并不表示是正確的!
vue中的指令和組件
組件我可以看成自定義標簽,或者理解為一個UI控件
指令我可以堪稱標簽的屬性,或者理解為一個UI控件的屬性
v-model 指令在表單控件元素上創建雙向數據綁定。
它會根據控件類型自動選取正確的方法來更新元素
v-model 本質上不過是語法糖,它負責監聽用戶的輸入事件以更新數據,并特別處理一些極端的例子
假設v-model用于text類型的input上,實際執行的是下面的綁定:
<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />
v-model是動態綁定值到value,然后監聽input的input事件獲取值后賦給dataA的一個過程
加.lazy
<input v-model.lazy="msg" >
加.number
將用戶的輸入值轉為 Number 類型
<input v-model.number="age" type="number">
加.trim
自動過濾用戶輸入的首尾空格
<input v-model.trim="msg">
在 Vue.js 中,父子組件的關系可以總結為 props down, events up 。
父組件通過 props 向下傳遞數據給子組件,子組件通過 events 給父組件發送消息