首先，感謝 夕雅y的“??”崎淳。
上篇文章因?yàn)闆]有評(píng)論，我并不知道反響如何愕把，不知道這種寫作方式對(duì)于讀者來說是否適合拣凹，也沒有讀者的建議給我參考，讓我改進(jìn)我的寫作方式恨豁，但是我從一個(gè)“大佬”哪里得到了一些建議咐鹤，我將在今后的文章中將其運(yùn)用起來：
1、 每一段代碼不光要有注釋圣絮，還應(yīng)該加上自己的想法，解決思路等
2雕旨、 寫一些自己在項(xiàng)目中遇到的坑扮匠，并且詳細(xì)的闡述自己的思考過程和最終解決辦法
好了，扯的廢話也不少了凡涩，下面進(jìn)入本篇文章的正文
一棒搜、本期目標(biāo)及知識(shí)點(diǎn)概況
1. 目標(biāo)概括
- 使用bootstrap4 + koa-ejs 搭建論壇的首頁、用戶注冊(cè)與登錄界面
- 使用koa-router實(shí)現(xiàn)界面之間的相互跳轉(zhuǎn)
2. 主要涉及到的知識(shí)點(diǎn)：
- 模版引擎的使用 ==> koa-ejs
- 路由模塊的使用 ==> koa-router
- bootstrap4
中文文檔 ==> https://www.qdskill.com/docs/bootstrap/docs/4.0/getting-started/introduction/
英文文檔 ==> https://getbootstrap.com/docs/4.3/getting-started/introduction/
二活箕、準(zhǔn)備工作
1力麸、 目錄及文件
在項(xiàng)目根目錄新建兩個(gè)文件夾 ==>
- routes ---- 存放路由文件
- views ----存放.html文件
- 在views目錄下新建index.html文件作為論壇主頁
- 在views目錄下新建layouts目錄，用來存放模版文件
- 在views目錄下新建partials目錄，存放導(dǎo)航條
- 在views目錄下新建signUpIn目錄克蚂，用來存放登錄注冊(cè)界面的html文件
下圖是本期項(xiàng)目在Webstorm中的目錄結(jié)構(gòu)
2. 中間件的安裝與引用
- 打開終端闺鲸，進(jìn)入項(xiàng)目目錄：
npm install koa-router
npm install koa-ejs
- 編輯器打開app.js文件，在頁首輸入：
cosnt render = require('koa-ejs);
- 在routes目錄下新建index.js文件埃叭，打開并輸入：
const router = require('koa-router');
3摸恍、bootstrap4的使用
https://www.qdskill.com/docs/bootstrap/docs/4.0/getting-started/introduction/
直接進(jìn)入打開鏈接，將如圖所示部分代碼拷貝到你的layout.html文件中赤屋，如圖：
PS：其實(shí)為了美觀的話也可以將<body>里的是三個(gè)<script>里的內(nèi)容寫到<head>標(biāo)簽里面立镶，雖然這樣可能會(huì)影響一點(diǎn)速度，因?yàn)檫@種引用方式是需要網(wǎng)絡(luò)的类早，不過你可以將文件下載下來媚媒，直接從本地引用就沒有這個(gè)問題了。在這里涩僻，我使用的是上面這種引用方式缭召，但將<script>里的內(nèi)容移到了<head>里。
4. 目標(biāo)預(yù)覽
我們這一期的目標(biāo)是：
1令哟、首頁 ==> 頂部是導(dǎo)航條恼琼，中間是正文部分（無內(nèi)容），底部暫時(shí)用不到屏富，如圖晴竞。
在上圖中我將正文部分分為了2個(gè)區(qū)域，左邊準(zhǔn)備用來顯示帖子狠半、右邊顯示個(gè)人信息及其它的一些東東噩死。具體的頁面布局使用了bootstrap4
2、注冊(cè)與登錄界面（暫時(shí)不寫注冊(cè)與登錄的功能）神年，如圖：
PS：看到這兩張圖是不是感覺很熟悉已维？ 沒錯(cuò)，這就是“照抄”Github的登錄界面的已日，就連圖標(biāo)都沒換垛耳，當(dāng)然你也可以自己設(shè)計(jì)。
三飘千、koa-ejs模版引擎
- 初學(xué)者可能無法很快理解這個(gè)東東（也不排除有牛人）堂鲜，不知道它是干什么的、怎么使用护奈，當(dāng)然缔莲，這很正常，因?yàn)槲耶?dāng)初也這樣霉旗，一臉懵逼痴奏，不知道語法怎么寫蛀骇，后來用的多了再結(jié)合一下官方文檔，才逐漸熟悉读拆。這個(gè)東西倒其實(shí)不是很難擅憔，用幾次很快就能懂個(gè)大概。
下面我來說說我對(duì)模版引擎的理解吧建椰，希望這會(huì)對(duì)讀者們有所幫助 == >
1雕欺、眾所周知： 在一個(gè)大型Web項(xiàng)目里是有著很多很多的網(wǎng)頁的，而大部分網(wǎng)頁跟網(wǎng)頁之間又存在著很多 相同 的部分棉姐，這樣的案例在生活中是隨處可見的
2屠列、程序員有一個(gè)很重要的優(yōu)點(diǎn)-----懶，當(dāng)然不了解的人可能會(huì)覺得很奇怪伞矩，為什么“懶”也可以是優(yōu)點(diǎn)了笛洛，難道是世界變了？工作時(shí)偷懶不會(huì)被吊（罵）乃坤？當(dāng)然不是苛让，此懶非彼懶，程序員的懶在于：當(dāng)有一個(gè)功能或者一段代碼塊需要使用2遍或以上湿诊，那我們就將其封裝起來狱杰，便于多次使用，因?yàn)閼刑耄拍軆?yōu)化仿畸，想要偷懶就得進(jìn)步。
3朗和、結(jié)合以上兩點(diǎn)错沽，模版引擎的作用其實(shí)也就出來十之八九了：
==> 它就是用來保存我們網(wǎng)頁中的公有內(nèi)容的。當(dāng)我們有很多個(gè)頁面有著相同的地方眶拉，那么把它寫到一個(gè)模版文件里吧千埃，要用的時(shí)候只需要使用特定的模版引擎語法直接調(diào)用就可以了。
4忆植、模版引擎的作用都差不多放可，區(qū)別應(yīng)該只是語法不同，而koa-ejs的語法是：
- 引入
<%- %>
例如：當(dāng)我們要將index.html的body包含在layout.html中的<div class="container"></div> 中
就可以在b.html中這樣寫 ==>
<div class="container">
<%- body %>
</div>
PS: 而在index.html中我們就可以省略<head>等其它內(nèi)容朝刊，只寫body里的東西吴侦，并且也不需要加一個(gè)<body>標(biāo)簽
- 賦值
<%= %>
我們可以給一個(gè)指定頁面（index.html）傳數(shù)據(jù)，例如傳一個(gè) user（user === ' Tom '）坞古， 如果我們想將 user 的值 傳給傳到 <p></p>里，可以這樣寫：
<p> <%= user %> </p>
當(dāng)然我們也可以寫各種循環(huán)語句劫樟，判斷語句什么的 ==>
例1：
普通JS --> if....else....
if (a === 1) {
console.log('早上好');
} else {
console.log('晚上好');
}
模版語法 -->：
<% if(a === 1) { %>
console.log('早上好');
<% } else { %>
console.log('晚上好');
<% } %>
例2: 數(shù)組遍歷
假如我們有數(shù)組array痪枫，我們要遍歷打印每一個(gè)元素到控制臺(tái)：
普通的方法:
array.forEach(a => {
console.log(a);
})
模版語法:
<% array.forEach(a => { %>
console.log(a);
<% }) %>
備注： 當(dāng)然织堂，這里不用forEach，使用for循環(huán)也是可以的
koa-ejs的具體使用方法（項(xiàng)目文件中也有）：
// 安裝
npm install koa-ejs
// 引包
const render = require('koa-ejs');
// 配置
render(app, { //app就是前面實(shí)例化的Koa==> const app = new Koa();
//這一行配置的是模版引擎的路徑奶陈，__dirname:獲得當(dāng)前執(zhí)行文件所在目錄的完整目錄名,views 就是之前創(chuàng)建的那個(gè)文件夾了
root: path.join(__dirname, 'views'),
// 設(shè)置默認(rèn)的模版文件為layouts目錄下的layout文件易阳，如果你不指定模版就會(huì)使用這個(gè)
layout: 'layouts/layout',
//格式為html
viewExt: 'html',
//cache： 是否緩存編譯模版，默認(rèn)為true吃粒，這里設(shè)為false潦俺，不緩存
cache: false,
//調(diào)試標(biāo)記，默認(rèn)為false
debug: false
});
5. koa-ejs還支持include引入文件：
例如徐勃，在本項(xiàng)目中我們就需要將導(dǎo)航欄引入布局文件layout.html中,
==>
四事示、koa-router
1、下面的是官方的解釋
Router middleware for koa
---> 針對(duì)koa框架的路由中間件
- Express-style routing using
app.get,app.put,app.post, etc. - Named URL parameters.
- Named routes with URL generation.
- Responds to
OPTIONSrequests with allowed methods. - Support for
405 Method Not Allowedand501 Not Implemented. - Multiple route middleware.
- Multiple routers.
- Nestable routers.
- ES7 async/await support.
不知道你們看到這一大串英文是什么樣的感受僻肖，反正我是不怎么想看的肖爵。不過我們也不需要看這些，我們需要知道的是如何使用它：
2臀脏、官方給出的基本用法
在我們這個(gè)項(xiàng)目中劝堪，一半就只需要用到get和post請(qǐng)求，所以其它的我也沒怎么用過揉稚，不過應(yīng)該都差不多秒啦。
==>
Get請(qǐng)求：
假定我們的目標(biāo)是在主頁點(diǎn)擊注冊(cè)按鈕，然后頁面跳轉(zhuǎn)到注冊(cè)頁面搀玖，那么==>
需要在導(dǎo)航欄上的 <a>注冊(cè)</a> 上添加href屬性余境，例如
然后在路由模塊（即本項(xiàng)目中routes目錄下的index.js文件）中這樣寫==>
PS：請(qǐng)注意，上面兩張圖中使用紅色方框圈住的路徑內(nèi)容必須相等巷怜，而且它就是在瀏覽器地址欄中顯示的地址葛超，只不過在它們前面還得加個(gè)前綴，例如：
因?yàn)槲覀兪窃诒緳C(jī)上啟動(dòng)的服務(wù)延塑，所以注冊(cè)頁面的地址就是 --->
一般來說我們想要有幾個(gè)跳轉(zhuǎn)的頁面就得寫幾個(gè)路由绣张，包括請(qǐng)求主頁。在本期中我們總共有三個(gè)頁面需要跳轉(zhuǎn)关带，所以路由模塊應(yīng)有三個(gè)請(qǐng)求侥涵，即：
Post請(qǐng)求
其實(shí)post跟get差不多，只不過post相比于get多了一個(gè)表單提交及數(shù)據(jù)處理==>
關(guān)于表單 form ==>
1宋雏、action中的地址應(yīng)該填寫你 提交數(shù)據(jù)的目標(biāo)頁面
2芜飘、method 就是提交方式，本項(xiàng)目中寫post就可以了磨总，想知道別的HTTP請(qǐng)求可以去學(xué)習(xí)一下HTTP相關(guān)知識(shí)嗦明，挺重要的
然后我們?nèi)绾卧诤蠖谓邮毡韱翁峤坏臄?shù)據(jù)呢？ 可以在input輸入框中增加一個(gè)name="xxx" 的屬性蚪燕，然后我們需要根據(jù)這個(gè)來獲取用戶在輸入框中輸入的值娶牌。
假設(shè)我們有這樣的一個(gè)表單
我暫時(shí)把它放在主頁（index.html文件中）, 其
action="/" --> 提交數(shù)據(jù)到主頁
method="post" --> 方法為post
那么現(xiàn)在我們可以得到上圖的這樣一個(gè)東西（一個(gè)輸入框奔浅，一個(gè)提交按鈕），不好看但請(qǐng)不要在意這些細(xì)節(jié)诗良，我們現(xiàn)在要完成的東西就是 ==>
在輸入框中輸入一些內(nèi)容汹桦，例如 Koa 然后點(diǎn)擊提交，我們能在后端拿到Koa這個(gè)字符串鉴裹，所以我們現(xiàn)在要去路由模塊index.js中寫一些東西了 ==>
router.post("/", async (ctx) => {
const title = ctx.request.body.title;
console.log(title);
});
如圖所示舞骆，在輸入框中輸入koa,然后點(diǎn)擊提交，會(huì)跳轉(zhuǎn)到下圖所示界面径荔，不要管它督禽，這是正常的，因?yàn)槲覀儾]有在post請(qǐng)求里寫別的東西猖凛，使提交結(jié)束后頁面跳轉(zhuǎn)到其它地方
好了赂蠢，post請(qǐng)求的基礎(chǔ)東西大概也就這么多了，如果你想看一下請(qǐng)求的body的內(nèi)容辨泳，可以把ctx.request.body.title中的title去掉虱岂，同理你也可以將body去掉看整個(gè)請(qǐng)求的內(nèi)容。
我這里使用的編輯器是WebStorm ,我們可以免費(fèi)使用一個(gè)月菠红，如果之后還想再用就得花錢了第岖，而且不便宜。它自帶終端试溯，有時(shí)候會(huì)顯得比較方便蔑滓，當(dāng)然VScode也是帶終端的，并且完全免費(fèi)遇绞，也可以考慮這個(gè)键袱。如果不想用工具自帶的終端，本機(jī)的終端當(dāng)然也是可以的了摹闽，只不過你需要手動(dòng)cd進(jìn)入到你的工作目錄而已蹄咖。
下期預(yù)告
- 用戶的注冊(cè)與登錄（包括數(shù)據(jù)庫操作）
- 帖子的發(fā)表
- 主頁子論壇和帖子的展示
這些內(nèi)容好像有點(diǎn)多，先這樣計(jì)劃吧付鹿，具體寫多少到時(shí)候再說澜汤，我盡量寫完。如果每次寫這么多的話舵匾，大概還有個(gè)3俊抵、4篇文章大概也就差不多了。
結(jié)束語
好了坐梯，本篇文章到這里也就結(jié)束了徽诲，源代碼我會(huì)上傳到我的Github
我自己的項(xiàng)目倉庫
https://github.com/ShyGodB/BBS-by-Koa-Mysql
