对于简单的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',
            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.部署:

选择合适的托管服务

配置环境变量

处理安全问题

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/972294.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《RCooper: 一个真实世界的大规模道路边协同感知数据集》学习笔记

paper:2403.10145 GitHub:AIR-THU/DAIR-RCooper: [CVPR2024] Official implementation of "RCooper: A Real-world Large-scale Dataset for Roadside Cooperative Perception" 目录 摘要 1、介绍 2、相关工作 2.1 道路边感知 2.2 协同…

【STM32】DRV8833驱动电机

1.电机如何转动 只需要给电机两个端子加一正一负的极性就会转起来了,但是要注意的是不要将电机两端直接接在5v和gnd之间,这种电机一般要提供几百毫安的电流,而GPIO口只能提供几毫安,所以我们使用一个DRV8833来驱动 DRV8833输入口…

id生成系统和mp条件简化

目录 场景引入: 有哪些生成id的方式? 1.UUID 2.雪花算法方案 3.数据库生成 4.美团Leaf方案 Leaf-segment数据库方案 使用场景: 美团leaf的docker镜像安装 在leaf.properties中配置数据库的信息 创建sl_leaf数据库脚本: 测试&#x…

网络安全推荐的视频教程 网络安全系列

第一章 网络安全概述 1.2.1 网络安全概念P4 网络安全是指网络系统的硬件、软件及其系统中的数据受到保护,不因偶然的或恶意的原因而遭到破坏、更改、泄露,系统连续可靠正常地运行,网络服务不中断。 1.2.3 网络安全的种类P5 (1…

内网下,Ubuntu (24.10) 离线安装docker最新版教程

一般在数据比较敏感的情况下,是无法使用网络的,而对于Ubuntu系统来说,怎么离线安装docker呢? 下面我给大家来讲一下: 采用二进制安装: 1.下载docker离线包 官网下载: Index of linux/static…

基于SpringBoot+Vue的老年人体检管理系统的设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…

AI工具篇:利用DeepSeek+Kimi 辅助生成综述汇报PPT

随着科研和学术报告需求的增加,如何高效地准备一份结构清晰、内容充实的PPT已成为许多研究者的挑战。 传统的PPT制作过程繁琐,需要大量文献收集、数据分析和设计工作,而AI工具能够帮助提升效率,减少重复劳动。 本文将介绍如何使用…

【Spring详解一】Spring整体架构和环境搭建

一、Spring整体架构和环境搭建 1.1 Spring的整体架构 Spring框架是一个分层架构,包含一系列功能要素,被分为大约20个模块 Spring核心容器:包含Core、Bean、Context、Expression Language模块 Core :其他组件的基本核心&#xff…

为什么WP建站更适合于谷歌SEO优化?

在当今数字时代,建立一个网站似乎变得容易,但要构建一个真正能够带来流量和订单的网站却并非易事。特别是在谷歌SEO优化方面,不同的建站程序在SEO支持方面的效果差异显著。对于希望提升搜索引擎表现的用户来说,WordPress无疑是最佳…

Vue 项目中逐步引入 TypeScript 的类型检查

在现有的 Vue 项目中逐步引入 TypeScript 的类型检查 本文源于一道面试题:注:两种问法一个意思哈!! 问题一:“ 老项目Js写的,如何轻量方式享受 ts 类型?” 问题二:“如何 在现有的 …

win10系统上的虚拟机安装麒麟V10系统提示找不到操作系统

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 win10系统上的虚拟机安装麒麟V10系统提示找不到操作系统,报错:Operating System not found 二、原因分析 国产系统,需要注意的点: 需要看你的系统类…

Spring中Bean的四种实例化方法

Bean的四种实例化方法 Bean是Spring核心的概念,另外一个核心的概念是AOP。官网上,Bean的解释是: In Spring, the objects that form the backbone of your application and that are managed by the Spring IoC container are called beans…

聚焦工控物联网网关

一、引言 在工业物联网高速发展的当下,工控物联网网关作为连接工业现场设备与上层管理系统、云平台的关键组件,其兼容性与可扩展性至关重要。工业生产新技术、新设备不断涌现,企业数字化转型需求持续增长,网关的适配与扩展能力直…

李宏毅机器学习笔记:【6.Optimization、Adaptive Learning Rate】

Optimization 1.Adaptive Learning Rate2.不同的参数需要不同的学习率3.Root Mean Square4.RMSProp5.Adam6.learning rate scheduling7.warm up总结 critical point不一定是你在训练一个network时候遇到的最大的障碍。 1.Adaptive Learning Rate 也就是我们要给每个参数不同的…

Redis7——基础篇(三)

前言:此篇文章系本人学习过程中记录下来的笔记,里面难免会有不少欠缺的地方,诚心期待大家多多给予指教。 基础篇: Redis(一)Redis(二) 接上期内容:上期完成了Redis的基本…

[LeetCode]day25 151.翻转字符串里的单词

题目链接 题目链接 给你一个字符串 s ,请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意:输入字符串 s中可能…

Visual Studio Code的下载安装与汉化

1.下载安装 Visual Studio Code的下载安装十分简单,在本电脑的应用商店直接下载安装----注意这是社区版-----一般社区版就足够用了---另外注意更改安装地址 2.下载插件 重启后就是中文版本了

华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南

本文记录 在 华为昇腾 910B(65GB) * 8 上 部署 DeepSeekR1 蒸馏系列模型(14B、32B)全过程与测试结果。 NPU:910B3 (65GB) * 8 (910B 有三个版本 910B1、2、3) 模型:DeepSeek-R1-Distill-Qwen-14B、DeepSeek…

【MySQL排错 】mysql: command not found 数据库安装后无法加载的解决办法

【MySQL排错 】mysql: command not found 数据库安装后无法加载的解决办法 A Solution to Solve Error - mysql: command not found After The Installation of MySQL Community Server By JacksonML 本文简要介绍如何在macOS安装完毕MySQL数据库服务器后,针对无…

Spring-GPT智谱清言AI项目(附源码)

一、项目介绍 本项目是Spring AI第三方调用整合智谱请言(官网是:https://open.bigmodel.cn)的案例,回答响应流式输出显示,这里使用的是免费模型,需要其他模型可以去 https://www.bigmodel.cn/pricing 切换…