開發(fā)周記(2017/4/3-2017/4/9)

上周開始,進行開發(fā)研究記錄,效果不錯,繼續(xù)前進。
記錄開發(fā)與生活的點滴。

上周周記(2017/3/26-2017/4/2)

2017/4/3(周一):

 天氣不錯,帶孩子出去游玩,并吃了好吃的生日蛋糕
滿園春色.jpg
生日歡樂.jpg
生日蛋糕.jpg
關(guān)于oauth2.0服務(wù)器,原本自己實現(xiàn)
目前發(fā)現(xiàn)有更好的選擇:
使用github進行oauth2.0驗證授權(quán)

撰寫OAuth2.0實戰(zhàn)1(分析簡書的微信登陸及實現(xiàn))

2017/4/4(周二):

竟然發(fā)現(xiàn)微軟的chakracore javascript引擎可以完美的與c++進行互調(diào),現(xiàn)在感覺蠻爽的。
chakracoreDemo.jpg
為了更好的了解chakracore javascript引擎,就寫篇文章吧!
名字叫: ms chakracore js引擎之初體念

2017/4/5(周三):

上午:
花了兩個小時,終于搞定了google v8引擎的鏈接問題。
碰到很多鏈接問題,查找需要的鏈接庫,一個個試過去
終于弄齊所有鏈接庫,成功生成v8test.exe程序!
成功的將測試程序在VS2015中順利運行起來,真是不容易啊!!

龐大的V8靜態(tài)鏈接庫,Release版靜態(tài)鏈接庫文件超過2個G,
編譯后的程序鏈接需要花200秒,好在exe文件尺寸還能接受。
v8compile.jpg
v8test.jpg
目前,三大JS Engine都已經(jīng)編譯成功,
并且已經(jīng)在ms chakra和google v8中成功的運行起來,
接下來就是使用moliza spidermonkey運行一個Demo.

spidermonkey還是很好用的,比較容易上手
spidermonkeyDemo.jpg
未來是屬于JavaScript的,要選擇一個JS引擎作為腳本解釋器使用。

下午:

為OAuth2.0實戰(zhàn)教程制作登陸頁面
簡單期間,直接參考簡書html/css
花了半個小時,抽取出必要文件。
登陸頁面.png
簡書登陸.png
花了兩個小時,邊學vue2.0,邊將上面的頁面移植到vue中去
并且將沒用到的css去除掉,這樣就干凈利落了
整個頁面html25行左右,css 100行,看著也心情舒暢
login-html.png
login-vue2.png
icon字體引入出錯.png
 今天的成果還是蠻多的啦,很滿意!

2017/4/6(周四):

上午:

研究一下iconfont相關(guān)知識,
發(fā)現(xiàn)現(xiàn)在前端都在使用。
那肯定也要掌握一下!
icomoon圖標.png
通過icomoon網(wǎng)站,生成iconfont
然后在vue2中使用,圖標正確顯示出來了

下午:

有事出門會客

晚上:

構(gòu)造loopback服務(wù)器,建立oauth2.0登陸數(shù)據(jù)庫模型:
  1. 構(gòu)造數(shù)據(jù)庫對象:
    user
    userIdentity
    userCredential
    accessToken

  2. 配置datasource為mongodb

  3. 設(shè)置model-config,建立起數(shù)據(jù)庫對象和數(shù)據(jù)源的關(guān)聯(lián)關(guān)系

  4. config cookieSecret 用于session cookie技術(shù)

5、配置 session密碼,用于session cookie技術(shù)

6、npm passport-facebook以及passport-github

7、http以及https支持

8、編寫loopback初始化代碼,讓服務(wù)器運行起來

2017/4/7(周五):

上午:

繼續(xù)昨晚的工作,編寫Loopback服務(wù)器程序
  • localhost:3000后進入首頁

    首頁.png

  • 點擊早餐頁面,由于沒登陸,因此轉(zhuǎn)跳到登陸頁面

進入登陸頁面.png

在loopback中,只要使用如下代碼,就可以完成上述功能
關(guān)鍵是 ensureLoggedIn('/login') 這句代碼

//早餐頁面
app.get('/breakfast', ensureLoggedIn('/login'), function(req, res) {
    res.render('breakfast.html');
});
授權(quán)成功,將驗證數(shù)據(jù)寫入mongodb,并跳轉(zhuǎn)到需要的頁面
github_oauth2_授權(quán)成功_mongodb數(shù)據(jù).png
早餐頁面.png
現(xiàn)在是11.30分,上午工作結(jié)束,吃飯運動

