快捷導(dǎo)航

初學(xué)者如何快速搭建Express開(kāi)發(fā)系統(tǒng)步驟詳解

更新時(shí)間：2023年05月15日 09:19:42 作者：Teacher_Tian_2019

這篇文章主要介紹了初學(xué)者如何快速搭建Express開(kāi)發(fā)系統(tǒng),結(jié)合實(shí)例形式詳細(xì)分析了express框架搭建的具體步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下

1、序言

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

很喜歡這種在進(jìn)入正題之前，寫(xiě)點(diǎn)引子的文書(shū)風(fēng)格……，專(zhuān)注技術(shù)的朋友還是從分隔線(xiàn)以下閱讀吧

2、最近做的事

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

3、Express快速開(kāi)發(fā)

說(shuō)到Express的最初入門(mén)，我的建議是，快速的弄一個(gè)能訪(fǎng)問(wèn)的環(huán)境來(lái)體驗(yàn)，捯飭，可以達(dá)到事半功倍的效果。以下是干貨：

3.1、安裝 nodejs

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

3.2、檢查 Express應(yīng)用程序生成器是否正常

nodejs安裝完成后，進(jìn)入 PS ，輸入以下命令

npx express-generator --version

看到下圖中的返回信息，就表明時(shí)這個(gè)生成器在nodejs中已經(jīng)存在且工作正常了。（對(duì)的，你沒(méi)猜錯(cuò)，node已經(jīng)把express的生成器當(dāng)成了自己的一部分）
在這里插入圖片描述

3.3、創(chuàng)建項(xiàng)目

# 注釋?zhuān)哼M(jìn)入到桌面，并創(chuàng)建名為my_project的目錄
cd Desktop
mkdir my_project
# 注釋?zhuān)狠斎胍韵旅?，生成Express項(xiàng)目 我一般默認(rèn)使用ejs使用服務(wù)端模板引擎（以后討論）
npx express-generator --view ejs

最終控制臺(tái)顯示的信息如下：

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

上邊的信息相當(dāng)于是在執(zhí)行npx express-generator --view ejs之后，nodejs給出的一個(gè)回執(zhí)信息，告訴我們創(chuàng)建了哪些文件或目錄（如create : public\等），另外，install dependencies:和 run the app兩句，是告訴我們，這個(gè)系統(tǒng)想要運(yùn)行起來(lái)，它還依賴(lài)很多包，需要通過(guò)npm install完成下載安裝；
在這之后，你就可以通過(guò)SET DEBUG=my-project:* & npm start 來(lái)啟動(dòng)你的WEB服務(wù)了。那接下來(lái)安排?。?！看截圖
在這里插入圖片描述
參考上圖操作，只要你看到了node ./bin/www就證明你的服務(wù)器啟動(dòng)了。
訪(fǎng)問(wèn)：localhost:3000可以看看最終的效果。

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

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

用vs code打開(kāi)項(xiàng)目目錄，我挑主要的目錄文件說(shuō)明一下：
在這里插入圖片描述

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