從零開始寫後端-紀錄

#前情提要
目前正在做專題,我只會前端沒寫過後端(有看過一點Springboot影片)
# 制定目標
階段一
基礎訪問(Postman)可以 get+post 網頁可以拿到API資料(設定CORS)
— 卡關的地方
前端用js fetch 的 header格式帶錯導致後端收到空物件

階段二
連線mysql做SQL query

階段三
完成DB schema規劃,建表和欄位

階段四
正式開工,邊做邊找 BestPractice

#疑問吞吐區
JWT驗證基本範例怎麼寫?
第三方登入怎麼串接?
RESTful API 路由架構怎麼訂擴充性最高?
資料夾結構怎麼開?
後端如何阻擋 錯誤的檔案格式 ex我要txt給我png?
後端如何阻擋 json錯誤格式? 判斷multer req.file.mimetype
MIME類型有哪些?

#學習區

0601新增幾個很棒的網站
今晚我想來點 Express 佐 MVC 分層架構 :: 第 12 屆 iThome 鐵人賽

Express “Hello World” 範例 (expressjs.com)

0524 新增2個很棒的文章和教學影片

>想要在一台電腦安裝多個Nodejs怎麼做?
>為什麼需要module?如何寫?
>Nodejs如何做request和response?
>Buffer和Stream的概念是什麼?

這系列把基礎知識都提到了很讚

使用Axios你的API都怎麼管理? — I am Mike — Medium
>解決API網域很多管理不方便的問題

> 如何開發React+Express+MySQL CRUD First App

React.js + Express.js 基本專案建置 — Harry Xie — Medium

> 基本建置指令

#名詞區

Program-Based vs Configuration-Based |沒搞懂…

Session-Based vs Token-Based |網頁驗證

Google reCAPTCHA |我不是機器人

Isomorphic |同構 目前理解成前後端共用的邏輯

Single Source of Truth |不要拆分變數

Mocha |自動化測試腳本

ODM / ORM |操作DB

TypeScript Decorator |把共用的地方抽出去 wrapper

#套件名稱
nodemone 自動重啟更新,類似liveserver
helmet 安全防護
query-string 編碼轉換,時代的眼淚
body-parser 編碼轉換 ,主流
multer 檔案上傳套件
dotenv 存敏感資料套件 (如密碼)
ejs 後端渲染模板語法 如同 php的 <?php … ?>

#採坑區 & 比較

  1. import vs require どち?

通常都是用require,特色是可以動態,若要用ES6的import需要改package.json 加入type 值用 module,否則會噴錯
參考: ECMAScript Modules | Node.js v13.14.0 Documentation (nodejs.org)

2. querystring vs body-parser どち?

兩者都是parser轉換編碼的套件,選後者,因為前者官網說不積極維護了
參考: https://nodejs.org/api/querystring.html

3. POSTMAN的 x-www-form-urlencoded vs form-data

答案在這邊 3樓, 表單POST預設是下面第一個
"x-www-form-urlencoded" body長這樣 "key1=value1&key2=value2"
“form-data” body長這樣key1=value1key2=value2

4. body-parser deprecated undefined extended: provide extended option

答案官方Github文件
express.urlencoded({ extended: true })
//true是使用qs模組 比較強~
//false是使用querystring模組

5. 編碼轉換 qs vs querystring
qs和querystring有什么区别? — SegmentFault 思否

#內功(邏輯)整理

宣告=>設值=>掛載(使用)=>監聽

const express = require(“express”); //引用
const app = express(); //宣告 我理解成new
//…路由 Router
//…套件

app.listen(3011, () => console.log(‘http://localhost:3011/')); //監聽

#學會甚麼?

1.搞懂套件名稱| 一開始完全不懂哪些是express功能,哪些是套件功能
2.Request Header 格式的重要性| 一開始格式錯誤導致後端收到{}//空物件

--

--

--

這邊主要分享自己查資料找不到的資訊,若之後有人遇到相同的問題便可省去不少時間。

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
亂叫阿醇

亂叫阿醇

這邊主要分享自己查資料找不到的資訊,若之後有人遇到相同的問題便可省去不少時間。

More from Medium

Fish-Pond-Project

ELIA Preservation & Guarantee

Dead Knight Article

$IOTX is about to get listed on Bit.Store soon, please stay tuned!