iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
4

回顧

昨天,我列出了ES6常用的語法,接下來我們開始玩玩後端了

目標

  1. 了解前後端的職責、架構
  2. 建立第一個後端應用程式:hello-express

前後端架構

軟體架構對不同的人可能有不同的解釋,請用開放的心態,不需要強求別人

軟體架構常見的有:Centralized computing,peer-to-peer architecture, Client–server model…等。而本主題採的 前後端架構,是屬於 Client–server model。 Client 指的是終端用戶的網頁瀏覽器,Server 指的是提供實際資料或計算的主機。

https://ithelp.ithome.com.tw/upload/images/20181008/20110371PHHqFwmcSE.png

  1. 後端(backend):儲存資料、計算資料、提供資料、提供服務(商業邏輯)的區塊,雖然圖片看起來很得簡單,但實際上的它們可能是叢集的方式存在,或依照能功性被切割(ex: 微服務(Microservices))
    1. 資料庫(database):用儲存、計算、提供資料,常見的資料庫關聯式(Relational database) 像是: MySQL/MSSQL 和 NoSQL 資料庫:MongoDB,Apache Cassandra 和 Redis。我們將會選擇用 MongoDB 來當作資料庫
    2. 應用程式伺服器(application server):提供商業邏輯服務、與前端串接的入口/介面、系統間互相串連。伺服器可能以各種程式語言撰寫,但為了與外界串接(提供服務),需要使用指定網路傳輸協定(Communications Protocol),兩個串接的系統才能有同樣的二元資料(0/1)解讀規則。常見的如:http(s), websocket, ftp(s)…等。
      1. 因為 http(s)介面也會用於網頁瀏覽器,所以也稱做是 Web API (Application Programming Interface) 。 基於 http(s) 所定義的請求方法(Request methods),如:GET/POST/DELETE/PATCH/PUT,把它們當做是對某URL(ex: http://api/account)的動作,就形成了所謂的 REST(ful) API,它不是標準而是「API設計風格」。
      2. 用來架設http(s)伺服器的程式框架就叫作 Web Framework,像是我們採用 Express.js 也是其中之一,也有人把提供API的伺服器的框架叫 API Framework。不論是叫什麼,反正都是為了架設 http(s)的 應用層網路傳輸協定 伺服器
  2. 前端(frontend):提供給客戶端(client)圖形化使用者介面(GUI)的資料,像是把HTML/Javascript/CSS資料送給瀏覽器。另外,Mobile APP(iOS/Adroid)也有人說是前端。
    1. 網頁伺服器(web server):這雖然也是基於 http(s) 的伺服器,但這主要是提供一些靜態的網頁/檔案/圖片給瀏覽器,比較不會多太多的商業邏輯、運算在裡面。常用 Nginx/Apache/IIS 架設,安裝後通常就可以使用。
      1. 因為這個網頁伺服器常常代表客戶端/瀏覽器向隱藏在背後的應用程式伺服器送出要求(request),這行為就叫做 反向代理,它需要知道 request 要送給誰?所以它會存有 路由(routing) 資訊,就如同 路由器 一樣。
    2. 網頁瀏覽器(web browser):瀏覽器(chrome/safari/firefox)收到 HTML/Javascript/CSS資料,便會開始執行並繪製圖形在瀏覽器上,就是我們看的畫面。
      1. 就如同 Markdown一樣,Markdown reader 的實作會導致些微的差異,瀏覽器也是一樣,各家最後生成的畫面有可能會不太一樣,這就是也是前端工師需要花時間的地方。
      2. 網頁畫面主要是由 HTML 組成,當 HTML 是在 網頁瀏覽器(ex: 後端)組成,再送到網頁瀏覽器,這技術叫 Server-Side Rendering
      3. 反之,完全在網頁瀏覽器中透過 Javascript 執行而產生 HTML,這技術叫 Single Page Application(SPA) 。當產生 HTML 的工作移到在瀏覽器上執行的 Javascript 時,常常需要 前端框架 (Frontend Framework) 來有條理地寫 Javascript 程式碼,目前常見有 Vue.jsAngular 或我們要使用的 React

我們利用前後架構圖,終於把他們的職責說完了,其實每個名詞都有它們值得深入學習的地方,不同的技術也有各自的優缺點。

接下來,我們開始建立第一個後端應用程式。


第一個後端應用程式:hello-express

我們將使用 Express 這個 Web Framework 來架設我們的後端應用程式。因為也是網頁伺服器,所以架完後可以值接從瀏覽器送出 http(s) 的要求(request)。

很幸運,Express提供方便的指令幫我們產生一個專案。

建立執行 hello-express

  1. 安裝express-generator:隨便開一個 terminal 後安裝全域指令

    npm install -g express-generator
    

    https://ithelp.ithome.com.tw/upload/images/20181008/201103715wOfSOXFWV.png
    這裡因為有檔案寫入權限的問題,所以需要用 sudo

  2. 使用express 指令:用 express 指令產生一個 Express 框架的 Node.js 專案

    1. 開一個Node.js 專案:建立一個名為 hello-exprss 的資料夾,並以此專案為根目錄

      mkdir hello-exprss
      cd hello-exprss
      
    2. 產生一個 Express 框架

      express --view hbs .
      

      會自動產生整個 Express 專案(Node.js 專案)的結構
      https://ithelp.ithome.com.tw/upload/images/20181008/20110371EVHKAd1brC.png

      這裡看到 --view 選項,這是在設定Express 樣版引擎 要用哪一個? 我選擇用 handlebars
      樣版引擎 是拿來寫 HTML 樣版(template)用的,把 HTML 寫好,留下資料要填入的欄位,當 request 來的時候就可以把字串填入,例:

      <html>
      <body>
        <div>
          Hi! {{username}}
        </div>
      </body>
      </html>
      

      {{username}} 就是未來要填入的字串,樣版引擎可以幫我們把字串填入(ex: const html = template({username: 'billy'});),就會產生最後的 HTML,就可以回傳了。

      可以輸入 express --help 查看更多
      https://ithelp.ithome.com.tw/upload/images/20181008/20110371RBukBIlN5U.png

  3. 安裝相依套件:在專案根目錄的 terminal 下執行

    npm inatall
    
  4. 執行 express:在專案根目錄的 terminal 下執行

    DEBUG=hello-exprss:* npm start
    

    這行做兩個件事

    1. 設定 DEBUG 這環境變數,伺服器執行時可以在主行程(main process)中透過 process.env['DEBUG'] 抓到值 hello-exprss:*,之後會好好的來介紹它。
    2. npm start 也是 npm run start,從 package.json 中看出
      "scripts": {
        "start": "node ./bin/www"
      },
      
      就是在執行 node ./bin/www
  5. 查看是否安裝成功
    打開瀏覽器,到 http://localhost:3000/,看到下圖就表是成功了
    https://ithelp.ithome.com.tw/upload/images/20181008/20110371lXMlU8NY1L.png
    若查看 terminal,可以看到從瀏覽器送出的 requests
    https://ithelp.ithome.com.tw/upload/images/20181008/20110371yqCgevQfV8.png

停止 hello-express

停止很簡單,在執行 express的 terminal 中,用按鍵

ctl + c

會看到 ^C 終止執行
https://ithelp.ithome.com.tw/upload/images/20181008/20110371X9LPswMhs4.png

背景執行伺服器

伺服器的執行應該要能在背景運作,不能因為關閉 terminal 就無法運作。這裡只先列出來,未來有機會再說明

  1. &:執行一個背景執行的指令。停止要用 kill 指令,刪除行程
  2. systemctl:設定一個 linux 的 service,用 systemctl start <service>,執行服務
  3. screenscreen工具,可以背景開啟多個shell,伺服器指令執行在裡面
  4. pm2: pm2 是 Node.js 的行程管理器,不只可以在背景執行,還可以以叢集的方法執行伺服器
  5. docker 容器:本主題想要介紹的方法,用 docker 執行一個載有伺服器映象檔的容器

總結

今天我們提到前後端架構及他們的職責,也粗略地點出各種技術的名詞。最後,利用 express-generator 快速地建立第一個後端伺服器,也用瀏覽器訪問它。

解放iT邦幫忙工具列

寫了幾天的文章,我真的受不了工具列一直在上面,上傳圖片超不方便,所以寫了簡單的 javascript,把工具欄置底

置底工具列

以下用 Chrome 示範:

  1. 在書籤加入一個新的書籤
    https://ithelp.ithome.com.tw/upload/images/20181008/20110371nGqKIktg1J.png

  2. 填入 Name, URL
    Name: iT邦幫忙工具列置底
    URL:下面的 javascript貼上

    javascript: (function () { var doms = window.document.getElementsByClassName('editor-toolbar'); var dom = doms.length > 0 ? doms[0] : undefined; if(!dom) return; var style = dom.style || {}; style.bottom = '10px'; style.right = '0px'; style.position = 'fixed'; style.zIndex = '10'; })();
    

    https://ithelp.ithome.com.tw/upload/images/20181008/20110371FQ6DiHEpAE.png

之後就在編輯模式時,點這書籤就好了。

https://ithelp.ithome.com.tw/upload/images/20181008/20110371MI6PQoaO9W.png

可拖移版本

利用 jQuery 和 jQuery UI ,做成可拖移版也不錯

Name: iT邦幫忙工具列脫離
URL:

javascript: (function () { var defaultStyle = { bottom: '10px', right: '0px', position: 'fixed', zIndex: '10', }; var defaultStyleForDrag = { position: 'fixed', zIndex: '10', }; var dependencies = ['https://code.jquery.com/ui/1.12.1/jquery-ui.js']; function defaultMount() { var doms = window.document.getElementsByClassName('editor-toolbar'); var dom = doms.length > 0 ? doms[0] : undefined; if (!dom) return; var style = dom.style || {}; Object.keys(defaultStyle).forEach(key => { style[key] = defaultStyle[key]; }); } if(window.jQuery) { function loadScript(src) { return new Promise((resolve, reject) => { $.ajax({ url: src, dataType: 'script', success: function(){ resolve() }, async: true }).fail(function(e) { reject(e); }); }); } Promise.all(dependencies.map(loadScript)) .then(() => { $('.editor-toolbar').css(defaultStyleForDrag); $('.editor-toolbar').draggable(); }) .catch(() => { defaultMount(); }) } else { defaultMount(); } })();

上一篇
Day 7 - 一周目- ES6 讓人欲罷不能的語法
下一篇
Day 9 - 一周目- 開始玩轉後端(二)
系列文
用js成為老闆心中的全端工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1

我也覺得很不方便~還有預覽的按鈕也在上面,每次都要滑上去(顯示為手指抽筋)感謝大大的程式碼!

我發現做成可拖移版也不錯
/images/emoticon/emoticon39.gif

讚!

Bater iT邦新手 4 級 ‧ 2018-10-09 17:42:26 檢舉

想要預覽的話,也可以用快捷鍵command+p

0
Darwin Watterson
iT邦好手 1 級 ‧ 2018-10-09 13:22:16

雖然自身是開發 Java Web, 不過一直很看好 Node.js + MongoDB 發光發熱的那一天!
一來開發語言統一了
二來熟悉 MongoDB 這類 NoSQL 的開發者往後薪資更好談了(私心覺得 XD)
還有22天, 大大加油!

我要留言

立即登入留言