1、序言

  下班回來，孩子跟妻子沒在家。我吃完留在鍋里的飯菜，就準備開始躺在沙發(fā)里去刷抖音?？蛇@難得的安靜不去干一些寫作整理的事情，的確是挺奢侈的。

  很喜歡這種在進入正題之前，寫點引子的文書風格……，專注技術的朋友還是從分隔線以下閱讀吧

2、最近做的事

  從杭州回到西安后，錢包里的積蓄很快就花光了，終于在失業(yè)第37天的時候找到了新的東家。為了徹底告別Dominor，我以web前端開發(fā)的角色出現(xiàn)在了開發(fā)團隊中。
  我非常感激人力的熱情、直屬領導的坦誠。甚至在我技術面試的時候就讓我去看他們正在建設的管理系統(tǒng)，咨詢我是否有辦法在現(xiàn)有基礎上進行優(yōu)化提升。讓我覺得，在這家規(guī)模較小的公司中，它有著許多大企業(yè)中無法感受到的坦誠、信任。
  我要做的事情呢，專業(yè)性比較強，在系統(tǒng)未上線之前我盡量減少對業(yè)務方向的透露。從技術的方向來講，要用現(xiàn)有開源免費的平臺、工具，實現(xiàn)一套可展示多媒體（文字、圖片、影響、3D展示）的系統(tǒng)，后臺需要包括數(shù)據(jù)的上傳維護，以及數(shù)據(jù)管理人員的訪問控制。
  為了避免把討論的范圍擴大，突出重點，今天我就說說，如何快速地搭建基礎的WEB服務。

3、Express快速開發(fā)

  說到Express的最初入門，我的建議是，快速的弄一個能訪問的環(huán)境來體驗，捯飭，可以達到事半功倍的效果。以下是干貨：

3.1、安裝 nodejs

  網(wǎng)絡上資料非常完善，我這里引個流就行了。

3.2、檢查 Express應用程序生成器是否正常

  nodejs安裝完成后，進入 PS ，輸入以下命令

npx express-generator --version

  看到下圖中的返回信息，就表明時這個生成器在nodejs中已經(jīng)存在且工作正常了。（對的，你沒猜錯，node已經(jīng)把express的生成器當成了自己的一部分）

3.3、創(chuàng)建項目

# 注釋：進入到桌面，并創(chuàng)建名為my_project的目錄
cd Desktop
mkdir my_project
# 注釋：輸入以下命令，生成Express項目 我一般默認使用ejs使用服務端模板引擎（以后討論）
npx express-generator --view ejs

最終控制臺顯示的信息如下：

npx: installed 10 in 2.999s
   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.ejs
   create : views\index.ejs
   create : app.js
   create : package.json
   create : bin\
   create : bin\www
   install dependencies:
     > npm install
   run the app:
     > SET DEBUG=my-project:* & npm start

  上邊的信息相當于是在執(zhí)行npx express-generator --view ejs之后，nodejs給出的一個回執(zhí)信息，告訴我們創(chuàng)建了哪些文件或目錄（如create : public\等），另外，install dependencies:和 run the app兩句，是告訴我們，這個系統(tǒng)想要運行起來，它還依賴很多包，需要通過npm install完成下載安裝；
在這之后，你就可以通過SET DEBUG=my-project:* & npm start 來啟動你的WEB服務了。那接下來安排?。?！看截圖

  參考上圖操作，只要你看到了node ./bin/www就證明你的服務器啟動了。
訪問：localhost:3000可以看看最終的效果。

http://localhost:3000/users
http://localhost:3000/
也都可以試著訪問一下，這里是重點，下一次我會解讀如何定制路由，例如我們要開發(fā)一個****http://localhost:3000/system

4、目錄結(jié)構分析

  用vs code打開項目目錄，我挑主要的目錄文件說明一下：

1. node_modules 一些nodejs的模塊，為服務器運行提供功能支持。里邊的東西就是你剛才npm install來的。是js編寫的，這里邊的模塊多數(shù)運行于服務端。
2. public* 該目錄下放置的內(nèi)容一般是可以通過http協(xié)議訪問的靜態(tài)資源，如js、css、圖片、甚至可以自己創(chuàng)建fonts存放字體文件。
3. routes 該目錄下的js文件主路由模塊，當你指定了一個url中的path信息（如localhost:3000/users，path即/users）時，該文件的功能就是當瀏覽器發(fā)起對/users的get、post、put等http請求時進行業(yè)務處理及響應的。
4. views 中放模板文件，可以理解為html代碼，中間有一些<%= %>的占位符，服務器拿到數(shù)據(jù)之后對這些模板進行渲染，再傳回給瀏覽器。
5. app.js 項目啟動時的入口文件，整個系統(tǒng)的代碼邏輯就是從這里開始執(zhí)行的。

5、結(jié)束

  今天就記錄這么多，閱讀過此文的初學者可以著手嘗試一下，如有不清楚的可以留言，我看到就會回復。
  下一節(jié)，我會打開app.js，并嘗試定制新的路由

最新評論