實(shí)踐分前端部分和最重要的node服務(wù)器部分陋葡。在這里將重點(diǎn)放在nodeJS的代碼上亚亲。
想要成為服務(wù)器,就需要能夠處理網(wǎng)絡(luò)請(qǐng)求(http)和對(duì)數(shù)據(jù)庫(kù)的數(shù)據(jù)作處理脖岛。在這次實(shí)踐中朵栖,node服務(wù)器端主要用到以下技術(shù):?
koa2(處理http請(qǐng)求)、Sequelize(對(duì)數(shù)據(jù)庫(kù)進(jìn)行映射柴梆,即用來(lái)對(duì)數(shù)據(jù)庫(kù)數(shù)據(jù)增刪改查)陨溅、?nunjucks(處理頁(yè)面)、mysql绍在。
gitee地址:wx-front-with-server: node 前后端實(shí)踐门扇,,偿渡,可先download下來(lái)臼寄,按README.md運(yùn)行一下。
最后的服務(wù)器文件夾結(jié)構(gòu)如下:
前言:跟著廖雪峰老師學(xué)習(xí)溜宽,一些思想和圖片來(lái)自https://www.liaoxuefeng.com吉拳。
1.首先看app.js入口文件
可以發(fā)現(xiàn)app.js代碼很少,http的獲取和路由注冊(cè)都由2中的app.use(routerController().routes())來(lái)完成适揉。這是因?yàn)槠渲羞M(jìn)行了自動(dòng)化加載留攒。
先來(lái)看看一般我們的操作為:
為了避免越來(lái)越多的請(qǐng)求處理會(huì)污染入口文件煤惩。我們將router處理都寫在router文件夾下。
如:router/indexRoute.js
在這里炼邀,請(qǐng)求對(duì)應(yīng)的處理我又統(tǒng)一歸在了controller文件夾下:
/controller/indexController.js
文件細(xì)分出來(lái)了魄揉,如何再加載到app.js呢∈媚看router.js文件:
最后在app.js中引入router.js,并用app.use(routerController().routes())實(shí)現(xiàn)注冊(cè)洛退。
*Nunjucks:主要是在templating.js文件中
app.js?中 ,?使用 app.use(templating('views',{}));注冊(cè)“views”文件夾下的模板輸出文件杰标。
在路由中可用于模板的跳轉(zhuǎn)和內(nèi)容傳遞兵怯,如:ctx.render('index.html',{ data:data });跳轉(zhuǎn)到index.html頁(yè)面,且可使用data數(shù)據(jù)在旱。
關(guān)于Nunjucks,看下 https://www.liaoxuefeng.com/wiki/1022910821149312/1100400176397024摇零,比較簡(jiǎn)單。
完成koa的部分桶蝎,我們已經(jīng)可以根據(jù)不同的訪問(wèn)請(qǐng)求如:localhost:3000/?或 localhost:3000/getAll ,或者提交post請(qǐng)求 /add來(lái)獲得服務(wù)器不同的跳轉(zhuǎn)和反饋谅畅。