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

对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端

news 来源：原创 2025/9/22 5:49:56

1. 使用Fetch API发送HTTP请求（最简单的方式）：

//home.html
// 示例：提交表单数据到后端
const submitForm = async (formData) => {try {const response = await fetch('http://your-backend-url/api/submit', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(formData)});if (!response.ok) {throw new Error('提交失败');}const result = await response.json();alert('提交成功！');} catch (error) {console.error('Error:', error);alert('提交失败，请重试');}
};// 使用示例
document.querySelector('form').addEventListener('submit', (e) => {e.preventDefault();const formData = {name: document.getElementById('name').value,major: document.getElementById('major').value,studentId: document.getElementById('studentId').value,qq: document.getElementById('qq').value,message: document.getElementById('message').value};submitForm(formData);
});

2.简单的后端服务器示例（Node.js + Express）。

//serve.js
const express = require('express');
const cors = require('cors');
const app = express();// 启用CORS和JSON解析
app.use(cors());
app.use(express.json());// 处理表单提交
app.post('/api/submit', (req, res) => {const formData = req.body;// 这里可以添加数据库操作console.log('收到的表单数据:', formData);// 返回响应res.json({success: true,message: '表单提交成功'});
});// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});

3.如果需要数据库支持，可以添加MongoDB：

//serve.js
const mongoose = require('mongoose');// 连接MongoDB
mongoose.connect('mongodb://localhost/309base', {useNewUrlParser: true,useUnifiedTopology: true
});// 定义数据模型
const Application = mongoose.model('Application', {name: String,major: String,studentId: String,qq: String,message: String,submitTime: { type: Date, default: Date.now }
});// 处理表单提交
app.post('/api/submit', async (req, res) => {try {const application = new Application(req.body);await application.save();res.json({success: true,message: '申请已保存'});} catch (error) {res.status(500).json({success: false,message: '保存失败'});}
});

4.部署注意事项：

// 配置文件 config.js
const config = {development: {apiUrl: 'http://localhost:3000',mongoUrl: 'mongodb://localhost/309base'},production: {apiUrl: 'https://your-production-api.com',mongoUrl: process.env.MONGODB_URI}
};// 根据环境选择配置
const env = process.env.NODE_ENV || 'development';
module.exports = config[env];

主要步骤：

1.前端：

使用Fetch API发送请求

处理响应和错误

添加加载状态提示

2.后端：

设置基本的Express服务器

处理CORS问题

连接数据库

处理请求和响应

3.数据库：

选择合适的数据库（如MongoDB）

设计数据模型

处理数据存储和查询

4.部署：

选择合适的托管服务

配置环境变量

处理安全问题

这是一个基本的前后端连接方案，你可以根据需要进行扩展和修改。

对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端

1. 使用Fetch API发送HTTP请求（最简单的方式）： //home.html // 示例：提交表单数据到后端 const submitForm async (formData) > {try {const response await fetch(http://your-backend-url/api/submit, {method: POST,head…...

编程日记 2025/9/22 5:49:56

打印问题总结

问题一： 记一次发票打印模糊问题，后端返回的是pdf 之前实现的效果是将后端返回的pdf转成canvas再转成图片预览问题： 打印效果很模糊解决方式： 就是直接预览pdf 借助pdf的打印和下载即可问题二： 激光打印一般…...

编程日记 2025/9/22 5:49:35

2025蓝桥杯JAVA编程题练习Day4

1.艺术与篮球问题描述小蓝出生在一个艺术与运动并重的家庭中。妈妈是位书法家，她希望小蓝能通过练习书法，继承她的艺术天赋，并练就一手好字。爸爸是一名篮球教练，他希望小蓝能通过篮球锻炼身体，培养运动的激情和…...

编程日记 2025/9/20 19:49:01

github用户名密码登陆失效了

问题： git push突然推代码需要登陆，但是用户名和密码正确输入后，却提示403 git push# Username for https://github.com: **** #Password for https://gyp-programmergithub.com: #remote: Permission to gyp-programmer/my-app.git denie…...

编程日记 2025/9/17 5:33:18

数据结构 day02

3. 线性表 3.1. 顺序表 3.1.3. 顺序表编程实现操作：增删改查 .h 文件 #ifndef __SEQLIST_H__ #define __SEQLIST_H__ #define N 10 typedef struct seqlist {int data[N];int last; //代表数组中最后一个有效元素的下标 } seqlist_t;//1.创建一个空的顺序表 seq…...

