node學習1
什麽是前端和後端
後端的主要工作
-
後端為前端程序員暴露API接口;
-
後端也要操作數據庫;
-
優化後端業務的性能;
前端的主要工作
-
繪制網頁的頁面(HTML)
-
寫CSS樣式美化頁面、寫JS做網頁交互(更多的是網頁的特效)
-
借助於 XHR(?.get $.post)請求後端的接口;實現前後端分離開發
-
使用前端的(框架)去完成界面的開發
-
總結:前端的主要工作:用戶能看到的東西,基本上都是前端做出來;
前後端協作流程
-
將來進入工作,大家會接觸到【前後端分離開發】;
-
協作開發的流程:後端為我們暴露數據接口,前端單純的調用後端接口;
-
在當前Node階段中,我們學習的是 後端開發;
-
在Node階段,我們主要教大家如何寫後端的接口;
環境安裝
LTS 和 Current 版本區別
-
LTS 是長期穩定版的意思(這個安裝包用起來比較穩定)【推薦在企業中使用】
-
Current 是最新特征版,這個安裝包中有最新的Node特性,但是,可能有一些潛藏的Bug未解決;【推薦學習或嘗鮮去使用】
下載安裝
查看 Node 版本號
打開終端,在命令行輸入命令node -v
即可如何進入終端呢?
-
使用快捷鍵
windows徽標 + R
打開運行面板,輸入cmd
後直接回車; -
在任意目錄的空白位置,先按住
shift
鍵不松開,然後,在空白位置,鼠標右鍵單擊,會出來一個右鍵菜單,選擇在此處打開 powershell/cmd 窗口
環境變量
什麽是環境變量
Path環境變量的作用:能夠讓我們通過命令行的形式,快速啟動一些應用程序;
系統環境變量和用戶環境變量的區別
-
用戶環境變量,是每個用戶私有的,用戶之間不會共享;
-
全局環境變量,是共享的,只要你能登錄這臺計算機,就能訪問到全局的環境變量;【今後在配置環境變量的時候,推薦直接配置到系統環境變量】
通過命令行快速啟動應用程序時,路徑的查找規則
-
先在當前 cmd 終端的目錄中查找,如果有則直接運行;
-
如果當前目錄中沒有,則去全局的path環境變量中查找;
瀏覽器中的 JavaScript
Javascript的誕生
-
JS 誕生 和 網景公司 有關;form
-
JS 誕生的需求,就是為了做客戶端表單驗證的;
-
JS作者剛把JS創建出來之後,它叫 LiveScript -> Javascript
瀏覽器一戰
主角是 IE 和 網景瀏覽器;
-
一戰的果實:ECMAScript 規範的確立!
-
短暫的和平期:在和平期階段,JS都在做什麽事情呢(進行表單的驗證、做簡單的網頁動效、狗皮膏藥),一戰之後,JS能力有限,當時被稱作是“腳本語言”
瀏覽器二戰
在 2008 年,二戰開始了;谷歌chrome、IE、火狐(浴火重生)在 2008 年,谷歌 利用 XHR 這個對象,實現了網頁的局部刷新;2010 - 2013年左右,公司中,不管是Java,還是.NET, 還是 PHP(會不會Ajax)
-
二戰的果實:XHR 對象的誕生; chrome 瀏覽器的 JS V8 解析引擎;
註意
在 一戰 和 二戰期間,JS 只能運行在 瀏覽器中;瀏覽器中的JS組成部分:ECMAScript核心 + DOM + BOM瀏覽器屬於前端環境,所以,之前的JS只運行在前端瀏覽器中;也就是,無法使用Javascript實現後端編程;
Node中的Javascript
Node.js 的誕生,解放了Javascript,從此之後,Javascript 就可以在 服務器端運行了;
ECMAScript
Node中的Javascript也有一個ECMAScript核心
沒有 BOM 和 DOM
Node中並沒有瀏覽器的概念,所以,BOM和 DOM ,Node中不需要,因此,就把它們給剔除了;
全局成員
-
console
-
setInterval
-
setTimeout
-
...其它全局成員
模塊系統
-
Node中自己擴展出來的一套API規範
Node中的JS組成部分
ECMAScript核心 + 全局成員 + 模塊系統成員(這是Node平臺所獨有的)全局成員(console.log, setTimeout setInterval)模塊系統成員(就是Node中的一些核心模塊,提供了一些後端編程的能力)
ECMAScript 規範 和 瀏覽器中的JS 以及 Node 中的 JS 之間的關系
-
ECMAScript 規範(標準):就是一本書,這本書中記錄了基本的語法定義;
-
瀏覽器中的 JS:瀏覽器中的JS是一門具體的編程語言,實現了 ECMAScript 規範;
-
瀏覽器中的JS組成部分: ECMAScript 核心 + DOM + BOM
-
Node中的JS:也是一門具體的編程語言,也實現了 ECMAScript 規範;
-
Node中的JS組成部分: ECMAScript 核心 + 全局成員 + 模塊系統成員
畫圖說明 瀏覽器中JS 和 Node中JS的區別
總結-什麽是 Node.js
基於 Chrome 的V8 JS 解析引擎之上,解放了Javascript的編程能力,為 Javascript 提供了 後端編程的能力;所以說,Node.js 是 一個後端編程的平臺,用到的語言是Javascript;
Node.js 環境中執行JS代碼的兩種方式
REPL 環境
-
如何進入 REPL 環境: 打開任意終端,直接輸入
node
並回車,就會進入到 REPL 環境中; -
如何離開 REPL 環境:按兩次
ctrl + c
就能退出 REPL 環境; -
REPL中,每個字母代表什麽意思呢:
-
R: Read 的意思,每當我們輸入完畢代碼之後,只要敲擊回車,Node環境就會讀取用戶輸入的代碼
-
E:Evaluate 的意思,表示把 Read 進來的用戶代碼,調用 類似於 Eval 的函數,去解析執行
-
P:Print 輸出的意思;把第二步中解析執行的結果,輸出給用戶;
-
L:Loop 循環的意思,表示當輸出完畢之後,進入下一次的 REP循環
node 命令【推薦形式】
直接使用node 要執行的js文件的路徑
來執行指定的JS文件
-
使用 ↑ 快速定位到上一次執行的命令
-
使用 tab 鍵能夠快速補全路徑
-
使用 cls 可以清屏
ECMAScript 6常用語法
let 與 const
之前定義變量,用 var 關鍵字,用var有沒有缺點:1. 變量提升問題 2. 沒有塊級作用域let特性:
-
沒有變量提升
-
有 { } 作用域const特性:
-
沒有變量提升的問題
-
const 定義的常量,無法被重新賦值
-
當定義常量的時候,必須定義且初始化,否則報語法錯誤
變量的解構賦值
所謂的解構賦值,就是把 某個對象中的屬性,當作變量,給解放出來,這樣,今後就能夠當作變量直接使用了
-
可以使用
:
為解構出來的變量重命名
// 變量的解構賦值
const { name : name123, age, gender } = person
console.log(name123)
字符串擴展
-
模板字符串
-
startsWith() 和 endsWith()
-
startsWith() 用來判斷字符串,是否以指定的字符開頭,如果是,返回值是 true,否則返回 false
-
endsWith() 用來判斷字符串,是否以指定的字符結尾;如果是,返回值是 true,否則返回 false
-
padStart() 和 padEnd()
函數擴展
-
形參默認值
function add(x, y = 0) {
return x + y;
}
-
解構賦值和形參默認值結合使用
-
rest參數
// ------------------rest參數-------------------
function add(...args) {
console.log(args instanceof Array)
?
let total = 0
args.forEach(item => {
total += item
})
console.log(total)
}
?
add(1, 2, 3, 4)
-
擴展運算符
// ----------------------擴展運算符--------------
function add(...values) {
let total = 0
values.forEach(item => {
total += item
})
?
console.log(total)
}
?
const arr = [1, 2, 3]
add(...arr)
箭頭函數【今後我們會每天寫箭頭函數的】
-
如何把 function 改成 箭頭函數呢: 先把 function 刪掉,然後,在 () 和 { } 之間,添加一個
=>
就好了 -
箭頭函數的特性: 箭頭函數內部的 this, 永遠和 箭頭函數外部的 this 保持一致;
-
箭頭函數,本質上就是一個匿名函數
-
最標準的箭頭函數格式是 ( 參數列表 ) => { 函數體 }
-
變體1: 如果 箭頭函數左側的 形參列表中,只有一個 形參,那麽,( ) 可以省略 ( x ) => { console.log(x) } 可以改造成 x => { console.log(x) }
-
變體2:如果 箭頭函數右側的 函數體中,只有一行代碼,那麽, { } 可以省略 (x, y) => {console.log(x + y)} 可以改造成 (x, y) => console.log(x + y)
-
變體3:如果箭頭函數 左側 只有一個形參,右側只有一行代碼,那麽, 左側的 () 和 右側的 {} 都可以省略 ( x ) => { console.log(x) } 可以改造成 x => console.log(x)
-
註意: 如果我們省略了 右側的 { }, 那麽,默認就會把 右側函數體中的代碼執行結果,返回出去 (x, y) => { return x + y } 可以簡寫成 (x, y) => x + y
對象中定義方法和屬性的便捷方式
文件操作
文件讀取
文件寫入
文件追加
fs模塊中路徑操作問題【難點】
讀取文件信息 fs.stat
讀取指定目錄中所有文件的名稱 fs.readdir
練習:
-
復制指定的
1.txt
文件,並重命名為1 - copy.txt
-
整理
成績.txt
文件中的數據到成績 - ok.txt
文件中,整理好的文件中,格式類似於:
小紅:99
小白:100
小黃:70
小黑:66
小綠:88
路徑操作
-
path.join([...paths])
-
path.sep
-
path.basename(path[, ext])
-
path.dirname(path)
-
path.extname(path)
node學習1