偽裝成人類的前端工程驢

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…

閱讀完整內容

invue

[day24][前端][實作] 用webpack自架Vue3環境（下）－Vue3（composition）

驢子 11月 18, 2020

前情題要在前兩篇中，已經能夠使用Vue3的幾乎所有功能了，這邊要開始實際運用啦！在Vue3中重大的革新就是使用了"composition"去管理狀態，所以這邊就要試作hello composition的小功能拉！composition個人目前也還正在學習，真的還是不太懂。有興趣的可以看看這個網站重新認識 Vue.js | Kuro Hsu ，有介紹Vue3的部分功能首先建立資料夾"composition"然後建立一個"addNumber.js"的檔案 src\client\composition\addNumber.js import { computed, ref, reactive } from 'vue' ; exp…

閱讀完整內容