前后端分离项目（Web篇）

时央123456

已于 2025-08-22 16:23:44 修改

阅读量635

点赞数 19

CC 4.0 BY-SA版权

分类专栏：软件系统学习文章标签：前端 c# web

于 2025-08-22 11:13:13 首次发布

本文链接：https://blog.csdn.net/i2784300313/article/details/150554456

软件系统学习专栏收录该内容

5 篇文章

订阅专栏

Web开发中，一般含有ashx，js和pages等文件夹。ashx文件是ASP.NET的HTTP处理程序，用于处理后端逻辑，如处理请求、生成动态内容等。js文件是前端脚本，负责客户端交互。而pages文件夹通常存放视图文件，如ASPX页面或Razor Pages。

在典型的开发流程中，通常会有以下几种情况：

后端先写：先创建后端处理程序（ashx）来定义API端点或处理特定请求，然后编写页面（pages）来调用这些后端接口，最后添加JavaScript（js）前端脚本来增强交互。
前端先写：先设计页面结构（pages），然后编写前端脚本JavaScript来（js）处理用户交互，再根据需要添加后端处理程序（ashx）来支持前端功能。
并行开发：前后端同时开发，通过接口文档进行协作，可能同时创建ashx后端处理程序和js前端脚本文件，再整合到页面中。

一、Pages页面（Default.aspx）

格式	技术栈	用途	示例
.aspx	ASP.NET Web Forms	传统后端页面，结合服务器控件（常用）	<asp:Content ID="lblMessage" runat="server" />
.cshtml	ASP.NET Razor Pages	现代无控制器页面，简化开发流程	@Model.Message
.jsx / .vue	React/Vue	前端组件化开发，支持模块化	<template>...</template>
.html	静态网站	简单静态页面或前端原型	<h1>Hello World</h1>
.md	静态站点生成器（Jekyll）	内容驱动的网站（如博客、文档）	# Title
.php	PHP	动态 Web 内容（如 WordPress）	<?php echo "Hello"; ?>
.hml	HarmonyOS	鸿蒙应用页面，结合 JS 和 CSS	<text>Hello</text>

pages 文件夹中的页面格式根据技术栈和项目需求有所不同，核心目标都是组织和管理 Web 应用的用户界面。

特殊页面格式

其中有比较大的区别的是.aspx 文件本质上属于后端页面格式，在服务器端执行，包含的 <asp:> 控件（如 <asp:Label>、<asp:TextBox>）由 ASP.NET 引擎解析，生成对应的 HTML 标记后发送到客户端，其设计融合了前端标记和后端逻辑，是ASP.NET Web Forms 框架的核心特点。

.aspx文件开头必须规定使用编程语言

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="（文件名）Default..aspx.cs" %>

aspx

<asp:Label ID="lblTime" runat="server"></asp:Label>

<asp:Content ID="Content" ContentPlaceHolderID="head" runat="server"> <script type="text/javascript" src="/js/echarts.js"></script>

服务器会将其转换为：

html

<span id="lblTime">当前时间：2025-08-20 10:00:00</span>

<head> <script type="text/javascript" src="/js/echarts.js"></script> </head>

1.代码隐藏文件（Default.aspx.cs）

.aspx页面关联着代码隐藏文件（Default.aspx.cs）,其用来处理服务器端事件，按钮点击，页面加载等。

csharp

// Default.aspx.cs
protected void Page_Load(object sender, EventArgs e) {
lblTime.Text = "当前时间：" + DateTime.Now.ToString();
}

2.前端标记

aspx

<html>     <div data-options="region:'center'">
<head>    <div class="easyui-layout" style="height: 100%;">
<style>   <div data-options="region:'west',split:true" style="width: 70%;">
.highlight { color: red; } <div id="toolbar" style="display: none;">
</style>  <a href="javascript:void(0);" style="display: none;" id="btnAdd">新增</a>
</head>    </div>
<body>    <table id="headList">
<button onclick="showAlert()">点击我</button>  <thead>
<script>    <tr>
function showAlert() {     <th data-options="field:'qrcode',width:50,align:'center',formatter:fmtUserRole">角色</th>
alert('按钮被点击！');    </tr>
}                  </thead>
</script>             </table>
</body>               </div>
</html>

