如何在HTML登录页面设计完成后，通过后端管理实现用户登录并自动跳转至主页面，同时在主页面上显示登录用户的用户名，此外，还需要在后台支持功能操作，如数据的增删改查（添加用户、删除账户、查询用户和修改用户信息）

在HTML登录页面设计完成后，要实现前端用户登录和后端管理的功能，你可以按照以下步骤进行：

1. **前端实现**：
- 创建一个HTML表单，包括输入字段（例如邮箱/用户名和密码），以及登录按钮。
- 使用JavaScript编写客户端验证，比如检查必填项和格式是否正确。当用户点击登录，发送Ajax请求到服务器。

<!-- login.html -->
<form id="loginForm">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <button type="submit">登录</button>
</form>

2. **后端处理**：
- 设计一个API接口（如`/api/login`）用于接收登录请求，验证用户名和密码。如果验证成功，返回一个包含用户ID或其他唯一标识的响应。
- 当用户登录成功，设置cookies或session存储用户信息，并重定向到主页面（例如`/main`）。

3. **主页面展示**：
- 主页面（main.html）需要获取当前登录用户的信息。可以在head部分添加`<script>`标签，从服务器获取用户数据，并动态更新显示区。

// main.js
fetch('/api/currentUser')
    .then(response => response.json())
    .then(data => {
        document.getElementById('usernameDisplay').innerText = data.username;
    });

4. **数据管理功能**：
- 后台创建相应的API接口，如：
- 添加用户：`/api/users/register`
- 删除用户：`/api/users/delete/:id`
- 修改用户：`/api/users/update/:id`

5. **后端实现**：
- 使用你喜欢的语言（如Node.js with Express, PHP with Laravel, Java with Spring Boot等）构建RESTful API，处理上述CRUD操作。

6. **安全性考虑**：
- 对敏感数据（如密码）进行加密存储，避免直接暴露给前端。
- 实现适当的错误处理和异常捕获，提升用户体验和系统稳定性。

记得在整个过程中测试各个功能，确保它们能正常工作。如果你需要更具体的代码示例或有其他疑问，可以随时提问。