[Day4] 用前端角度來聊聊～後端對前端來說是怎樣的存在？

2022 iThome 鐵人賽

DAY 4

自我挑戰組

SPYxFRONTEND ～懂一點後端真是讓人哇哭哇哭系列第 4 篇

14th鐵人賽

Ado Lin

2022-09-05 21:07:04

885 瀏覽

分享至

前言

前幾天玩了一下 Chakra UI，
是時候該來碰一下後端了XD?
不過在正式接觸後端 API 之前，
今天讓我們來聊一下前端跟後端的關係吧~

本日正文

我不能只碰前端就好嗎？

前端後端的角色定位，
相信大家應該都看過不少網路上優秀大大的說明文章，
講得深入淺出又易懂，
因此今天我就用最直白的方式來說明。

身為一個前端，
你可能會被要求要完成一個畫面，
例如今天被要求寫一個 2022 鐵人餐廳銷售排行 TOP5，
然後你可能不到5分鐘就可以刻出這樣的介面：
(PS. 以下是用 Chakra UI 寫的，所以可以自訂色碼，沒有 import 到 CSS 哦，詳情可見前兩天的文章)

import * as React from "react";
import { Text, Flex, ListItem, OrderedList } from "@chakra-ui/react";

export default function Example() {
  return (
    <>
      <Text my={4} as="h2" fontSize="2xl" textAlign="center">
        2022 鐵人餐廳每月銷售排行 TOP5
      </Text>
      <OrderedList px={4}>
        <ListItem my={2}>
          <Text>牛肉麵</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color="#FF8000">★★★★★</Text>
          </Flex>
          <Text>銷售量：66</Text>
        </ListItem>
        <ListItem my={2}>
          <Text>小籠包</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color="#FF8000">★★★★☆</Text>
          </Flex>
          <Text>銷售量：55</Text>
        </ListItem>
        ... (略)
    </>
  );
}

但重點來了，這個排行是每個月更新的，
下個月排名更新了，
這時候你只能笨笨的手動更改上面的資料......

修旦幾勒
等等！不對吧，
身為一個工程師，
你不會想要做這種 高級手工藝 (=== 工人智慧) 的事，對吧？
(註：形容只是一直重複在做複製貼上這種固定的動作，但明明有更好的方法)

這時候就是你該去 call 後端的時候啦！
假設現在後端開了一支 API，可能叫 getMenuOrder，
這支 API 回傳的資料格式大概長這樣：

[
	{
		"name": "牛肉麵",
		"salesVolume": 66,
	},
	{
		"name": "小籠包",
		"salesVolume": 55,
	},
	... 
	...(略)
]

如果你可以從後端 API getMenuOrder 動態拿到銷售資料，
那麼理論上，
你只要把本來上面寫死的菜名跟銷售量的地方，

<ListItem my={2}>
  <Text>牛肉麵</Text>
  <Text>銷售量：66</Text>
</ListItem>

換成 {變數}，像這樣：

<ListItem my={2}>
  <Text>{name}</Text>
  <Text>銷售量：{salesVolume}</Text>
</ListItem>

你寫好的前端介面就會自動更新了(灑花)

前端後端應該是相輔相成的

簡單來說，我覺得 後端 是 前端 跟 資料 的介接橋樑

前端跟後端拿資料渲染到畫面上，
後端跟資料庫拿完會再傳給前端，
然後前端上如果有什麼互動，
例如需要點擊按鈕就做 update，
並不是由前端直接存取資料庫，
而是由前端發送請求給後端，
才由後端真的對資料庫去做 update 的動作。