更新登录页面，修改端口号并新增用户名验证功能

- 将主应用的端口号从3000更改为3001
- 在 AuthController 中新增 validateUsername 方法，用于验证用户名
- 更新登录表单，使用 hx-post 进行异步提交，并引入新的用户名输入组件

src/controllers/Page/AuthController.js

@@ -17,6 +17,13 @@ export default class AuthController extends BaseController {
         return this.success(ctx, null, "登录成功")
     }
 
+    async validateUsername(ctx) {
+        return this.render(ctx, "page/login/_ui/username", {
+            value: ctx.request.body.username,
+            error: undefined
+        })
+    }
+
     /**
      * 创建基础页面相关路由
      * @returns {Router} 路由实例
@@ -30,6 +37,8 @@ export default class AuthController extends BaseController {
         router.get("/login", controller.handleRequest(controller.loginGet))
         router.post("/login", controller.handleRequest(controller.loginPost))
 
+        router.post("/login/validate/username", controller.handleRequest(controller.validateUsername))
+
         return router
     }
 }

src/main.js

@@ -9,7 +9,7 @@ import os from "os"
 // 应用插件与自动路由
 import LoadMiddlewares from "./middlewares/install.js"
 
-const PORT = process.env.PORT || 3000;
+const PORT = process.env.PORT || 3001;
 
 ; (async () => {
 

src/views/page/login/_ui/username.pug

@@ -0,0 +1,4 @@
+div(hx-target="this" hx-swap="outerHTML"  hx-post="/login/validate/username?aa=1")
+    input(type="text" id="username" value=value name="username" placeholder="用户名" hx-indicator="#ind")
+    //- img(id="ind" src="/img/bars.svg" class="htmx-indicator")
+    div sda

src/views/page/login/index.pug

@@ -3,7 +3,7 @@ extends /layouts/empty.pug
 block pageHead
 
 block pageContent
-  form(action="/login" method="post") 
-    input(type="text" name="username" placeholder="用户名")
+  form(hx-post="/login") 
+    include _ui/username.pug
     input(type="password" name="password" placeholder="密码")
     button(type="submit") 登录