feat: 添加视图渲染支持，更新中间件，优化用户认证和错误处理

2 months ago · f7dc33873d
16 changed files with 229 additions and 117 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -16,6 +16,8 @@
  },
  "dependencies": {
    "bcryptjs": "^3.0.2",
+    "consolidate": "^1.0.4",
+    "get-paths": "^0.0.7",
    "jsonwebtoken": "^9.0.0",
    "knex": "^3.1.0",
    "koa": "^3.0.0",
@ -25,6 +27,7 @@
    "module-alias": "^2.2.3",
    "node-cron": "^4.1.0",
    "path-to-regexp": "^8.2.0",
+    "pug": "^3.0.3",
    "sqlite3": "^5.1.7"
  },
  "_moduleAliases": {
--- a/public/index.html
+++ b/public/index.html
@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cn">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>登录 / 注册</title>
-  <style>
-    body { background: #f5f6fa; font-family: 'Segoe UI', Arial, sans-serif; }
-    .container { max-width: 350px; margin: 60px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px #0001; padding: 32px 28px; }
-    h2 { text-align: center; margin-bottom: 24px; color: #333; }
-    .tabs { display: flex; margin-bottom: 24px; }
-    .tab { flex: 1; text-align: center; padding: 10px 0; cursor: pointer; border-bottom: 2px solid #eee; color: #888; font-weight: 500; }
-    .tab.active { color: #1976d2; border-bottom: 2px solid #1976d2; }
-    .form-group { margin-bottom: 18px; }
-    label { display: block; margin-bottom: 6px; color: #555; }
-    input { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; }
-    button { width: 100%; padding: 10px; background: #1976d2; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 8px; }
-    button:active { background: #145ea8; }
-    .msg { text-align: center; color: #e53935; margin-bottom: 10px; min-height: 22px; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="tabs">
-      <div class="tab active" id="loginTab">登录</div>
-      <div class="tab" id="registerTab">注册</div>
-    </div>
-    <div class="msg" id="msg"></div>
-    <form id="loginForm">
-      <div class="form-group">
-        <label for="login-username">用户名</label>
-        <input type="text" id="login-username" required autocomplete="username">
-      </div>
-      <div class="form-group">
-        <label for="login-password">密码</label>
-        <input type="password" id="login-password" required autocomplete="current-password">
-      </div>
-      <button type="submit">登录</button>
-    </form>
-    <form id="registerForm" style="display:none;">
-      <div class="form-group">
-        <label for="register-username">用户名</label>
-        <input type="text" id="register-username" required autocomplete="username">
-      </div>
-      <div class="form-group">
-        <label for="register-email">邮箱</label>
-        <input type="email" id="register-email" required autocomplete="email">
-      </div>
-      <div class="form-group">
-        <label for="register-password">密码</label>
-        <input type="password" id="register-password" required autocomplete="new-password">
-      </div>
-      <button type="submit">注册</button>
-    </form>
-  </div>
-  <script>
-    const loginTab = document.getElementById('loginTab');
-    const registerTab = document.getElementById('registerTab');
-    const loginForm = document.getElementById('loginForm');
-    const registerForm = document.getElementById('registerForm');
-    const msg = document.getElementById('msg');
-
-    loginTab.onclick = () => {
-      loginTab.classList.add('active');
-      registerTab.classList.remove('active');
-      loginForm.style.display = '';
-      registerForm.style.display = 'none';
-      msg.textContent = '';
-    };
-    registerTab.onclick = () => {
-      registerTab.classList.add('active');
-      loginTab.classList.remove('active');
-      registerForm.style.display = '';
-      loginForm.style.display = 'none';
-      msg.textContent = '';
-    };
-
-    loginForm.onsubmit = async e => {
-      e.preventDefault();
-      msg.textContent = '';
-      const username = document.getElementById('login-username').value.trim();
-      const password = document.getElementById('login-password').value;
-      if (!username || !password) { msg.textContent = '请填写完整信息'; return; }
-      // TODO: 替换为实际API
-      msg.style.color = '#1976d2';
-      msg.textContent = '登录成功（示例）';
-    };
-    registerForm.onsubmit = async e => {
-      e.preventDefault();
-      msg.textContent = '';
-      const username = document.getElementById('register-username').value.trim();
-      const email = document.getElementById('register-email').value.trim();
-      const password = document.getElementById('register-password').value;
-      if (!username || !email || !password) { msg.textContent = '请填写完整信息'; return; }
-      // TODO: 替换为实际API
-      msg.style.color = '#1976d2';
-      msg.textContent = '注册成功（示例）';
-    };
-  </script>
-</body>
-</html>
--- a/public/static/aa.txt
+++ b/public/static/aa.txt
@ -0,0 +1 @@
+asd
--- a/src/controllers/Page/HtmxController.js
+++ b/src/controllers/Page/HtmxController.js
@ -0,0 +1,23 @@
+export const Index = async ctx => {
+    return await ctx.render("index", { name: "bluescurry" })
+}
+
+export const Page = (name, data) => async ctx => {
+    return await ctx.render(name, data)
+}
+
+import Router from "utils/router.js"
+export function createRoutes() {
+    const router = new Router()
+    router.post("/clicked", async ctx => {
+        ctx.cookies.set("token", "sadas", {
+            httpOnly: true,
+            // Setting httpOnly to false allows JavaScript to access the cookie
+            // This enables browsers to automatically include the cookie in requests
+            sameSite: "lax",
+            // maxAge: 86400000, // Optional: cookie expiration in milliseconds (e.g., 24 hours)
+        })
+        return await ctx.render("htmx/fuck", { title: "HTMX Clicked" })
+    })
+    return router
+}
--- a/src/controllers/Page/PageController.js
+++ b/src/controllers/Page/PageController.js
@ -0,0 +1,14 @@
+export const Index = async ctx => {
+    return await ctx.render("index", { name: "bluescurry" })
+}
+
+export const Page = (name, data) => async ctx => {
+    return await ctx.render(name, data)
+}
+
+import Router from "utils/router.js"
+export function createRoutes() {
+    const router = new Router()
+    router.get("/", Index)
+    return router
+}
--- a/src/controllers/userController.js
+++ b/src/controllers/userController.js
@ -26,6 +26,16 @@ export const login = async (ctx) => {
    try {
        const { username, email, password } = ctx.request.body
        const result = await userService.login({ username, email, password })
+        if (result && result.token) {
+            ctx.cookies.set("token", result.token, {
+                httpOnly: true,
+                // Setting httpOnly to false allows JavaScript to access the cookie
+                // This enables browsers to automatically include the cookie in requests
+                sameSite: "lax",
+                secure: process.env.NODE_ENV === "production", // Use secure cookies in production
+                // maxAge: 86400000, // Optional: cookie expiration in milliseconds (e.g., 24 hours)
+            })
+        }
        ctx.body = formatResponse(true, result)
    } catch (err) {
        ctx.body = formatResponse(false, null, err.message)
--- a/src/main.js
+++ b/src/main.js
@ -9,17 +9,12 @@ import log4js from "log4js"

 // 应用插件与自动路由
 import LoadMiddlewares from "./middlewares/install.js"
-import { autoRegisterControllers } from "utils/autoRegister.js"
-import bodyParser  from "koa-bodyparser"

 const logger = log4js.getLogger()
 const app = new Koa()

-app.use(bodyParser());
 // 注册插件
 LoadMiddlewares(app)
-// 自动注册所有 controller
-autoRegisterControllers(app)

 const PORT = process.env.PORT || 3000

@ -38,7 +33,10 @@ const server = app.listen(PORT, () => {
        return "localhost"
    }
    const localIP = getLocalIP()
-    logger.trace(`服务器运行在: http://${localIP}:${port}`)
+    logger.trace(`===================【服务器地址】====================`)
+    logger.trace(`          http://localhost:${port}  (本地地址)       `)
+    logger.trace(`          http://${localIP}:${port}  (本地地址)      `)
+    logger.trace(`===================【服务器地址】====================`)
 })

 export default app
--- a/src/middlewares/Auth/auth.js
+++ b/src/middlewares/Auth/auth.js
@ -17,7 +17,12 @@ function matchList(list, path) {
 }

 function verifyToken(ctx) {
-    const token = ctx.headers["authorization"]?.replace(/^Bearer\s/, "")
+    // 优先从 headers 获取 token
+    let token = ctx.headers["authorization"]?.replace(/^Bearer\s/, "")
+    // 如果 headers 没有，则从 cookies 获取
+    if (!token) {
+        token = ctx.cookies.get("authorization")
+    }
    if (!token) return { ok: false }
    try {
        ctx.state.user = jwt.verify(token, JWT_SECRET)
--- a/src/middlewares/Views/index.js
+++ b/src/middlewares/Views/index.js
@ -0,0 +1,78 @@
+import { resolve } from "path"
+import consolidate from "consolidate"
+import send from "../Send"
+import getPaths from "get-paths"
+// import pretty from "pretty"
+import { logger } from "@/logger"
+
+export default viewsMiddleware
+
+function viewsMiddleware(path, { engineSource = consolidate, extension = "html", options = {}, map } = {}) {
+    return function views(ctx, next) {
+        if (ctx.render) return next()
+
+        ctx.getRender = function (relPath, locals = {}) {
+            return getPaths(path, relPath, extension).then(paths => {
+                const suffix = paths.ext
+                const state = Object.assign(locals, options, ctx.state || {})
+                state.partials = Object.assign({}, options.partials || {})
+
+                if (isHtml(suffix) && !map) {
+                    return send.getBody(ctx, paths.rel, { root: path })
+                }
+
+                const engineName = map && map[suffix] ? map[suffix] : suffix
+                const render = engineSource[engineName]
+
+                if (!engineName || !render) {
+                    return Promise.reject(new Error(`Engine not found for the ".${suffix}" file extension`))
+                }
+
+                return render(resolve(path, paths.rel), state)
+            })
+        }
+
+        // 将 render 注入到 context 和 response 对象中
+        ctx.response.render = ctx.render = function (relPath, locals = {}) {
+            return getPaths(path, relPath, extension).then(paths => {
+                const suffix = paths.ext
+                const state = Object.assign(locals, options, ctx.state || {})
+                // deep copy partials
+                state.partials = Object.assign({}, options.partials || {})
+                logger.debug("render `%s` with %j", paths.rel, state)
+                ctx.type = "text/html"
+
+                // 如果是 html 文件，不编译直接 send 静态文件
+                if (isHtml(suffix) && !map) {
+                    return send(ctx, paths.rel, {
+                        root: path,
+                    })
+                } else {
+                    const engineName = map && map[suffix] ? map[suffix] : suffix
+
+                    // 使用 engineSource 配置的渲染引擎 render
+                    const render = engineSource[engineName]
+
+                    if (!engineName || !render) return Promise.reject(new Error(`Engine not found for the ".${suffix}" file extension`))
+
+                    return render(resolve(path, paths.rel), state).then(html => {
+                        // since pug has deprecated `pretty` option
+                        // we'll use the `pretty` package in the meanwhile
+                        // if (locals.pretty) {
+                        //     debug("using `pretty` package to beautify HTML")
+                        //     html = pretty(html)
+                        // }
+                        ctx.body = html
+                    })
+                }
+            })
+        }
+
+        // 中间件执行结束
+        return next()
+    }
+}
+
+function isHtml(ext) {
+    return ext === "html"
+}
--- a/src/middlewares/errorHandler/index.js
+++ b/src/middlewares/errorHandler/index.js
@ -1,11 +1,14 @@
 // src/plugins/errorHandler.js
 // 错误处理中间件插件

-function formatError(ctx, status, message) {
+function formatError(ctx, status, message, stack) {
  const accept = ctx.accepts('json', 'html', 'text');
+  const isDev = process.env.NODE_ENV === 'development';
  if (accept === 'json') {
    ctx.type = 'application/json';
-    ctx.body = { success: false, error: message };
+    ctx.body = isDev && stack
+      ? { success: false, error: message, stack }
+      : { success: false, error: message };
  } else if (accept === 'html') {
    ctx.type = 'html';
    ctx.body = `
@ -14,25 +17,38 @@ function formatError(ctx, status, message) {
        <body>
          <h1>${status} Error</h1>
          <p>${message}</p>
+          ${isDev && stack ? `<pre style='color:red;'>${stack}</pre>` : ''}
        </body>
      </html>
    `;
  } else {
    ctx.type = 'text';
-    ctx.body = `${status} - ${message}`;
+    ctx.body = isDev && stack
+      ? `${status} - ${message}\n${stack}`
+      : `${status} - ${message}`;
  }
  ctx.status = status;
 }

 export default function errorHandler() {
  return async (ctx, next) => {
+    // 拦截 Chrome DevTools 探测请求，直接返回 204
+    if (ctx.path === '/.well-known/appspecific/com.chrome.devtools.json') {
+      ctx.status = 204;
+      ctx.body = '';
+      return;
+    }
    try {
      await next();
      if (ctx.status === 404) {
        formatError(ctx, 404, 'Resource not found');
      }
    } catch (err) {
-      formatError(ctx, err.statusCode || 500, err.message || err || 'Internal server error');
+      const isDev = process.env.NODE_ENV === 'development';
+      if (isDev && err.stack) {
+        console.error(err.stack);
+      }
+      formatError(ctx, err.statusCode || 500, err.message || err || 'Internal server error', isDev ? err.stack : undefined);
    }
  };
 }
--- a/src/middlewares/install.js
+++ b/src/middlewares/install.js
@ -3,14 +3,17 @@ import Send from "./Send"
 import { resolve } from "path"
 import { fileURLToPath } from "url"
 import path from "path"
-import errorHandler from "./errorHandler"
+import ErrorHandler from "./ErrorHandler"
 import { auth } from "./Auth"
+import bodyParser from "koa-bodyparser"
+import Views from "./Views"
+import { autoRegisterControllers } from "utils/autoRegister.js"

 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const publicPath = resolve(__dirname, "../../public")

 export default app => {
-    app.use(errorHandler())
+    app.use(ErrorHandler())
    app.use(ResponseTime)
    app.use(
        auth({
@ -21,13 +24,19 @@ export default app => {
                { pattern: "/api/v1/status", auth: "try" },
                { pattern: "/api/**/*", auth: true },
                // 静态资源访问
-                "",
-                "/",
-                "/**/*",
+                { pattern: "/", auth: "try" },
+                { pattern: "/**/*", auth: "try" },
            ],
            blackList: [],
        })
    )
+    app.use(bodyParser())
+    app.use(
+        Views(resolve(__dirname, "../views"), {
+            extension: "pug",
+        })
+    )
+    autoRegisterControllers(app)
    app.use(async (ctx, next) => {
        try {
            await Send(ctx, ctx.path, { root: publicPath })
--- a/src/views/htmx/fuck.pug
+++ b/src/views/htmx/fuck.pug
@ -0,0 +1 @@
+<a href="/page/htmx">#{title || '默认标题'}</a>
--- a/src/views/index.pug
+++ b/src/views/index.pug
@ -0,0 +1,26 @@
+extends ./layouts/page.pug
+
+
+block pageRoot
+  - var title = '示例页面标题'
+
+block pageContent
+  .container.mt-5
+    .row.justify-content-center
+      .col-md-8.text-center
+        img.rounded-circle.shadow.mb-4(src='https://avatars.githubusercontent.com/u/9919?s=200&v=4', alt='Avatar', width='120', height='120')
+        h1.mt-3.mb-1 你的姓名
+        h4.text-muted 你的职位 / 头衔
+        p.lead.mt-3 这里是一段简短的自我介绍，突出你的专业技能、兴趣或座右铭。
+        button(hx-post="/clicked" hx-swap="outerHTML") Click Me
+        hr.my-4
+        .d-flex.justify-content-center.gap-4
+          a(href='mailto:your@email.com', target='_blank')
+            i.fas.fa-envelope.me-2
+            | 邮箱
+          a(href='https://github.com/your-github', target='_blank')
+            i.fab.fa-github.me-2
+            | GitHub
+          a(href='https://your-website.com', target='_blank')
+            i.fas.fa-globe.me-2
+            | 个人网站
--- a/src/views/layouts/base.pug
+++ b/src/views/layouts/base.pug
@ -0,0 +1,12 @@
+block root
+doctype html
+html(lang="zh-CN")
+  head
+    title #{title || '默认标题'}
+    meta(charset="utf-8")
+    meta(name="viewport" content="width=device-width, initial-scale=1")
+    script(src="https://unpkg.com/htmx.org@2.0.4")
+    block head
+  body
+    block content
+    block scripts
--- a/src/views/layouts/page.pug
+++ b/src/views/layouts/page.pug
@ -0,0 +1,17 @@
+
+extends ./base.pug
+
+block root
+  block pageRoot
+
+block head
+  link(href='https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet')
+  script(src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js')
+  script(src='https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js')
+  block pageHead
+
+block content
+  block pageContent
+
+block scripts
+  block pageScripts
			`@ -0,0 +1 @@`
			`<a href="/page/htmx">#{title \|\| '默认标题'}</a>`