其實很久之前就想做一個個人博客網(wǎng)站,服務器域名也很早就買好了。個人就是不知道為啥一直沒下定決心干起來,這次因為疫情滯留在家里(湖北。。。),重新燃起了這個目標.不多BB,直接開干。
框架選擇
在這方面我猶豫了很久，去年學了一下 JAVA-SpringBoot，然后在想要不要繼續(xù)深入下,就用 JAVA-SpringBoot+ react/Vue 。又想，就幾個頁面要不網(wǎng)上直接下個模板 就用原生 + Jquer 干得了。最后敲定下來 , 前端 React SSR 服務端 Node.Js + Koa。
后端項目搭建
npm init
添加依賴
npm install koa koa-bodyparser koa-static
新建項目入口文件 app.js
const koa = require('koa')
var router = require('koa-router')();
const parser = require('koa-bodyparser')
const app = new koa()
app.use(parser())
router.get('/',async (ctx)=>{
ctx.body="hello node";
})
app.use(router.routes());
app.on('error', (err, ctx) => {
console.log('捕獲到了!', err.message);
});
app.listen(8080)
然后在瀏覽器訪問 - http://localhost:8080/
顯示 hello node , Ok,一個簡單的 Node 服務啟動了.
使用 require-directory 自動加載路由
使用 require-directory 庫可以加載指定文件夾下的所有模塊，而不需要每次都使用 require() 來加載
添加 require-directory 依賴
npm install require-directory
基本語法
require-directory 可以指定文件夾也可以不指定，文件夾嵌套也沒事。不指定，默認是 __dirname ，即當前模塊的目錄名(絕對路徑)，我們這里采用 process.cwd()
有人會問 __dirname 和 process.cwd() 的區(qū)別
process.cwd() 是當前執(zhí)行node命令時候的文件夾地址 ——工作目錄，保證了文件在不同的目錄下執(zhí)行時，路徑始終不變
__dirname 是被執(zhí)行的js 文件的地址 ——文件所在目錄
假如 app 目錄下有 home.js 和 user 目錄，user 目錄下還有 login.js 和 logout.js 文件
const requireDirectory = require("require-directory");
const modules = requireDirectory(module, `${process.cwd()}/app`);
modules結果相當于
const modules = {
home: require("./app/home.js"),
auth: {
login: require("./app/user/login.js"),
logout: require("./app/user/logout.js")
}
}
知道了這個概念我們下面就好操作了.
自動加載 Koa 路由
const koa = require('koa')
const requireDirectory = require('require-directory')
const Router = require('koa-router')
const app = new koa()
const apiDirectory = `${process.cwd()}/app/api`
requireDirectory(module, apiDirectory, { visit: whenLoadModule })
function whenModuleLoad(obj) {
if (obj instanceof Router) {
InitManager.app.use(obj.routes());
} else if (typeof obj === "object") {
// 兼容 module.exports 導出對象的寫法
for (let k in obj) {
if (obj[k] instanceof Router) {
InitManager.app.use(obj[k].routes());
}
}
}
}
我們在 api 目錄下新建 test.js 和 user目錄, 在 user 目錄下新建 login.js 和 logout.js 文件
const Router = require("koa-router");
const router = new Router()
router.get('/test', async (ctx, next) => {
ctx.body = "usertest"
})
module.exports = router
我們試試 導出對象的寫法
const Router = require("koa-router");
const router = new Router({
prefix:'/user'
})
router.get('/login', async (ctx, next) => {
ctx.body = "login"
})
module.exports = {
router
}
使用 nodemon 啟動調試
nodemon 用來監(jiān)視node.js應用程序中的任何更改并自動重啟服務,不需要我們每次改了代碼手動重啟。
全局安裝 nodemon
npm install nodemon -g
啟動 app.js
nodemon app.js
ok , 現(xiàn)在我們依次訪問瀏覽器路由
發(fā)現(xiàn)我們的路由全部都是自動加載了
