从零构架个人博客网站(一)

• 框架选择
• 后端项目搭建
  • 添加依赖
• 新建项目入口文件 app.js
• 使用 require-directory 自动加载路由
  • 基本语法
  • 自动加载 Koa 路由
• 使用 nodemon 启动调试

其实很久之前就想做一个个人博客网站,服务器域名也很早就买好了。个人就是不知道为啥一直没下定决心干起来,这次因为疫情滞留在家里(湖北。。。),重新燃起了这个目标.不多BB,直接开干。

框架选择

在这方面我犹豫了很久，去年学了一下 JAVA-SpringBoot，然后在想要不要继续深入下,就用 JAVA-SpringBoot+ react/Vue 。又想，就几个页面要不网上直接下个模板 就用原生 + 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() 的区别

process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录，保证了文件在不同的目录下执行时，路径始终不变

__dirname 是被执行的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 用来监视node.js应用程序中的任何更改并自动重启服务,不需要我们每次改了代码手动重启。

全局安装 nodemon

npm install nodemon -g 

启动 app.js

nodemon app.js

ok , 现在我们依次访问浏览器路由

test.jpg login.jpg

发现我们的路由全部都是自动加载了