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

前后端分离项目（Web篇）

news 2025/8/23 6:49:34

​

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

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

  1. 后端先写：先创建后端处理程序（ashx）来定义API端点或处理特定请求，然后编写页面（pages）来调用这些后端接口，最后添加JavaScript（js）前端脚本来增强交互。
  2. 前端先写：先设计页面结构（pages），然后编写前端脚本JavaScript来（js）处理用户交互，再根据需要添加后端处理程序（ashx）来支持前端功能。
  3. 并行开发：前后端同时开发，通过接口文档进行协作，可能同时创建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"]。

  

​

http://www.dtcms.com/a/344195.html

相关文章：

  • BlockingQueue 是什么？
  • MySQL连接原理深度解析：从算法到源码的全链路优化
  • 微信扫码登陆 —— 接收消息
  • 关于日本服务器的三种线路讲解
  • 【Day01】堆与字符串处理算法详解
  • SHA 系列算法教程
  • C++ STL 中算法与具体数据结构分离的原理
  • Apache HTTP Server：深入探索Web世界的磐石基石！！！
  • SSM从入门到实战：2.5 SQL映射文件与动态SQL
  • C#中的LOCK
  • 关于 WebDriver Manager (自动管理浏览器驱动)
  • 第二阶段Winform-4:MDI窗口，布局控件，分页
  • 3.4 缩略词抽取
  • 企业级 AI 智能体安全落地指南：从攻击面分析到纵深防御体系构建
  • FileCodeBox 文件快递柜 一键部署
  • 获取后台返回的错误码
  • 如何使用命令行将DOCX文档转换为PDF格式?
  • Linux应用软件编程---网络编程1（目的、网络协议、网络配置、UDP编程流程）
  • Matplotlib 可视化大师系列（八）：综合篇 - 在一张图中组合多种图表类型
  • 2.4G和5G位图说明列表，0xff也只是1-8号信道而已
  • QT QImage 判断图像无效
  • 高通平台WIFI学习-- 基于高通基线如何替换移植英飞凌WIFI芯片代码
  • mysql编程（简单了解）
  • 【Android】include复用布局 在xml中静态添加Fragment
  • 计数组合学7.20（平面分拆与RSK算法)
  • [测试技术] 接口测试中如何高效开展幂等性测试
  • pthon实现bilibili缓存视频音频分离
  • Redis内存碎片深度解析：成因、检测与治理实战指南
  • K8s存储类(StorageClass)设计与Ceph集成实战
  • 为什么应用会突然耗尽所有数据库连接