使用CodeBuddy,5分钟开发一个带有前后端的登录模块
原创
使用CodeBuddy,5分钟开发一个带有前后端的登录模块
原创
软件架构师Michael
修改于 2025-07-23 10:30:07
修改于 2025-07-23 10:30:07
代码可运行
运行总次数：0
代码可运行
CodeBuddy真实太强悍了，只要只要稍微懂点编程基础，就能开发应用了。
今天我来分享一个用CodeBuddy开发一个带有前后端程序的登录模块。
登录CodeBuddy后，告知具体任务要求：
接下来，CodeBuddy就开始工作了：
一、项目结构与技术栈
模块 | 技术/框架 | 说明 |
|---|---|---|
前端 | Vue.js 3.x + Element Plus（UI库） | 清新自然的登录界面，含表单验证 |
后端 | .NET 8.0（ASP.NET Core Web API） | 提供登录API，验证用户名密码 |
数据库 | PostgreSQL | 存储用户信息（用户名、密码） |
ORM | SqlSugar | .NET 下操作 PostgreSQL 的轻量ORM |
通信方式 | HTTP + JSON | 前后端通过 RESTful API 交互 |
二、数据库设计（PostgreSQL）
用户表：users
字段名 | 数据类型 | 说明 |
|---|---|---|
id | serial (主键) | 用户唯一ID |
username | varchar(50) | 用户名，唯一 |
password | varchar(255) | 密码（建议前端加密后传输，或后端哈希存储） |
> 🔒 注意：实际项目中密码应该以 哈希值（如 bcrypt） 存储，这里为了演示先存明文，你可后续加强。
三、后端代码（.NET 8.0 + SqlSugar + PostgreSQL）
1. 创建项目
dotnet new webapi -n LoginApi
cd LoginApi
2. 安装必要的 NuGet 包
dotnet add package SqlSugarCore
dotnet add package Microsoft.AspNetCore.OpenApi
dotnet add package Swashbuckle.AspNetCore
SqlSugarCore 是 .NET Core / .NET 5+ 的 SqlSugar 版本。
3. 数据库上下文 & 用户实体（Models/User.cs）
// Models/User.cs
namespace LoginApi.Models;
/// <summary>
/// 用户实体类，对应数据库 users 表
/// </summary>
public class User
{
public int Id { get; set; } // 用户ID
public string Username { get; set; } = ""; // 用户名
public string Password { get; set; } = ""; // 密码（建议后续加密存储）
}
4. 数据库配置与 SqlSugar 服务（Program.cs）
// Program.cs
using LoginApi.Models;
using SqlSugar;
var builder = WebApplication.CreateBuilder(args);
// 1. 添加控制器服务
builder.Services.AddControllers();
// 2. 添加 Swagger（可选，便于测试API）
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// 3. 配置 SqlSugar（连接 PostgreSQL）
builder.Services.AddScoped<ISqlSugarClient>(sp =>
{
var connectionString = builder.Configuration.GetConnectionString("Postgres");
var sugar = new SqlSugarScope(new ConnectionConfig()
{
ConnectionString = connectionString, // 数据库连接字符串
DbType = DbType.PostgreSQL, // 数据库类型
IsAutoCloseConnection = true, // 自动释放连接
InitKeyType = InitKeyType.Attribute // 可选，如果使用特性映射
},
db =>
{
// 可在此配置更多 SqlSugar 行为
});
return sugar;
});
var app = builder.Build();
// 4. 启用 Swagger（开发环境）
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
5. 数据库连接字符串（appsettings.json）
{
"ConnectionStrings": {
"Postgres": "Host=localhost;Port=5432;Database=login_db;Username=postgres;Password=yourpassword;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
请将yourpassword替换为你的 PostgreSQL 密码，数据库名login_db需提前创建好。
6. 创建数据库表（SQL 脚本，运行于 PostgreSQL）
-- 登录项目：创建用户表
CREATE TABLE users (
id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
-- 可选：插入一条测试用户（密码明文，仅演示！）
INSERT INTO users (username, password) VALUES ('admin', '123456');
建议使用 pgAdmin 或 psql 执行该 SQL。
7. 登录接口（Controllers/AuthController.cs）
// Controllers/AuthController.cs
using LoginApi.Models;
using Microsoft.AspNetCore.Mvc;
using SqlSugar;
namespace LoginApi.Controllers;
[ApiController]
[Route("api/[controller]")]
public class AuthController : ControllerBase
{
private readonly ISqlSugarClient _db;
// 构造函数注入 SqlSugar
public AuthController(ISqlSugarClient db)
{
_db = db;
}
/// <summary>
/// 用户登录接口
/// POST /api/auth/login
/// 请求体：{ "username": "admin", "password": "123456" }
/// </summary>
[HttpPost("login")]
public IActionResult Login([FromBody] LoginRequest request)
{
// 1. 参数校验
if (string.IsNullOrEmpty(request.Username) || string.IsNullOrEmpty(request.Password))
{
return BadRequest("用户名和密码不能为空");
}
// 2. 查询用户
var user = _db.Queryable<User>()
.FirstOrDefault(u => u.Username == request.Username);
if (user == null)
{
return Unauthorized("用户不存在");
}
// 3. 校验密码（⚠️实际项目要加密比对，如 bcrypt）
if (user.Password != request.Password)
{
return Unauthorized("密码错误");
}
// 4. 登录成功，返回成功信息（可返回 Token，这里简化）
return Ok(new { message = "登录成功", userId = user.Id, username = user.Username });
}
}
/// <summary>
/// 登录请求的数据模型
/// </summary>
public class LoginRequest
{
public string Username { get; set; } = "";
public string Password { get; set; } = "";
}
四、前端代码（Vue 3 + Element Plus）
1. 创建 Vue 项目
npm create vue@latest login-frontend
cd login-frontend
npm install
npm install element-plus
npm install @element-plus/icons-vue
选择需要的功能（如 Router、Pinia 可选，这里不做复杂状态管理）。
2. 引入 Element Plus（main.js）
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
3. 登录页面组件（src/views/Login.vue）
<template>
<div class="login-container">
<el-card class="login-card">
<template #header>
<h2 style="text-align: center; margin: 0;">用户登录</h2>
</template>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="rules"
label-width="80px"
style="max-width: 400px; margin: 0 auto;"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入用户名"
clearable
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
show-password
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
style="width: 100%;"
:loading="loading"
@click="handleLogin"
>
登录
</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
// 表单数据
const loginForm = reactive({
username: '',
password: ''
})
// 表单引用（用于调用验证方法）
const loginFormRef = ref()
// 加载状态
const loading = ref(false)
// 表单验证规则
const rules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
// 登录处理函数
const handleLogin = async () => {
if (!loginFormRef.value) return
// 表单校验
await loginFormRef.value.validate(async (valid) => {
if (!valid) return
loading.value = true
try {
// 发送登录请求到后端 API
const res = await axios.post('http://localhost:5000/api/auth/login', {
username: loginForm.username,
password: loginForm.password
})
ElMessage.success(res.data.message || '登录成功')
console.log('登录成功：', res.data)
// TODO：登录成功后可以存储 token、跳转页面等
} catch (error) {
console.error('登录失败：', error.response?.data || error.message)
ElMessage.error(error.response?.data?.message || '登录失败，请检查用户名和密码')
} finally {
loading.value = false
}
})
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff; /* 清新浅蓝背景 */
}
.login-card {
width: 100%;
max-width: 440px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
4. 跨域配置（后端 - Program.cs）
允许前端 Vue 开发服务器（通常是 http://localhost:5173 或 http://localhost:3000）访问 API。
// 在 Program.cs 中添加 CORS 支持
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(policy =>
{
policy.AllowAnyHeader()
.AllowAnyMethod()
.WithOrigins("http://localhost:5173", "http://localhost:3000"); // Vue 默认端口
});
});
// 在 app.UseHttpsRedirection(); 之前加上：
app.UseCors();
五、部署说明书
🧩 一、环境准备
组件 | 版本要求 | 备注 |
|---|---|---|
操作系统 | Windows / Linux / macOS | 推荐使用 Linux 服务器部署 |
.NET SDK | 8.0 或更高 | 用于运行后端 API |
Node.js | 16.x 或更高 | 用于运行 Vue 前端 |
PostgreSQL | 12 或更高 | 数据库服务 |
IDE（可选） | Visual Studio / VS Code / Rider | 开发工具 |
🛠️ 二、部署步骤
1. 准备数据库（PostgreSQL）
- 安装并运行 PostgreSQL。
- 创建数据库：
CREATE DATABASE login_db;
- 执行建表 SQL（见上文 “数据库设计” 部分）。
2. 配置并运行后端（.NET 8.0）
- 打开项目文件夹
LoginApi。 - 修改
appsettings.json中的 PostgreSQL 连接字符串，确保与你的数据库匹配：
"Host": "localhost",
"Port": 5432,
"Database": "login_db",
"Username": "postgres",
"Password": "你的密码"
运行后端：
dotnet run
- 后端默认监听：
http://localhost:5000（或你配置的端口）
3. 配置并运行前端（Vue 3）
- 打开项目文件夹
login-frontend - 安装依赖：
npm install
启动开发服务器：
npm run dev
- 前端默认地址可能是：
http://localhost:5173或http://localhost:3000
至此，一个完整的带有前后端的登录模块就搞定了。
是不是太方便啦。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
