nodejs：express框架，ejs模塊，動(dòng)態(tài)渲染，中間件，路由，界面跳轉(zhuǎn)，終端【詩書畫唱】
前言：Visual Studio Code簡稱為vscode，是一款由微軟研發(fā)的免費(fèi)、開源的跨平臺(tái)文本代碼編輯器，也是目前前端開發(fā)幾乎完美的軟件開發(fā)工具?，F(xiàn)在使用Vscode的人越來越多，憑借著免費(fèi)、開源、跨平臺(tái)的特點(diǎn)收獲了一大批粉絲。界面好看，插件也非常多。
這篇專欄寫了一天半的時(shí)間！求看官們給個(gè)三連！
動(dòng)態(tài)渲染的個(gè)人理解：就是模板（比如表格，無序列表等等的模板）不變，內(nèi)容可變的代碼。
內(nèi)容查看：
創(chuàng)建Visual Studio code項(xiàng)目時(shí)的注意事項(xiàng)
告訴你什么是終端
自定義模塊：在js文件中調(diào)用另外一個(gè)js文件中的函數(shù)的代碼例子
創(chuàng)建express項(xiàng)目的代碼例子（更好的自定義要跳轉(zhuǎn)界面的app.get的方法，就是配置路由）
配置路由就是配置訪問地址跳轉(zhuǎn)到對應(yīng)的內(nèi)容，界面等等
require出來的基本都是function函數(shù)類型
doget和dopost的區(qū)別
使用express框架訪問默認(rèn)的index.html的代碼例子（有局限性的跳轉(zhuǎn)的app.use的方法，我展示的例子中可能只能跳轉(zhuǎn)默認(rèn)的index.html界面）
下載ejs模塊實(shí)現(xiàn)動(dòng)態(tài)渲染，中間件，界面跳轉(zhuǎn)
本期必看
1、搭建express框架
2、學(xué)會(huì)設(shè)置路由
3、學(xué)會(huì)使用中間件
4、學(xué)會(huì)使用動(dòng)態(tài)渲染：
創(chuàng)建一個(gè)數(shù)組，包含有商品（id,名稱價(jià)格和單位）的信息，創(chuàng)建一個(gè)名為pro.html的模板，根據(jù)這個(gè)模板可以顯示所有的商品為一個(gè)表格。
let pros = [{id:1,name:'德芙巧克力',price:7.5,unit:'塊'}];
將數(shù)組中的數(shù)據(jù)傳到pro.html模板上去，將它渲染成一個(gè)表格。
個(gè)人注釋：我暫時(shí)把“動(dòng)態(tài)渲染”理解成“由js和html代碼的拼接實(shí)現(xiàn)的可方便改變內(nèi)容的模板代碼”。
多去寫個(gè)人注釋會(huì)對自己更加的方便。
部分學(xué)習(xí)目標(biāo)：
1、自定義模塊：在js文件中調(diào)用另外一個(gè)js文件中的函數(shù)
2、express框架
單詞：
個(gè)人總結(jié)的注意事項(xiàng)：
教程視頻學(xué)習(xí)記錄
中間件要寫在路由配置前面。
set方法類似于setattribute方法，setattribute方法在JavaWeb中傳參等等時(shí)會(huì)常常用到。而set方法在express框架的傳參中可能常常用到。
1.0變1.1說明是進(jìn)行了小的更新，變2.0說明進(jìn)行了大的更新
創(chuàng)建Visual Studio code項(xiàng)目時(shí)的注意事項(xiàng)
npm?install?express?-g
下載express模塊
【-g就是全局的意思，可以達(dá)到一勞永逸，以后創(chuàng)建express的項(xiàng)目后就不用再下express了，不加-g以后就要再下載】
告訴你什么是終端
其實(shí)終端可以當(dāng)作cmd來用cmd命令來下載ejs等的模塊，
在VScode中的終端可以理解為cmd命令窗口
自定義模塊：在js文件中調(diào)用另外一個(gè)js文件中的函數(shù)的代碼例子
//demo.js
//引入當(dāng)前文件夾下的module.js中的代碼
//./表示demo.js文件所在的當(dāng)前文件夾
//使用require導(dǎo)入js文件時(shí)，可以將.js后綴省略掉
let?m?=?require('./module');
let?num?=?m.add(3,4);
console.log(num);
console.log(m.msg);
//module.js
//exports是一個(gè)內(nèi)置對象，不用定義就可以使用
//表示需要導(dǎo)出的函數(shù)和屬性的對象
//導(dǎo)出一個(gè)函數(shù)
exports.add?=?function(a,b){
????return?a?+?b;
}
//導(dǎo)出一個(gè)屬性
exports.msg?=?'給詩書畫唱三連！Hello?world！\n'
+'看到這句話說明demo.js成功調(diào)用module.js中的內(nèi)容！';
創(chuàng)建express項(xiàng)目的代碼例子（更好的自定義要跳轉(zhuǎn)界面的app.get的方法，就是配置路由）
doget和dopost的區(qū)別
1
npm?install?express?-g
下載express模塊
2
{
????"name":"helloapp",
????"description":"我的第一個(gè)express項(xiàng)目",
????"version":"1.0",
????"private":true,
????"dependencies":{
????????"express":"4.x"
????}
}
let?express=require("express");
let?app=express();
//app.use(express.static(__dirname+"/public"));
app.get("/",function(requst,response){
response.send("歡迎訪問本網(wǎng)站！")
});
app.listen(8888);
console.log("服務(wù)器啟動(dòng)完畢！訪問地址：http://127.0.0.1：8888")
require出來的基本都是function函數(shù)類型
使用express框架訪問默認(rèn)的index.html的代碼例子（有局限性的跳轉(zhuǎn)的app.use的方法，我展示的例子中可能只能跳轉(zhuǎn)默認(rèn)的index.html界面）
<!DOCTYPE?html>
<html?lang="en">
????<head>
????????<meta?charset="UTF-8">
????????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????????<title>express框架演示</title>
????</head>
????<body>
????????<h1>Hello?world</h1>
????</body>
</html>
let?express=require("express");
let?app=express();
app.use(express.static(__dirname+"/public"));
//?app.get("/",function(requst,response){
//?response.send("歡迎訪問本網(wǎng)站！")
//?});
app.listen(8888);
console.log("服務(wù)器啟動(dòng)完畢！訪問地址：http://127.0.0.1：8888")
下載ejs模塊實(shí)現(xiàn)動(dòng)態(tài)渲染，中間件，界面跳轉(zhuǎn)
npm?install?ejs?-g
//routes/index.js
//專門用來配置路由的文件
module.exports?=?function(app){
????//http://127.0.0.1:8888/
????app.get('/',function(req,res){
????????//在頁面上顯示歡迎訪問本網(wǎng)站
????????//res.send('<h1>歡迎訪問本網(wǎng)站</h1>');
????????//設(shè)置顯示在模板上的數(shù)據(jù)
????????const?a?=?[
????????????{title:'百度',url:'http://www.baidu.com',time:'2021-5-1'},
????????????{title:'淘寶',url:'http://www.taobao.com',time:'2021-11-11'}
????????];
????????//根據(jù)data.html的模板內(nèi)容來顯示頁面
????????res.render('data',{webData:?a,tt:?'動(dòng)態(tài)傳遞的標(biāo)題'});
????});
????//http://127.0.0.1:8888/tologin
????app.get('/tologin',function(req,res){
????????res.send('<h1>登錄頁面</h1>');
????});
????//http://127.0.0.1:8888/reg
????app.get('/reg',function(req,res){
????????res.send('<h1>注冊頁面</h1>');
????});
}
<html>
????<head></head>
????<body>
????????<h1><%=tt?%></h1>
????????<ul>
????????????<%for(let?i?=?0;i?<?webData.length;i?++){?%>
????????????????<li>
????????????????????<a?href='<%=webData[i].url?%>'>
????????????????????????<%=webData[i].title?%>
????????????????????</a>
????????????????????<%=webData[i].time?%>
????????????????</li>
????????????<%}?%>
????????</ul>
????</body>
</html>
//index.js
//導(dǎo)入express模塊
let?express?=?require('express');
//導(dǎo)入ejs模塊
let?ejs?=?require('ejs');
//獲取框架執(zhí)行對象
let?app?=?express();
//渲染根目錄下的html文件
//如果不執(zhí)行下面的這句代碼，就會(huì)默認(rèn)渲染views目錄下的html文件
//app.set('views',__dirname);
//以html語法規(guī)則來解析指定的html頁面
app.set('view?engine','html');
app.engine('.html',ejs.__express);
//__dirname表示根目錄
//public表示根目錄下的public文件夾
//設(shè)置public/index.html為默認(rèn)首頁
//app.use(express.static(__dirname?+?'/public'));
//添加中間件處理程序
app.use(function(req,res,next){
????console.log('中文亂碼處理');
????//繼續(xù)執(zhí)行后面的中間件
????next();
});
app.use(function(req,res,next){
????console.log('日志處理');
????next();
});
//http://127.0.0.1:8888/login
//當(dāng)輸入的訪問地址中匹配有/login時(shí)才執(zhí)行這個(gè)中間件的代碼
app.use('/login',function(req,res,next){
????console.log('會(huì)話處理');
})
//導(dǎo)入路由配置方法1：
//let?routes?=?require('./routes/index');
//routes(app);
//導(dǎo)入路由配置方法2（更簡單的寫法）：
let?routes?=?require('./routes/index')(app);
//設(shè)置服務(wù)器的端口號
app.listen(8888);
console.log('服務(wù)器啟動(dòng)完畢，訪問地址http://127.0.0.1:8888/');
本期必看
1、搭建express框架
2、學(xué)會(huì)設(shè)置路由
3、學(xué)會(huì)使用中間件
4、學(xué)會(huì)使用動(dòng)態(tài)渲染：
創(chuàng)建一個(gè)數(shù)組，包含有商品（id,名稱價(jià)格和單位）的信息，創(chuàng)建一個(gè)名為pro.html的模板，根據(jù)這個(gè)模板可以顯示所有的商品為一個(gè)表格。
let pros = [{id:1,name:'德芙巧克力',price:7.5,unit:'塊'}];
將數(shù)組中的數(shù)據(jù)傳到pro.html模板上去，將它渲染成一個(gè)表格。
module.exports?=?function(app){
????app.get('/pro',function(req,res){
let?pros?=?[{id:1,name:'德芙巧克力',price:7.5,unit:'塊'},
{id:2,name:'德芙巧克力2',price:7.6,unit:'塊'},
{id:3,name:'德芙巧克力3',price:7.7,unit:'塊'}];
????????res.render('proViews',{webData:?pros});
????????//——>這里的proViews指的是views文件夾下的proViews.html，就是要跳轉(zhuǎn)的界面
????});
??
}
<html>
????<head></head>
????<body>
???<!--{id:2,name:'德芙巧克力2',price:7.6,unit:'塊'}???-->
????????<table?border="1px">
?????????<tr>?<th>商品編號</th>?<th>商品名稱</th>
?????????????<th>商品價(jià)格</th>?<th>商品單位</th></tr>??
????????????<%for(let?i?=?0;i?<?webData.length;i?++){?%>
????????????????<tr>
????????????????????<td>
????????????????????????<%=webData[i].id?%>
????????????????????</td>
????????????????????<td>
????????????????????????<%=webData[i].name%>
????????????????????</td>
????????????????????<td>
????????????????????????<%=webData[i].price%>
????????????????????</td>
????????????????????<td>
????????????????????????<%=webData[i].unit%>
????????????????????</td>
????????????????</tr>
????????????<%}?%>
????????</table>
????</body>
</html>
let?express?=?require('express');
let?ejs?=?require('ejs');
let?app?=?express();
app.set('view?engine','html');
app.engine('.html',ejs.__express);
//個(gè)人注釋：“./routes/pro”指的是routes文件夾下的pro.js文件：
let?routes?=?require('./routes/pro')(app);
//——>這段代碼不可以少，其余部分基本是固定的
app.listen(8888);
console.log('服務(wù)器啟動(dòng)完畢，訪問地址http://127.0.0.1:8888/pro');
//——>這個(gè)訪問路徑和routes文件夾下的pro.js文件中用get設(shè)置的訪問路徑有關(guān)