下午:

增加cookie和session支持
花了一個半小時,搞定cookie和session在loopback中存儲問題
原本是存儲在內(nèi)存,導(dǎo)致每次服務(wù)器啟動都會重新登陸
現(xiàn)在則存儲在mongodb,當然也可以存儲在內(nèi)存服務(wù)器中

目前已經(jīng)可以支持github ouath2.0授權(quán),并且通過cookies和session(持續(xù)化到mongodb),在accessToken失效前不需要重新授權(quán)登陸了

開始實現(xiàn)local注冊登陸方式,既需要注冊,
并且發(fā)郵件驗證后才能給予注冊通過并登陸
本地郵箱注冊成功
驗證郵件.png

jacky11cn@aliyun.com的郵箱進行注冊,自動從47178234@qq.com進行驗證回復(fù)

完成本地用戶注冊并登陸

2017/4/8(周六):

上午/下午:

帶著孩子出去玩

晚上:

整合本地登陸,你會發(fā)現(xiàn)整個邏輯需要增加多個頁面
目前服務(wù)器端基本的注冊,登陸差不多都好了
現(xiàn)在需要的是對應(yīng)的頁面,目前也就主頁,登陸頁,早餐頁
由于本地登陸,要引入注冊頁,退出頁等
現(xiàn)在除了登陸頁外,其他都是jquery,現(xiàn)在開始需要研究
vue2,特別是單頁路由的方式和原理
在JQuery中,我使用mobilebone作為單頁切換,效果不錯
現(xiàn)在開始要使用vue2中的路由功能
微軟chakra版nodejs.png
編譯通過微軟chakracore js 引擎版 nodejs,試著測試一下。

2017/4/9(周日):

上午:

孩子學校要進行系鞋帶比賽,目的是樹立良好的
生活自理能力及增加安全性。
發(fā)現(xiàn)一個不錯的系鞋帶方式
孩子學了5分鐘,練習了20分鐘,系出的鞋帶又牢又好看!
重要的是,再也不會過半小時就散開,并且避免自己踩到
鞋帶而發(fā)生本可避免的悲劇!
do1.jpg
do2.jpg

下午:

繼續(xù)vue2.0之旅,研究一下其體系結(jié)構(gòu)

我個人理解,并不表示是正確的!

vue中的指令和組件

組件我可以看成自定義標簽,或者理解為一個UI控件
指令我可以堪稱標簽的屬性,或者理解為一個UI控件的屬性

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。
它會根據(jù)控件類型自動選取正確的方法來更新元素

v-model 本質(zhì)上不過是語法糖,它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù),并特別處理一些極端的例子

假設(shè)v-model用于text類型的input上,實際執(zhí)行的是下面的綁定:

<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />

v-model是動態(tài)綁定值到value,然后監(jiān)聽input的input事件獲取值后賦給dataA的一個過程

加.lazy


<input v-model.lazy="msg" >

加.number

將用戶的輸入值轉(zhuǎn)為 Number 類型
<input v-model.number="age" type="number">

加.trim

自動過濾用戶輸入的首尾空格
<input v-model.trim="msg">

在 Vue.js 中,父子組件的關(guān)系可以總結(jié)為 props down, events up 。
父組件通過 props 向下傳遞數(shù)據(jù)給子組件,子組件通過 events 給父組件發(fā)送消息
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (2017年3月26日) 進行技術(shù)分享的同時,決定自己做一個基礎(chǔ)項目,先進行技術(shù)可行性研究。 以每周為單位,如實的...
    隨風而行之青衫磊落險峰行閱讀 1,709評論 2 5
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,724評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評論 25 708
  • 1.我長的丑是后天形成的,小時候到青春期我家那兒誰都說劉家這孩子真俊,成年之后胖了幾十斤,五官全都被肥肉擠變形了 ...
    情話信使閱讀 2,673評論 0 5
  • 1.《局外人》 載體:紙質(zhì)書 閱讀時長:兩小時 了解來源:知乎「有哪些超越時代審美的作品」中@回首已是百年身 作者...
    KaTing閱讀 526評論 0 1

友情鏈接更多精彩內(nèi)容