.aspx 文件直接包含 HTML、CSS 和 JavaScript 代码，用于定义页面结构和客户端交互逻辑。
同时，服务器将 .aspx 中的服务器控件转换为纯 HTML 后，客户端浏览器接收到的仍是标准的 HTML/CSS/JS 文件，与纯前端页面无异。

3.与纯前端页面（.html）的核心区别

特性	.aspx（ASP.NET Web Forms）	.html（纯前端）
执行环境	服务器端执行，生成动态 HTML	客户端直接解析，静态内容
控件类型	服务器控件（<asp:Label>、<asp:GridView>）	纯 HTML 标签（<div>、<table>）
事件处理	服务器端事件（如 Button_Click）	客户端事件（如 onclick）
状态管理	自动维护视图状态（ViewState）	无内置状态管理，需手动实现
典型场景	企业级应用、需要后端逻辑的页面	静态网站、前端原型

4.与后端处理程序（.ashx）的核心区别

特性	.aspx 文件	.ashx 文件
主要作用	构建 Web 页面（用户界面）	处理 HTTP 请求（后端逻辑）
典型场景	显示数据、表单提交、页面跳转	生成动态内容（如图片、JSON）、处理 AJAX 请求

二、前端脚本开发（js/Default.js）

JavaScript（.js）文件是实现网页交互逻辑、数据处理和动态效果的核心文件，主要功能如下：

1.网页交互逻辑

处理按钮点击、表单提交、鼠标移动、键盘输入等事件。例如，点击 “新增” 按钮弹出表单、输入内容时实时验证格式。根据条件切换元素的显示状态（控制工具栏或表单的display属性显示 / 隐藏）。在单页应用（SPA）中，通过 JS 控制页面内容切换，无需重新加载整个页面。

2.数据处理

通过XMLHttpRequest或fetch等 API 与后端服务器通信，获取数据（如加载 IP 列表）、提交表单数据（如保存用户信息）。对后端返回的数据进行处理（gridFormatterDate函数格式化日期）、验证数据合法性（如检查 IP 地址格式）。使用localStorage、sessionStorage存储临时数据（如用户登录状态、表单草稿）。

3.实现动态效果

通过 JS 创建、删除或修改 HTML 元素（如表格行、表单输入框），实现数据的动态渲染（如 IP 列表的动态加载）。动态修改元素的 CSS 样式（如改变按钮颜色、调整表格列宽），实现交互反馈（如点击按钮时的高亮效果）。使用了 jQuery、EasyUI、Vue 等框架 / 库，JS 文件会负责初始化框架组件（List可能通过 JS 初始化为数据表格组件）、配置组件参数（如列宽、数据字段映射）。扩展框架功能：自定义框架的格式化函数（如gridFormatterDate）、事件处理函数（如按钮点击后的逻辑）。

4.封装函数

除此之外，js文件还可以封装可复用的工具函数：如日期格式化、IP 地址验证、字符串处理等，供整个项目调用。维护全局变量（用户权限、当前页面状态），控制功能的可用性（根据权限显示 / 隐藏 “删除” 按钮）。

