偽裝成人類的前端工程驢

目前顯示的是有「12thironman」標籤的文章顯示全部

in第12屆iT邦幫忙鐵人賽

[day30][後記] 什麼都略懂一點，生活更多彩一些。

驢子 11月 18, 2020

什麼都略懂一點，生活更多彩一些。經過這ㄧ系列跑下來，應該有摸索到各式各樣的新東西和新技術了。有辦法自己將伺服器部屬到網路上做使用，擁有了操控mongoDB的能力。知道怎麼建立API將資料庫的東西丟給前端！跑過了webpack的自動化編譯流程，玩過了express建立的node伺服器，架設了Vue3的webpack環境，試用了Scss和typescrip、摸過樣版語言、走過vue3的vuexroutes和composition、用到了linebot也複製了bootstrap！這裡面一定會有你感興趣的部分，要繼續使用相同架構也會踩到許多的雷。雖然這系列結束了，但這不是真的結束。還有許多需要完成的功能。像是建立網站程式碼更新後自動刷新功能，可利用websocket（推薦用這個！因為nodemon會自動重啟伺…

閱讀完整內容

inheroku

[day29][部屬] heroku託管伺服器與github的結合，超簡單的自動化部屬

驢子 11月 18, 2020

heroku，免費託管伺服器終於走到了這一步，最後的最後就是將伺服器託管道雲端了！在這過程你用過了雲端資料庫、webpack、typescript和vue等等東西，最後就是將你的成果部屬到伺服器！並利用heroku已經整合好的自動化佈署讓你每次推完就立刻更新伺服器，開始註冊吧！ https://www.heroku.com/ 使用與註冊可以參考這個網站搭配 Git 在 Heroku 上部署網站的手把手教學輸入基本資料然後會寄出ㄧ封信，前往開啟連結後輸入密碼同意...你也沒辦法拒絕不是嗎？進入登入完成的畫面！接著利用github自動佈署搜尋你建立的專案這樣就算完成了！接著啟用自動佈署然後讓我們最後開啟VScode進行ㄧ些heroku用的設定！heroku的設定主要是在package上，當你…

閱讀完整內容

insourcetree

[day28][版控] github，自動部屬heroku的最簡單選擇

驢子 11月 18, 2020

版本控制一路走來學習了各種東西與一次重構，終於快要到將網站部屬的階段了！現在阻擋你佈署的最後關卡就是建立一個git讓heroku可以佈署伺服器了，讓我們開始吧！ GitHub Desktop VS sourcetree 簡單的使用圖形化介面！當然通常來說使用指令感覺比較潮，但我都用圖形化介面。偶爾圖形化介面沒有提供對應功能時才會輸入指令，像是undo之類的。這邊你要用哪一個都可以，我是兩個都有用。但是更偏好用sourcetree這樣，所以就用souretree接著講解其實要佈署到heroku並不一定需要用github，擁有git用指令commit就可以了。但heroku有支援github自動部屬ㄟ！！這邊我們跳過全部的過程直接飛到你已經註冊好帳號那一步！ github 官網登入後建立一個專案 git端…

閱讀完整內容

intypescript

[day27][後端][實作] 引入Typescipt，webpack的loader（下）

驢子 11月 18, 2020

前情題要在上這一篇中我們成功讓webpack可以吃下".ts"檔案，這一篇開始講解基本typescript可以幹嘛？幸運的是鐵人賽已經有一篇非常優秀的typescript講解並深入淺出的說明了，他幫助我再走歪的道路走了超遠！讓 TypeScript 成為你全端開發的 ACE！，這有出書但我買了還沒看= =" 這邊就試著定義axios回來的資料，見識看看ts的威力吧！（ts很好用，強烈建議試完下面的定義後也去爬完那個系列！）把( http://localhost:3000/air )的json資料複製下來整理一下吧，可以到這邊貼上( https://codebeautify.org/jsonviewer )。這樣就看到該筆資料的實際形狀了，接著就去定義資料並然後整理好吐…

閱讀完整內容

innodejs

[day26][後端][實作] 帶機密參數API？讓伺服器負責！

驢子 11月 18, 2020

誰都能負責呼叫API 在許多的情況，API總是會需要各種機密參數。這個時候如果讓網頁取得常常會導致許多的資安麻煩，所以這時候如果讓伺服器來負責呼叫API後再把結果回傳遊覽器就會安全很多！這邊會呼叫空氣汙染API示範，首先引入套件"axios"（為什麼是axios？因為前後端都可以用很方便，後端其實有一個request的套件專門用來呼叫網頁或API！雖然被棄用了卻還是有極大的下載量，就可以知道他有多好用了！） npm i axios --save 然後建立一個後端API讓前端呼叫，依序在"app.ts"建立路線藍圖然後建立API src\server\app.ts 略 var indexRouter = require ( './routes/index&#…

閱讀完整內容

inwebpack

[day25][前端][實作] SCSS，一個CSS預處理器

驢子 11月 18, 2020

SCSS簡單教學這邊主要講解SCSS最基本的使用方法，就能讓你應付大部分的狀況！這邊有想要更進一步學習可以看關於我的佛系SCSS開發條列了更多scss可以做到的事情，但是下面的方法組合運用就能應付絕大部分的情況讓我們開始寫scss吧，前往"app.vue"更改一下 src\client\app.vue < template > < div class = "container" > < h1 class = "container_title" > hello {{state.message}} </ h1 > < router-view…

閱讀完整內容