初學(xué)者如何快速搭建Express開(kāi)發(fā)系統(tǒ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í)行的。
5、結(jié)束
今天就記錄這么多,閱讀過(guò)此文的初學(xué)者可以著手嘗試一下,如有不清楚的可以留言,我看到就會(huì)回復(fù)。
下一節(jié),我會(huì)打開(kāi)app.js,并嘗試定制新的路由
- node.js中koa和express的差異對(duì)比
- Node.js中Express框架使用axios同步請(qǐng)求(async+await)實(shí)現(xiàn)方法
- Node.js使用express寫(xiě)接口的具體代碼
- Node.js?express中的身份認(rèn)證的實(shí)現(xiàn)
- 教你用Node.js與Express建立一個(gè)GraphQL服務(wù)器
- Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程
- node.js?express和koa中間件機(jī)制和錯(cuò)誤處理機(jī)制
- node.js三個(gè)步驟實(shí)現(xiàn)一個(gè)服務(wù)器及Express包使用
- node.js+express留言板功能實(shí)現(xiàn)示例
- Node.js+express+socket實(shí)現(xiàn)在線(xiàn)實(shí)時(shí)多人聊天室
- Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)
相關(guān)文章
node.js基于express使用websocket的方法
這篇文章主要介紹了node.js基于express使用websocket的方法,結(jié)合實(shí)例形式分析了node.js基于express調(diào)用websocket相關(guān)設(shè)置與使用操作技巧,需要的朋友可以參考下2017-11-11使用Node.js寫(xiě)一個(gè)代碼生成器的方法步驟
這篇文章主要介紹了使用 Node.js 寫(xiě)一個(gè)代碼生成器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05如何使用Node寫(xiě)靜態(tài)文件服務(wù)器
這篇文章主要介紹了如何使用Node寫(xiě)靜態(tài)文件服務(wù)器,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-09-09nodejs+mongodb aggregate級(jí)聯(lián)查詢(xún)操作示例
這篇文章主要介紹了nodejs+mongodb aggregate級(jí)聯(lián)查詢(xún)操作,結(jié)合實(shí)例形式分析了基于nodejs的mongodb數(shù)據(jù)庫(kù)級(jí)聯(lián)查詢(xún)相關(guān)操作技巧,需要的朋友可以參考下2018-03-03node.js中的fs.rmdirSync方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.rmdirSync方法使用說(shuō)明,本文介紹了fs.rmdirSync方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12Node與Python 雙向通信的實(shí)現(xiàn)代碼
最簡(jiǎn)單粗暴的通信方式是 Nodejs調(diào)用一下 Python 腳本,本文詳細(xì)介紹了Nodejs與Python 雙向通信的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07利用pm2部署多個(gè)node.js項(xiàng)目的配置教程
目前似乎最常見(jiàn)的線(xiàn)上部署nodejs項(xiàng)目的有forever,pm2這兩種,而下面這篇文章主要給大家介紹了關(guān)于利用pm2部署多個(gè)node.js項(xiàng)目的配置教程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-10-10Node.js 使用request模塊下載文件的實(shí)例
今天小編就為大家分享一篇Node.js 使用request模塊下載文件的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09