偽裝成人類的前端工程驢

目前顯示的是有「後端技術」標籤的文章顯示全部

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

[day21][後端][實作] 引入Typesrcipt，webpack的loader（上）

驢子 11月 18, 2020

引入Typescrip 每一個語言都有他要解決的問題，這邊使用typescrip是因為潮可以更好的管理程式碼的架構。並提高程式的自動檢查功能，接著開始吧上篇會著重在講解typescrip如何用webpack設定，下篇會說明程式方面要怎麼做更改首先把所有.js檔都變成.ts檔像這樣可能注意到了多出一個檔案，會慢慢說明。首先更改設定檔"webpack.config.js" webpack.config.js /* webpack.config.js ： Webpack 的設定檔 */ const path = require ( 'path' ); const nodeExternals = require ( 'webpack-node-externa…

閱讀完整內容

inwebpack

[day20][後端][實作] Again，從webpack開始打包的Express（四）

驢子 11月 18, 2020

前情提要上一篇已經讓express正常運作了，這一篇要開始讓伺服器自動更新與重啟，這篇非常適合連假後的禮拜一，很短（可不可以不要上班= = 這邊要運用到之前學過的nodemon讓伺服器自動重啟 npm i nodemon --save-d 然後修改"package.json"更改腳本指令 package.json { "name" : "ithome_30day" , "version" : "1.0.0" , "description" : "IT邦邦忙鐵人賽用git檔案" , "main" : "index.js&qu…

閱讀完整內容

inwebpack

[day19][後端][實作] Again，從webpack開始打包的Express（三）

驢子 11月 18, 2020

前情提要上一篇已經利用webpack重構完成了，但是express是在路由被觸發的時候才去尋找檔案。所以這邊要追加讓檔案自動移動到目的地的功能，這邊就是webpack的plugin功能。有許多功能都可以利用這樣的方式追加，這邊讓views的檔案自動移動到dist就算ok了首先直接開啟伺服器 npm start 連到( http://localhost:3000/ )會看到一樣是壞的，然後把views資料夾複製到dist內。在重新整理網頁，就能正常顯示頁面了！然後注意看到伺服器狀態出現的404，是因為找不到css檔案。這是因為public的檔案一樣沒有傳送過去，這邊是透過同一個plugin進行的這個plugin的網址如下( https://www.npmjs.com/package/copy-web…

閱讀完整內容

inwebpack

[day18][後端][實作] Again，從webpack開始打包的Express（二）

驢子 11月 18, 2020

前情提要在上一篇簡單試用過了webpack的打包功能，這邊要利用 day04 三篇的基礎說明重新建構出webpack架構的express資料夾構首先繼續重開資料夾，接著建立資料夾"src"。然後接著建立三個資料夾，接著在建立對應的資料夾server結構請看以下圖片接著照上一篇安裝webpack的過程和腳本命令走一次，這次我們不建立"app.js"改為建立"www"。這其實就是將express講解結構時的每一個檔案複製過來而已，請依照下圖建構然後安裝webpack對於node伺服器的支援套件並修改對應設定檔 npm i webpack-node-externals --save -d 接著修改webpack的設定檔 webpack.confi…

閱讀完整內容