javascript


	// 表单验证函数,根据参数ID获取输入值

	function validateForm() {

	const username = document.getElementById('txtUsername').value.trim();

	const email = document.getElementById('txtEmail').value.trim();

	//初始化表格，加载数据

	$('#List').datagrid('loadData', testData);

	$('#List').datagrid({

	title: '信息',

	pagination: true,

	pageSize: 4,

	pageList: [4, 8, 12],

	singleSelect: true,

	nowrap: true,

	fitColumns: true,

	fit: true,

	toolbar: '#Toolbar',

	onSelect: onSelectHandle,

	onLoadSuccess: onLoadSuccessHandle

	});*/

	//验证信息正确性

	if (!username || !email) {

	showMessage('请填写完整信息', 'error');

	return false;

	}

	// 按需发送数据到后端

	function sendToServer(data) {

	fetch('handlers/UserHandler.ashx', {

	method: 'POST',

	headers: {

	'Content-Type': 'application/json'

	},

	body: JSON.stringify(data)

	})

	.then(response => response.json())

	.then(result => {

	if (result.success) {

	showMessage('注册成功！', 'success');

	} else {

	showMessage(result.message, 'error');

	}

	})

	.catch(error => {

	showMessage('服务器错误', 'error');

	});

	}

	//从网址（后端接口），加载List表单数据

	function loadList(user) {

	$('#List').datagrid('options').url = '/ashx/test/UserAjax.ashx?a=21'

	$('#List').datagrid('load', {

	user: user,

	  });

	}

	// 显示提示信息

	function showMessage(msg, type) {

	const panel = document.getElementById('resultPanel');

	panel.innerHTML = msg;

	panel.className = `alert ${type}`;

	panel.style.display = 'block';

	}

	


	// 判断是否需要后端验证

	function needsServerValidation() {

	// 根据需求添加判断条件

	return true; // 默认需要后端验证

	}

三、后端处理程序（Default.ashx）

.ashx文件是ASP.NET框架中的一般处理程序，接收前端的 HTTP 请求并返回数据（非完整的 HTML 页面，即不是直接跳转到新网址页面，而是直接在该网址页面，处理数据传输，如组件切换，小页面出现等），具体作用如下：

1.接收前端请求

处理来自页面（ JS 通过ajax发送的请求）的参数（查询字符串、表单数据）。

2.数据处理

在后端执行具体逻辑，比如查询数据库、处理业务数据、调用其他服务和验证信息正确性等。

3.返回结果

将处理后的结果（ JSON、XML、文本或二进制数据）返回给前端，供页面动态渲染或逻辑处理。

ashx


	// 处理参数请求

	public void ProcessRequest(HttpContext context)

	{

	context.Response.ContentType = "text/plain";

	try

	{

	username = context.Session["username"].ToString();

	email = context.Session["email"].ToString();

	string ajax = context.Request["a"];

	switch (ajax)

	{

	case "1":

	msg = CheckInitPwd(context);

	break;

	}

	//返回结果

	private string QueryList(HttpContext context){

	string username = context.Request["username"] ?? "";

	int page = Convert.ToInt32(context.Request["page"] ?? "1");

	TpUserBll bll = new TpUserBll();

	Tuple<int, string> dt = bll.Query(username, page);

	return "{\"total\":" + dt.Item1 + ",\"rows\":" + StringPlus.ToJson(dt.Item2) + "}";

	}

四、补充说明(HttpContext context)

在ASP.NET中，HttpContext context 是处理HTTP请求的核心参数，HttpContext 是ASP.NET框架提供的类，封装了当前HTTP请求的所有上下文信息，出现在方法中。

csharp


	public void ProcessRequest(HttpContext context)

	{

	// 通过context访问请求信息

	string userAgent = context.Request.UserAgent;

	// 设置响应内容

	context.Response.ContentType = "text/plain";

	context.Response.Write("Hello World");

	// 管理会话状态

	context.Session["UserID"] = 123;

	}

Request：获取客户端请求信息，表单数据和文件上传，context.Request.QueryString["email"]， context.Request.Form["username"]和context.Request.Files。
Response：控制服务器响应，设置状态码context.Response.StatusCode = 404，重定向context.Response.Redirect("/login")。
Session：维护用户会话状态context.Session["Theme"]。
Server：服务器工具方法context.Server.HtmlEncode(userInput)。
HTML编码：获取html编码context.Server.HtmlEncode(input)。
Items：请求级别的临时存储context.Items["ProcessedData"]。