個人向實訓第一周小結

頁面的設計自然是擺在最前面的，自己思考了好久才確定好了設計的風格，腦海裡就是希望能簡潔+可愛+扁平化，因為想要給人是一種比較有「活力」的**，所以最後還是選了藍綠色來做主題色，展示部分靜態頁面：

再來擺一下自己設計的logo（字型用的是現成的）和預設頭像，還是第一次自用ai按自己的想法畫出了正經的東西，雖然還是有很多不足（總感覺還是有點違和），但是不能在這上面花太多精力了，噗：

單詞、意思與例句的關係

一般來說，乙個單詞會有多種意思（1:n），一種意思又對應多個例句（1:n），這裡就是比較讓我糾結的地方，因為如果全部單獨分離出來，就會有單詞表，意思表還有例句表，這樣的話就要單詞+意思兩個字段才能唯一確定某乙個條目。後來嘗試這樣做後發現，其實欄位有很多重複了，而且要查詢例句也很麻煩。所以最後把意思字段合併在單詞表中了，只是乙個單詞可能對應了多條。我自己覺得，這樣可能會出現一些重複的字段內容，但是相比剛才的想法，這樣還是更要好一點。

驗證碼的儲存

我準備做乙個郵箱驗證的功能，因為驗證碼是過一段時間會失效的，並且在使用者斷開網路後，重新連線，還是可能能用，所以最好還是存在資料庫裡面，但是存在記憶體裡就夠了（因為它還是會失效），所以這裡就使用了redis來作為儲存輔助。

q：vue-cli配置less解析

安裝模組less、less-loader、style-loader、css-loader、stylus-loader。

在webpack.base.config.js中module中的rules追加：

此處如果不加入include:，編譯less就會報錯（還不知道是為啥...）。

配置好後，style加入lang屬性為less即可：

q：table-cell垂直居中起效的前置條件table-cell類似於**中的tr，所以按照verticle-align: middle和text-align: center理論上是可以居中的。

以下是我自己的測試結果：

table-cell這個盒子必須要有寬度和高度，要不然它就會只佔內容那麼個大小。

並且寬度和高度必須是具體的數值，不能是百分比，要不然也沒用（除非這個時候又有乙個父盒子，設定為display: table，table-cell就會佔滿這個table）。

首先，如果table-cell裡面的內容是inline/inline-block，是可以垂直居中的。

如果是block的塊，它只會在垂直上顯示居中，水平方向要設定margin: 0 auto才能實現。

q：table-cell水平排列起效的前置條件

做的時候碰到了table-cell的塊不能併排的情況。

首先，如果父盒子是display: table，盒子都會擠在一條，並且按照設定的寬度比進行乙個分配。

這裡的情況是，父盒子為block，也能併排在一起。

q：在內容高度不足的時候，footer能否貼近底端？

傳統的css來說，給容器設定乙個min-height應該是可以定位，後面可以借助css3的sticky這個選項。

q：v-charts進行圖表統計展示

v-charts是餓了麼團隊開發的一些vue圖表元件，目前我還是簡單的按照文件用了下，還是挺方便的，文件傳送門：

q：for...of理解錯誤

必須要迭代器（array，set，map等）才能進行類似操作：

for(var [key, value] of sth)

而普通的object並不是。

q：koa2初認識

使用koa2-generator搭建出乙個專案結構。根據koa-router配置的內容來接受請求。bodyparser幫助我們規格化接收到的資料。

q：如何實現token驗證

有乙個很常用的模組jsonwebtoken，可以直接根據一些資訊生成乙個token。

const token =const jwt = require('jsonwebtoken')
jwt.sign(, '...', );

q: koa2解決跨域使用koa2-cors模組，很容易就能實現：

這裡要獲取原本的reques物件，直接let req = ctx.req就是原本的物件，然後：

req.headers['x-forwarded-for'] ||
req.connection.remoteaddress ||
req.socket.remoteaddress ||
req.connection.socket.remoteaddress;

q：傳輸過程中帶有特殊字元，造成解析錯誤使用axios傳送資料的時候，如果是設定了：

headers:

後台解析資料的時候，會解析錯誤。原因是因為傳送的時候是乙個整的json字串，也就是它是乙個key，它的屬性為空，所以解析必定出錯。

解決方法是傳送的時候加乙個轉化的函式：

transformrequest: [function (data) 
return ret
}]

q：koa2操作redis電腦安裝好redis，開啟redis-cli。

專案中引入npm包redis，檢視官方文件會發現很容易操作：

q：實現郵箱驗證

使用nodemailer這個包，在網易郵箱或者qq郵箱之類的註冊好乙個賬號，開啟它的smtp服務，設定密碼啥的。

var config = 
}var transporter = nodemailer.createtransport(config)
module.exports = function (mail) 
console.log('mail sent:', info.response);
});};

這個匯出的模組函式直接接受乙個寫了郵件資訊的物件，執行後就會去傳送了：

var mail = ;

q：git退出服務的時候埠還是占用的情況對於後台應用，輸入npm run dev方式啟動是可以自動重新整理服務的，如果是npm run start按了ctrl+c或者ctrl+d它的埠還是會被占用（應該是開了另乙個執行緒吧）。

windows的話，輸入netstat -aon | findstr '3000'就可以找到那個pid是多少，然後再taskkill /pid 那個程序id /f強制進行關閉就可以了。

有一些東西都是初次接觸，所以目前了解的都還比較淺，我的感覺就是好好看文件真的很重要，還有就是發現自己在計算機網路有的方面存在一切誤解，希望自己能發現更多慢慢更正過來。再然後乙個問題就是自己的進度不算快，仔細想了想這樣的任務量老師可能還不會滿意，所以下乙個禮拜要抓緊把基本服務做好，然後把後台管理也盡量做出來。

個人向 實訓第一周小結

實訓第一周

實訓第一周 作品（1）

第一周小結

相關推薦

個人向實訓第一周小結

實訓第一周作品（1）