一、前言，網(wǎng)站開發(fā)掃盲知識
1.網(wǎng)站搭建開發(fā)包括什么？
前端
? ? ? ? 前端開發(fā)主要涉及用戶界面（UI）和用戶體驗（UX），負責(zé)實現(xiàn)網(wǎng)站的外觀和交互邏輯。前端開發(fā)使用HTML、CSS和JavaScript等技術(shù)來構(gòu)建網(wǎng)頁，并通過各種工具和框架（如React、Vue.js、Angular等）來簡化開發(fā)過程。前端開發(fā)關(guān)注于網(wǎng)頁設(shè)計、布局、樣式、動畫效果以及與用戶的交互。
? ? ? ?主要用javascript+HTML+CSS來編寫代碼文件，運行依靠瀏覽器引擎（運行環(huán)境就像汽車離不開跑道，跳舞的人離不開舞臺，魚兒離不開水），主流的就是谷歌瀏覽器的V8引擎！所以前端代碼文件，直接用瀏覽器打開就等于運行！
后端（服務(wù)端）
? ? ? ?后端開發(fā)則處理網(wǎng)站的業(yè)務(wù)邏輯和數(shù)據(jù)存儲。它負責(zé)處理用戶提交的請求、進行數(shù)據(jù)處理和存儲、與數(shù)據(jù)庫或其他第三方服務(wù)進行交互等。后端開發(fā)使用各種編程語言（如JavaScript、Python、Java、Ruby等）和框架（如Node.js、Django、Spring、Ruby on Rails等）來構(gòu)建服務(wù)器端應(yīng)用程序。
? ? ? ? 同樣后端代碼文件也需要一個引擎來運行。那就是安裝在服務(wù)器或者計算機上的類似Node.js這樣的運行環(huán)境！
數(shù)據(jù)庫（數(shù)據(jù)庫管理系統(tǒng)（DBMS）
主要存儲用戶數(shù)據(jù)
一個網(wǎng)站的全部結(jié)構(gòu)
除了前端和后端開發(fā)，還有其他一些重要的方面需要考慮，例如數(shù)據(jù)庫設(shè)計、安全性、性能優(yōu)化、測試和部署等。
因此，一個完整的網(wǎng)站搭建和開發(fā)過程往往涉及到前端開發(fā)和后端開發(fā)兩個方面的工作，它們密切合作以實現(xiàn)一個功能完整、用戶友好且高效的網(wǎng)站。
-
結(jié)構(gòu)（Structure）：網(wǎng)頁的結(jié)構(gòu)是指網(wǎng)頁的骨架，包括 HTML/HTML5 標(biāo)簽和元素。這些標(biāo)簽和元素用于組織和呈現(xiàn)網(wǎng)頁的內(nèi)容，如文本、圖像、鏈接等。
-
樣式（Presentation）：網(wǎng)頁的樣式是指網(wǎng)頁的外觀和布局，通常由 CSS 代碼定義。CSS 用于設(shè)置字體、顏色、大小、間距、邊框等屬性，以控制網(wǎng)頁元素的呈現(xiàn)效果。
-
行為（Behavior）：網(wǎng)頁的行為是指網(wǎng)頁與用戶交互的功能，通常由 JavaScript 代碼實現(xiàn)。JavaScript 用于處理用戶事件（如點擊、滾動等）、動態(tài)修改網(wǎng)頁內(nèi)容和樣式，以及實現(xiàn)一些特效和交互功能。
-
內(nèi)容（Content）：網(wǎng)頁的內(nèi)容是指網(wǎng)頁實際展示給用戶的文本、圖像、音頻、視頻等資源。內(nèi)容是網(wǎng)頁的核心，決定了網(wǎng)頁的主題和目的。
-
媒體（Media）：網(wǎng)頁的媒體是指網(wǎng)頁中使用的圖片、音頻、視頻等多媒體資源。這些資源可以通過 HTML 標(biāo)簽嵌入到網(wǎng)頁中，為網(wǎng)頁增加視覺效果和聽覺體驗。
-
交互（Interaction）：網(wǎng)頁的交互是指網(wǎng)頁與用戶之間的互動，通常通過表單、按鈕、鏈接等元素實現(xiàn)。用戶可以通過這些元素與網(wǎng)頁進行交互，如提交表單、點擊按鈕等。
-
導(dǎo)航（Navigation）：網(wǎng)頁的導(dǎo)航是指網(wǎng)頁中用于引導(dǎo)用戶瀏覽其他頁面或內(nèi)容的鏈接、按鈕和菜單。導(dǎo)航元素有助于用戶在網(wǎng)頁之間進行跳轉(zhuǎn)，查找所需信息。
2.什么是網(wǎng)頁框架？干什么用？
-
網(wǎng)頁框架主要服務(wù)于前端和后端。
- 前端框架負責(zé)處理網(wǎng)頁的呈現(xiàn)、交互和用戶體驗，通常包括 HTML、CSS 和 JavaScript。
- 后端框架負責(zé)處理服務(wù)器端的邏輯、數(shù)據(jù)存儲和與前端框架的通信。
前端框架的例子有：
- React：一款由 Facebook 開發(fā)的高性能、組件化的 JavaScript 庫，用于構(gòu)建用戶界面。
- Angular：一款由 Google 開發(fā)的前端框架，使用 TypeScript 編寫，提供了豐富的功能和組件庫。
- Vue.js：一款漸進式、組件化的 JavaScript 框架，用于構(gòu)建用戶界面。
- jQuery UI：一款基于 jQuery 的用戶界面庫，提供了豐富的 UI 組件和動畫效果。
后端框架的例子有：
- Django：一款基于 Python 的 Web 框架，用于構(gòu)建動態(tài)網(wǎng)站和 Web 應(yīng)用程序。
- Flask：一款基于 Python 的輕量級 Web 框架，用于構(gòu)建 Web 應(yīng)用程序。
- Express（Node.js）：一款基于 Node.js 的 Web 開發(fā)框架，用于構(gòu)建高性能、可擴展的 Web 應(yīng)用程序。
- Ruby on Rails：一款基于 Ruby 的 Web 框架，用于構(gòu)建 Web 應(yīng)用程序。
二、安裝與Hello World
首先假定你已經(jīng)安裝了?Node.js，
win+R-cmd 打開命令終端窗口
1.創(chuàng)建文件目錄到本地服務(wù)器
接下來為你的應(yīng)用創(chuàng)建一個目錄，然后進入此目錄并將其作為當(dāng)前工作目錄。
$ mkdir myapp
$ cd myapp
mkdir myapp創(chuàng)建一個文件夾叫 myapp。路徑位于C:\Users\你的計算機名\myapp
cd myapp 是進入這個文件夾內(nèi)
2.利用node.js 命令 導(dǎo)入項目依賴管理文件
$ npm init一直按回車，最后回復(fù)yes!
`npm init`是一個命令行工具，用于初始化一個新的npm包（或者項目）。它會引導(dǎo)你通過一系列的問題和選項來創(chuàng)建一個`package.json`文件，以記錄和管理你的應(yīng)用程序的配置信息。
npm的全稱是Node Package Manager，即Node.js包管理器。
"init"是"initialize"的縮寫，意思是初始化或開始的意思。在計算機領(lǐng)域中，"init"通常用于描述開始或創(chuàng)建一個新的實體、進程或配置。
在軟件開發(fā)中，"init"常用于表示初始化一個項目、設(shè)置默認值或創(chuàng)建初始文件等操作。例如，"npm init"命令用于初始化一個新的npm包，創(chuàng)建一個初始的package.json文件。
通過運行`npm init`命令，你可以提供一些基本的項目信息，例如包的名稱、版本、描述、入口文件等。你還可以選擇性地提供其他信息，如作者、許可證、存儲庫URL等。
`npm init`的主要作用包括：
1. 創(chuàng)建`package.json`文件：它是一個用于管理和描述Node.js項目的配置文件。
2. 管理依賴項：在初始化過程中，你可以選擇是否在`package.json`中添加項目的依賴項，并指定它們的版本。
3. 保存項目的元數(shù)據(jù)：`package.json`文件中記錄了項目的元數(shù)據(jù)信息，包括名稱、版本、作者、許可證等。
4. 簡化項目的管理：通過創(chuàng)建`package.json`文件，你可以使用npm來安裝依賴項、運行腳本、發(fā)布軟件包等。
總之，`npm init`命令是用于初始化一個新的npm包（或者項目），并生成`package.json`文件。這個文件在后續(xù)的開發(fā)、測試和部署過程中起著重要的作用。
3.安裝express依賴包
$ npm install express --savenpm install express --save是一個用于安裝Express框架及其依賴項的npm命令。
具體解釋如下：
-
npm是Node.js的包管理器，用于管理和安裝JavaScript包和依賴項。 -
install是npm命令的一個子命令，用于安裝包或模塊到當(dāng)前項目中。 -
express是一個流行的Node.js框架，用于構(gòu)建Web應(yīng)用程序和API。這個命令將安裝最新版本的Express框架。 -
--save是一個選項，指示npm將包信息保存到package.json文件的dependencies部分。它會自動將依賴項的名稱和版本添加到package.json文件中，以便在將來重新安裝項目時能夠正確地安裝依賴項。
因此，當(dāng)你運行npm install express --save時，npm會下載并安裝最新版本的Express框架，并將其作為項目的依賴項保存在package.json文件中。
4.編寫Hello world example
4.1在文件夾myapp 中創(chuàng)建個js文件叫app.js（自己命名）
用記事本打開這個js文件，輸入hello world 代碼
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
4.2 在命令行中進入包含app.js文件的目錄
4.3 命令窗口輸入：
cd myapp? //進入myapp目錄！
node app.jsnode app.js是一個運行Node.js應(yīng)用程序的命令。
具體解釋如下：
node是Node.js的可執(zhí)行文件，用于運行JavaScript代碼。app.js是一個JavaScript文件，其中包含了Node.js應(yīng)用程序的代碼。
當(dāng)你運行node app.js時，Node.js解釋器將讀取并執(zhí)行app.js文件中的代碼。這將啟動你的Node.js應(yīng)用程序，并根據(jù)app.js文件中的代碼邏輯執(zhí)行相應(yīng)的操作。
瀏覽器輸入127.0.0.1:3000? 或者http://localhost:3000/
（這個地址是當(dāng)前服務(wù)器的本地地址，不需要域名就可以訪問 端口3000是剛才我們指定的，不懂可以問呱呱www.readygpt.cn）文章來源：http://www.zghlxwxcb.cn/news/detail-729739.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-729739.html
?恭喜完成Hello world!
到了這里，關(guān)于自學(xué)WEB后端01-安裝Express+Node.js框架完成Hello World!的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
