一贝椿、node環(huán)境的簡單搭建
作為前端工程師蜈块,學(xué)好node的重要性我就不多說了,為了讓自己對node更加了解忠寻,也為了剛?cè)腴T的萌新們可以更快的入門惧浴,所以我將從0開始,一步一步的搭建node環(huán)境奕剃。
此次我搭建的只是純后端衷旅,項(xiàng)目采用前后端分離的模式,前端頁面我已經(jīng)寫好了纵朋,傳送門
有需要的同學(xué)可以下載并運(yùn)行看看柿顶,我也會一直更新這個項(xiàng)目,覺得不錯的可以點(diǎn)個星哦操软!
好了嘁锯,閑話少說,開始今天的正題。
1家乘、創(chuàng)建文件夾
額蝗羊。。仁锯。耀找。我覺得這部分我就不說啥了
2、進(jìn)入文件夾內(nèi)部业崖,執(zhí)行 npm init
我試用的編輯器是vs code野芒,所以創(chuàng)建文件夾后按 ctrl + ~ 調(diào)出終端就可以輸入了
如果你用的不是這個,還可以進(jìn)入文件夾內(nèi)部后在地址欄輸入cmd后回車即可繼續(xù)編輯輸入npm init
如果有不知道npm是什么的同學(xué) 傳送門 建議先學(xué)會并安裝好了再來看本篇教程双炕。
執(zhí)行npm init后會問你很多問題狞悲,例如
個人建議,不用管它雄家,一路回車即可
3效诅、創(chuàng)建index.js
跟目錄下創(chuàng)建index.js,作為整個后臺項(xiàng)目的入口文件
4趟济、安裝express及重要插件
我在編寫后臺的過程中還是主要用express這個框架乱投,所以我這里也是給大家介紹的這種方式
終端分別輸入
npm install express --save (注:--save是保存到項(xiàng)目中的意思)
npm install body-parser --save (注:express必要的中間件)
5、編寫index.js
//將一下內(nèi)容拷進(jìn)index.js中
const path = require('path') //引入當(dāng)前路徑
const express = require('express') //引入express
const bodyParser = require('body-parser')//引入body-parser
const app = express();
app.use(bodyParser.urlencoded({extended:true}));
let _static = path.join('webapp'); //定義靜態(tài)文件的目錄顷编,此處只為確認(rèn)node環(huán)境運(yùn)行了
app.use(express.static(_static));
app.listen(4000); //監(jiān)聽端口
console.log('服務(wù)器啟動戚炫,端口:4000');
6、創(chuàng)建webapp文件夾媳纬,并在文件夾內(nèi)創(chuàng)建index.html
//index.html內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
恭喜你成功了双肤!
</body>
</html>
由此我們的node環(huán)境就算搭建完成了
終端運(yùn)行 node index.js看看什么樣子吧!
如果你看到了這個界面钮惠,那么恭喜你成功的搭建了一個node環(huán)境茅糜。
敲代碼兩分鐘,寫博客20分鐘不止素挽,盆友們蔑赘,寫博客不易,且行且珍惜啊!
歡迎廣大網(wǎng)友批評指正堡纬,有問題也可以隨時(shí)問我哦!
后續(xù)我會不定期更新的酥馍。。阅酪。旨袒。汁针。