编程日记 2025/9/22 5:47:45

前端里的this指向问题

目录 1.代码输出结果 2.代码输出结果 3.代码输出结果 4.代码输出结果 5.代码输出结果 6.代码输出结果 7.代码输出结果 8.代码输出结果 9.代码输出结果 10.代码输出结果 11.代码输出结果 12.代码输出结果 13.代码输出结果 14.代码输出结果总结 1.代码输出结果 f…...

编程日记 2025/9/22 5:47:44

pandas(11 分类数据和数据可视化)

前面内容：pandas(10 日期和Timedelta) 目录一、Python Pandas 分类数据 1.1 pd.Categorical() 1.2 describe() 1.3 获取类别的属性 1.4 分类操作 1.5 分类数据的比较二、Python Pandas 数据可视化 2.1 基础绘图：plot 2.2 条形图 2.3 直方…...

编程日记 2025/9/17 5:27:18

cmake Qt Mingw windows构建

今天教大家怎么在windows构建qt应用使用cmd命令行，而不是一键通过QtCreator一键构建。首先我们用qtcreator创建一个模板程序(PS：记得在安装qt时要悬着mingw套件，如果安装太慢可以换源） 输入以下的命令： mkdir build …...

编程日记 2025/9/17 5:29:48

缓存穿透、缓存击穿、缓存雪崩的区别与解决方案

1. 缓存穿透（Cache Penetration） 定义：大量请求查询数据库中不存在的数据，导致请求绕过缓存直接访问数据库，造成数据库压力过大。场景： 恶意攻击：例如用不存在的用户ID频繁请求。业务误操作…...

编程日记 2025/9/20 12:26:03

【Rust中级教程】1.6. 内存 Pt.4：静态(static)内存与‘static生命周期标注

喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文），对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 1.6.1. 静态(static)内存 static内存实际上是一个统称，它指的是程序编译后的文…...

编程日记 2025/9/19 19:43:40

Python爬虫实战：股票分时数据抓取与存储 (1)

在金融数据分析中，股票分时数据是投资者和分析师的重要资源。它能够帮助我们了解股票在交易日内的价格波动情况，从而为交易决策提供依据。然而，获取这些数据往往需要借助专业的金融数据平台，其成本较高。幸运的是，通过…...

编程日记 2025/9/17 5:29:17

HTML之JavaScript对象

HTML之JavaScript对象 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…...

编程日记 2025/9/19 17:22:33

【第12章：深度学习与伦理、隐私—12.3 深度学习模型的透明性与可解释性提升策略】

凌晨三点的ICU病房，AI辅助诊断系统将一位患者的肺炎误判为普通感冒——当主治医生要求查看诊断依据时，系统只能给出冷冰冰的概率数值。这场惊心动魄的误诊事件，掀开了深度学习可解释性危机的冰山一角。一、模型透明的"第一性原理" 1.1 可解释性的三维度量 ![可…...

编程日记 2025/9/19 0:34:42

SOCKET建立简单的tcp服务端与客户端通信

socket是什么 socket可以使两台机子建立连接，就像连接风扇与电源的插座一样，socket可以使服务端与客户端建立连接，服务端就像供电厂，而客户端就像用电器，而socket就是连接二者的插座。建立简单的连接如果我们想在客…...

编程日记 2025/9/21 1:49:33

最新智能优化算法：阿尔法进化（Alpha Evolution，AE）算法求解23个经典函数测试集，MATLAB代码

一、阿尔法进化算法阿尔法进化（Alpha Evolution，AE）算法是2024年提出的一种新型进化算法，其核心在于通过自适应基向量和随机步长的设计来更新解，从而提高算法的性能。以下是AE算法的主要步骤和特点： 主…...

编程日记 2025/9/20 9:23:35

HTML之JavaScript常见事件

HTML之JavaScript常见事件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&…...

编程日记 2025/9/20 11:37:27

《云原生安全攻防》-- K8s镜像安全：镜像全生命周期安全管理

从攻击者的角度来看，针对容器镜像的软件供应链攻击和镜像投毒等攻击方式，不仅攻击成本低，而且还能带来更高且持久的收益。因此，镜像安全问题变得日益突出。在本节课程中，我们将深入探讨镜像全生命周期的安全管理&…...

编程日记 2025/9/21 18:42:40

【Copilot】Redis SCAN SSCAN

目录 SCAN 命令SSCAN 命令使用示例原理Redis SCAN 和 SSCAN 命令的注意事项及风险注意事项风险以下内容均由Github Copilot生成。 SCAN 和 SSCAN 命令是 Redis 提供的用于增量迭代遍历键或集合元素的命令。它们的主要优点是可以避免一次性返回大量数据，从而减少对 …...

编程日记 2025/9/19 23:15:30

【含开题报告+文档+PPT+源码】基于Spring+Vue的拾光印记婚纱影楼管理系统

开题报告本论文旨在探讨基于Spring和Vue框架的拾光印记婚纱影楼管理系统的设计与实现。该系统集成了用户注册登录、个人资料修改、婚庆资讯浏览、婚庆套餐查看、婚纱拍摄预约、婚纱浏览与租赁、客片查看以及在线客服等多项功能，为用户提供了一站式的婚纱影楼服务体…...

编程日记 2025/9/17 5:27:50

静态页面在安卓端可以正常显示,但是在ios打开这个页面就需要刷新才能显示全图片

这个问题可能有几个原因导致,我来分析一下并给出解决方案: 首要问题是懒加载实现方式的兼容性问题。当前的懒加载实现可能在 iOS 上不够稳定。建议修改图片懒加载的实现方式: // 使用 Intersection Observer API 实现懒加载 function initLazyLoading() {const imageObserver…...

编程日记 2025/9/20 18:06:15

【Qt】QObject类的主要功能

在 Qt 中，QObject 类是所有 Qt 对象的基类，提供了许多基础功能，使得 Qt 的对象系统能够有效地工作。它为其他类提供了核心的机制，比如信号和槽机制、对象树结构、内存管理等。 QObject 类的主要功能： 信号和槽机制&am…...

编程日记 2025/9/21 12:21:42

第 16 天：游戏 UI（UMG）开发，打造主菜单血条！

🎯 目标 ✅ 使用 UMG 创建 UI 并在游戏中显示 ✅ 实现血条（HP Bar）系统，动态显示角色生命值 ✅ 创建主菜单 UI，并添加开始/退出按钮 ✅ 保存当前场景，创建新场景作为主菜单 ✅ 点击 StartGameButton 后&am…...

编程日记 2025/9/22 1:27:59

兔兔答题应用于微信考试、付费考试、社会调查问卷、明星知识问答、员工培训考核、模拟自测、企业面试、试题库等多种场景。

“兔兔答题系统”是一个面向教育、培训和在线测评场景的智能化答题平台（兔兔答题官网地址）。其设计目标是帮助用户高效完成题目练习、考试组织及学习效果分析，通常具备以下核心功能和特色： 一、核心功能题库管理支持多题型录入&…...

编程日记 2025/9/19 2:12:05

【办公类-90-02】】20250215大班周计划四类活动的写法（分散运动、户外游戏、个别化综合）（基础列表采用读取WORD表格单元格数据，非采用切片组合）

背景需求： 做了中班的四类活动安排表，我顺便给大班做一套【办公类-90-01】】20250213中班周计划四类活动的写法（分散运动、户外游戏、个别化（美工室图书吧探索室））-CSDN博客文章浏览阅读874次&#xff0…...

编程日记 2025/9/21 11:25:10

使用 Python 爬虫获取微店快递费用 item_fee API 接口数据

在电商运营中，快递费用是影响商家利润和用户体验的重要因素之一。微店作为国内知名的电商平台，提供了丰富的 API 接口供开发者使用，其中也包括查询商品快递费用的接口。通过调用微店的 item_fee 接口，开发者可以获取指定商品的快递…...

编程日记 2025/9/19 0:32:42

蓝桥杯篇---温度传感器 DS18B20

文章目录前言DS18B201. DS18B20 引脚说明2. 单总线通信协议3. DS18B20 操作流程初始化写操作读操作 4. 示例代码5. 代码说明6. 注意事项总结前言本文简单介绍了IAP15F2K61S2中温度传感器模块DS18B20的使用。 DS18B20 DS18B20 是一款数字温度传感器，采用单总线&…...

编程日记 2025/9/21 10:36:48

NAC网络接入控制三种认证方式802.1X认证、MAC认证和Portal认证

NAC网络接入控制三种认证方式802.1X认证、MAC认证和Portal认证 1.NAC简介2.802.1X认证3. MAC认证4. Portal认证 1.NAC简介 NAC（Network Access Control）称为网络接入控制，通过对接入网络的客户端和用户的认证保证网络的安全，是一…...

编程日记 2025/9/21 7:31:46

字节Trae使用感想(后端)

前言昨天分享了字节哥的Trae从0到1创作模式构建一个vue前端项目，今天又来试试她的后端项目能力。不是我舔，不得不说确实不错。可惜现在曾经没有好好学习，进不了字节。既然进不了字节，那我就用字节哥的产品吧。后面有惊喜…...

编程日记 2025/9/19 16:50:30

蓝桥杯 Java B 组之简单动态规划（爬楼梯、斐波那契数列）

Day 6：简单动态规划（爬楼梯、斐波那契数列） 动态规划（Dynamic Programming，简称 DP）是计算机科学中的一种算法设计思想，用来解决最优解问题，它的核心思想是将大问题分解为小问题&am…...

编程日记 2025/9/18 19:25:09

传统 I/O 和 NIO 的主要区别

在 Java 中，文件读写可以通过传统的 I/O 方式（如 InputStream 和 OutputStream）或 NIO（New I/O）方式（如 FileChannel）来实现。NIO 的 FileChannel 提供了更高效的文件操作方式，尤其是…...

编程日记 2025/9/17 5:27:18

0基础学LabVIEW

对于零基础的朋友来说，学习LabVIEW需要一个科学的学习路径和方法。通过观看优质的B站教程打好基础，再结合实际项目进行实践操作，能够快速提升LabVIEW的应用能力。以下是从入门到进阶的学习建议。一、利用B站入门教程打基础筛选优质教程…...

编程日记 2025/9/20 0:41:36

二〇二四年终总结

写在前面简单总结一下告诉自己，曾经活着不必太纠结于当下，也不必太忧虑未来，当你经历过一些事情的时候，眼前的风景已经和从前不一样了。——村上春树原本应该 24 年年中的时候写 23 年年终的总结，但是一直拖着&…...

编程日记 2025/9/21 2:19:34

设计模式：状态模式

状态机有3个要素：状态，事件，动作。假如一个对象有3个状态:S1、S2、S3。影响状态的事件有3个：E1、E2、E3。每个状态下收到对应事件的时候，对象的动作为AXY。那么该对象的状态机就可以用如下表格来表示。S1收到事件E1的…...

编程日记 2025/9/16 7:56:48

SQLite Select 语句详解

SQLite Select 语句详解 SQLite 是一个轻量级的数据库管理系统，以其简洁的设计和高效的性能被广泛应用于各种场景。在 SQLite 中，SELECT 语句是用于查询数据库中的数据的命令。本文将详细介绍 SQLite 的 SELECT 语句，包括其基本语法、常用功…...

编程日记 2025/9/21 10:03:30

【深度学习】计算机视觉（CV）-目标检测-Faster R-CNN —— 高精度目标检测算法

1.什么是 Faster R-CNN？ Faster R-CNN（Region-based Convolutional Neural Network） 是目标检测（Object Detection） 领域的一种双阶段（Two-Stage） 深度学习方法，由 Ross Girshick…...

编程日记 2025/9/18 7:33:19

静默安装OGG for MySQL微服务版本，高效开展数据同步和迁移

一、背景本文从Oracle GoldenGate微服务版的概念和组件介绍开始，从零介绍了怎么开始安装GoldenGate 21c for Oracle微服务版本的软件及部署。当然了，微服务版除新功能外包含传统版所有的功能。二、安装部署 （一）下载OGG for …...

编程日记 2025/9/19 14:58:21

排序算法衍生问题

排序算法衍生问题引言排序算法是计算机科学中的基本问题之一，广泛应用于各种实际场景中。尽管有多种排序算法可供选择，但每种算法都有其特定的优势和局限性。本文将探讨排序算法中的一些衍生问题，包括算法效率、稳定性、内存占用等方面&a…...

编程日记 2025/9/20 12:24:06

DeepSeek自动化写作软件

DeepSeek写作软件的三大核心功能对于内容创作者来说，写作不仅是表达思想的过程，更是一项需要投入大量时间和精力的任务。面对日益增长的内容需求，写作效率低下、内容质量不高等问题，常常让创作者感到焦虑。而 DeepSeek 写作软件…...

编程日记 2025/9/17 5:31:20

Python数据可视化 - Matplotlib教程

文章目录前言一、Matplotlib简介及安装1. Matplotlib简介2. 安装Matplotlib 二、Matplotlib Pyplot1. Pyplot介绍2. Pyplot中方法介绍2.1 创建和管理图形2.2 绘制图形2.3 设置图形属性2.4 保存和展示三、Matplotlib绘图标记1. 介绍2. 基本用法3. 标记大小与颜色4. 标记样式列…...

编程日记 2025/9/19 21:28:14

集成测试总结文档

1. 集成测试的定义集成测试（Integration Testing）是在单元测试之后，将多个独立的软件模块或组件组合在一起进行测试的过程，目的是验证这些模块之间的接口、数据传递、协作逻辑是否符合设计要求，并发现因集成引发的缺…...

编程日记 2025/9/19 15:24:41

Retrieval-Augmented Generation for LargeLanguage Models: A Survey

标题：Retrieval-Augmented Generation for Large Language Models: A Survey 作者：Yunfan Gaoa , Yun Xiongb , Xinyu Gaob , Kangxiang Jiab , Jinliu Panb , Yuxi Bic , Yi Daia , Jiawei Suna , Meng Wangc , and Haofen Wang 1. By referencing ext…...

编程日记 2025/9/18 7:52:41

Day3 25/2/16 SUN

【一周刷爆LeetCode，算法大神左神（左程云）耗时100天打造算法与数据结构基础到高级全家桶教程，直击BTAJ等一线大厂必问算法面试题真题详解（马士兵）】https://www.bilibili.com/video/BV13g41157hK?p4&v…...

编程日记 2025/9/21 11:12:28

使用maven-archetype制作项目脚手架

使用maven-archetype制作项目脚手架 maven plugin依赖 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-archetype-plugin</artifactId><version>3.0.1</version> </plugin>导出模板在模板项目执行…...

编程日记 2025/9/18 18:11:14

Spring AOP源码解析

前言 Spring AOP（面向切面编程）是 Spring 框架的核心模块之一，其底层通过动态代理和字节码增强实现。以下是 Spring AOP 的源码解析，涵盖核心流程、关键类及实际应用场。一、Spring AOP 的核心组件核心接口 Joinpoint&am…...

编程日记 2025/9/21 23:31:36

1.buuctf [BJDCTF2020]EasySearch

进入题目页面如下尝试输入弱口令密码都显示错误看题目是search，扫描一下根目录试试 /index.php.swp 得到源码进行一下代码审计 <?php//开启输出缓冲，将所有的输出内容先保存到缓冲区，而不是直接输出到浏览器。ob_start();//定义一个…...

编程日记 2025/9/19 3:43:03

小米 R3G 路由器刷机教程（Pandavan）

小米 R3G 路由器刷机教程（Pandavan） 一、前言小米 R3G 路由器以其高性价比和稳定的性能备受用户青睐。然而，原厂固件的功能相对有限，难以满足高级用户的个性化需求。刷机不仅可以解锁路由器的潜能，还能通过第三方固…...

编程日记 2025/9/21 14:17:40

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析③】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase03 作者：车端域控测试工程师更新日期：2025年02月15日关键词：UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-003测试用例用例ID测试场景验证要点参考条款预期…...

编程日记 2025/9/21 13:29:07

deepseek与gpt，核心原理对比

DeepSeek与GPT作为AI大模型，在自然语言处理等领域展现出强大的能力，它们的核心原理对比主要体现在模型架构、训练策略、资源效率以及应用场景优化等方面。一、模型架构 DeepSeek 混合专家（MoE）框架：DeepSeek采用了混合专家框架，其内部包含多个“专家”子模块，每个子模…...

编程日记 2025/9/11 3:39:55

第1章大型互联网公司的基础架构——1.1 单机房的内部架构

所谓的应用后台就是指机房。机房架构是一个庞大的工程，你可能听说过很多大型互联网公司曾在各种技术峰会上介绍它们的“三地五中心”多机房，甚至是全球异地多活机房等，这些“高大上”的话题讨论的都是机房架构的内容。机房最简单的形式是单机…...

编程日记 2025/9/19 3:25:04

相关文章：