当前位置：首页 > news >正文

c#结合vue设计表单，实现前后端结合

news 2026/3/27 1:36:36

C# 的后端能力与 Vue.js 的前端交互性结合在一起。要实现这个目标，我们需要构建一个ASP.NET Core Web API 后端 来处理业务逻辑和数据持久化，以及一个Vue.js 前端 来渲染用户界面和处理用户交互。

下面是详细的步骤指南和代码示例。

架构概览

我们将采用前后端分离的架构：

后端 (ASP.NET Core Web API):
- 提供一个 RESTful API 端点（例如POST /api/form-submissions）。
- 负责接收 Vue 发送的表单数据（JSON 格式）。
- 执行业务逻辑验证（服务器端验证）。
- 将数据保存到数据库（例如 SQL Server, SQLite）。
- 返回适当的 HTTP 响应（成功或失败）。
前端 (Vue.js 3 with Composition API):
- 创建一个美观的表单组件，包含各种输入字段（文本框、下拉框、单选框等）。
- 使用fetch或axios库向后端 API 发送 POST 请求。
- 处理加载状态和响应，给用户反馈（成功消息或错误提示）。
- 使用响应式数据绑定来实时更新表单状态。

第一步：创建后端 (ASP.NET Core Web API)

1. 创建项目

打开终端或命令提示符，执行以下命令：

# 创建新的 ASP.NET Core Web API 项目 dotnet new webapi -n FormBackend # 进入项目目录 cd FormBackend

2. 创建表单模型和数据传输对象 (DTO)

在项目中创建一个Models文件夹，并在其中创建两个类：FormSubmission.cs(用于数据库实体) 和FormSubmissionDto.cs(用于 API 数据传输)。

Models/FormSubmission.cs

namespace FormBackend.Models { public class FormSubmission { public int Id { get; set; } public string? Name { get; set; } public string? Email { get; set; } public string? Department { get; set; } public string? Message { get; set; } public DateTime SubmissionDate { get; set; } = DateTime.UtcNow; } }

Models/FormSubmissionDto.cs

using System.ComponentModel.DataAnnotations; namespace FormBackend.Models { // DTO 用于接收来自前端的请求数据 public class FormSubmissionDto { [Required(ErrorMessage = "姓名是必填项")] [StringLength(50, ErrorMessage = "姓名长度不能超过50个字符")] public string? Name { get; set; } [Required(ErrorMessage = "邮箱是必填项")] [EmailAddress(ErrorMessage = "请输入有效的邮箱地址")] public string? Email { get; set; } [Required(ErrorMessage = "部门是必填项")] public string? Department { get; set; } [StringLength(500, ErrorMessage = "留言内容长度不能超过500个字符")] public string? Message { get; set; } } }