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

新手学习：网页前端、后端、服务器Tomcat和数据库的基本介绍

news 2026/2/10 16:51:39

首先一点，不管是那个框架开发的网页前端，最后都需要Build,构建完毕以后都是原始的HTML + CSS + JS 三样文件！

网页前端

目录结构

在开始开发网站之前，首先需要了解如何组织文件。一个简单的网页项目通常会有以下几个文件夹和文件：

/project/assets         # 存放图片、字体、样式文件（CSS）/css            # 存放CSS文件，CSS定义网页的样式/js             # 存放JavaScript文件，JS使网页具备互动功能/images         # 存放图片文件/index.html     # 网站首页

每个文件夹的作用很明确，index.html 是网站的首页，css 用来定义网页的外观，js 用来增加网页的互动性，images 存放网页需要的图片。

什么语言？

在网页前端开发中，主要有三种编程语言：HTML、CSS和JavaScript。

HTML（超文本标记语言）

HTML 是网页的基础，用来定义网页的结构。它通过标签（例如<h1>、<p>）来组织页面的内容。

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网站</title>
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是一个用HTML编写的简单网页。</p>
</body>
</html>

解释：

<html>：这是一个HTML文档的起始标签。
<head>：包含网页的元数据，如标题、字符集等。
<body>：包含网页的主要内容。
<h1>：网页的标题（最大标题）。
<p>：段落标签，用来表示一段文本。

CSS（层叠样式表）

CSS 用来控制网页的外观，例如颜色、字体、布局等。

示例：

body {font-family: Arial, sans-serif; /* 设置网页字体 */background-color: #f0f0f0; /* 设置背景颜色 */
}h1 {color: #333333; /* 设置标题颜色 */text-align: center; /* 将标题居中 */
}

JavaScript（JS）

JavaScript 用来让网页具有动态效果和互动功能，例如按钮点击、数据验证等。

示例：

<button onclick="showMessage()">点击我</button>
<script>function showMessage() {alert("你点击了按钮！");}
</script>

解释：

onclick：当按钮被点击时，会执行 showMessage 函数。
alert()：弹出一个提示框，显示消息。

有哪些框架？

前端框架是一些可以帮助我们更快开发网页的工具，它们封装了一些常用功能，让我们不需要从零开始编写代码。

React：由Facebook开发，用于构建用户界面的JavaScript库。它帮助开发者高效构建动态的单页面应用。
Vue.js：一个轻量级的JavaScript框架，适合初学者，结构清晰易上手。
Angular：由Google开发，适合大型项目，提供了大量的功能来构建复杂的前端应用。

浏览器引擎：谷歌V8

浏览器引擎是浏览器用来解析JavaScript代码的工具。V8 是谷歌Chrome浏览器使用的JavaScript引擎，它将JavaScript代码编译成机器语言，使得浏览器能更快速地执行。

网页后端

作用

网页后端是指负责处理业务逻辑和数据的部分。它运行在服务器上，接收来自前端的请求，处理数据后再将结果返回给前端。它的核心任务是确保前端和数据库之间的数据交换顺畅。

后端开发的目录结构

后端开发的目录结构和前端类似，通常包含以下内容：

/project/src             # 存放源代码/controllers     # 处理客户端请求的代码/models          # 与数据库交互的代码（如存储用户信息）/views           # 存放前端页面模板（如果是MVC架构）/routes          # 定义API路由/public          # 存放静态资源（如图片）

如何和前端通信？

前后端通过 API（应用程序编程接口）进行通信。最常见的通信方式是使用 HTTP协议，其中前端通过 GET、POST 请求数据，后端返回数据。

例如，前端可以通过AJAX向后端发送请求：

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

开发语言

常见的后端开发语言有：

Node.js（JavaScript）: 使用 JavaScript 编写后端代码。
Python（Django, Flask框架）: Python是一个简单易学的语言，Django是一个完整的Web框架，Flask适用于小型应用。
Java（Spring框架）: Java是一种强类型的编程语言，适合大规模企业应用。

有哪些框架？

后端框架可以帮助开发者快速搭建应用结构，以下是常见的几种：

Express（Node.js）：轻量级的框架，适合快速开发REST API。
Django（Python）：全功能框架，内置很多常用工具，适合快速开发Web应用。
Spring Boot（Java）：简化Java开发的大型框架，适合构建企业级应用。

服务器 Tomcat

如何运行静态前端

Tomcat 是一个 Web 服务器，专门用来运行 Java Web 应用。虽然它主要运行 Java 应用，但你也可以用它来托管静态资源（HTML、CSS、JS）。

将静态前端文件（例如 index.html）放到 Tomcat 的 webapps 目录下。
启动 Tomcat，访问 http://localhost:8080/index.html 即可查看网页。

如何运行后端+前端

如果你的后端是用 Java 编写的（例如 Spring Boot），你可以将前端的 HTML、CSS、JS 文件和后端代码一起部署在 Tomcat 上。

将前端文件放在 resources/static 目录下。
后端代码可以放在 webapps 下，Tomcat 会自动处理请求并返回数据。

数据库

数据库用来存储网站的数据，如用户信息、商品详情等。数据库分为关系型数据库和非关系型数据库。

关系型数据库

关系型数据库使用表格来存储数据。常见的关系型数据库有 MySQL 和 PostgreSQL。

示例：

CREATE TABLE users (id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(100),email VARCHAR(100)
);

这个SQL语句创建了一个名为 users 的表，存储用户的 id、name 和 email 信息。

非关系型数据库

非关系型数据库使用更灵活的存储结构，如键值对（Redis）或文档（MongoDB）。

示例：

{"name": "Alice","email": "alice@example.com"
}

这个JSON格式的文档适用于像MongoDB这样的数据库。

这篇博客框架为完全的小白读者提供了从前端到后端，再到服务器和数据库的全景图，并且每个概念都配有详细解释和实际代码示例。通过逐步实践，读者将能够理解并掌握基本的Web开发流程。

新手学习：网页前端、后端、服务器Tomcat和数据库的基本介绍

首先一点，不管是那个框架开发的网页前端，最后都需要Build,构建完毕以后都是原始的HTML CSS JS 三样文件！ 网页前端目录结构在开始开发网站之前，首先需要了解如何组织文件。一个简单的网页项目通常会有以下几个文件夹和文件&…...

编程日记 2024/12/9 18:31:33

机器学习贝叶斯模型原理

一、引言在机器学习与数据分析的广袤天地中，贝叶斯模型犹如一颗璀璨的明星，闪耀着独特的光芒，为众多领域的分类、预测等任务提供了强大的理论支撑与实用解法。然而，对于许多初涉此领域的小伙伴而言，贝叶斯模型背后的…...

编程日记 2024/12/9 18:24:25

【C++】实现100以内素数的求解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯代码概览💯代码结构与逻辑分析1. 包含的头文件和命名空间2. 素数判断函数 isPrime功能输入与输出核心逻辑数学背景 3. 主函数 main功能核心逻辑输出示例 &#…...

编程日记 2024/12/9 18:23:23

Python 浏览器自动化新利器：DrissionPage，让网页操作更简单！

Python 浏览器自动化新利器：DrissionPage，让网页操作更简单！ 文章目录 Python 浏览器自动化新利器：DrissionPage，让网页操作更简单！🚀 引言🌟 DrissionPage简介🛠️ 三大…...

编程日记 2024/12/9 18:19:17

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包枚举文章目录枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型在Rust编程语言中，枚举（enum…...

编程日记 2024/12/9 18:16:13

Postgresql 格式转换笔记整理

1、数据类型有哪些 1.1 数值类型 DECIMAL/NUMERIC 使用方法 DECIMAL是PostgreSQL中的一种数值数据类型，用于存储固定精度和小数位数的数值。DECIMAL的精度是由用户指定的，可以存储任何位数的数值，而小数位数则由用户自行定义。DECIMAL类型的…...

编程日记 2024/12/9 18:15:11

AI开发：卷积神经网络CNN原理初识，简易例程 - 机器学习

一、卷积神经网络是什么 （1）印象今天说的CNN，并不是我们熟知的美国有线电视新闻网。那什么是CNN呢？ Convolutional Neural Networks, CNN）简单来说，就是用一个筛子来筛面粉的。筛子就是卷积核&…...

编程日记 2024/12/9 18:12:08

详细介绍vue的递归组件（重要）

递归组件在 Vue 中是一个非常强大的概念，尤其在渲染层级结构（如树形结构、嵌套列表、评论系统等）时，能够极大地简化代码。什么是递归组件？ 递归组件就是一个组件在其模板中引用自身。这种做法通常用于渲染树形结构或…...

编程日记 2024/12/9 18:11:07

【单片机基础知识】基础知识（CortexM系列、STM32系统框架、存储器映射、寄存器映射）

1. CortexM系列介绍 ARM官方资料： 📎Arm Cortex-M4 Processor Datasheet.pdf📎Arm-Cortex-M7-Processor-Datasheet.pdf📎Arm Cortex-M Comparison Table_v3.pdf📎Arm Cortex-M3 Processor Datasheet.pdf 课程资料&a…...

编程日记 2024/12/9 18:09:04

yolov5导出命令

python export.py --weights yolov5s.pt --img-size 640 --batch-size 1 --device cpu --include onnx 关闭动态输入，cpu导出检测onnx模型能否加载成功指令： python detect.py --weights yolov5s.onnx --dnn 终端调用detect.py检测图片命令&…...

编程日记 2024/12/9 18:05:58

RabbitMQ的常用术语介绍

出版商 “出版商”一词在不同的上下文中有不同的含义。一般来说，在消息传递中发布者（也称为“生成者”）是应用程序（或应用程序实例） 发布 （生成） 消息。同一应用程序也可以使用消息因此同时也…...

编程日记 2024/12/9 18:04:56

Docker魔法：用docker run -p轻松开通容器服务大门

前言 “容器”与“虚拟化”作为现代软件开发和运维中的关键概念，已经广泛应用于各个技术领域。然而，在使用 Docker 部署应用时，常常会遇到这样的问题：容器正常运行，却无法让外界访问其内部服务？即使容器内的应用顺利启动，外部无法通过浏览器或 API 进行连接。此时，doc…...

编程日记 2024/12/9 17:59:49

【后端面试总结】Redis过期删除策略

Redis会将每个设置了过期时间的key放入一个独立的字典中，以后会定时遍历这个字典来删除到期的key。除了定时遍历之外，它还会使用惰性策略来删除过期的key。所谓惰性策略就是在客户端访问这个key的时候，Redis对key的过期时间进行检查&#xff…...

编程日记 2024/12/9 17:58:45

数字图像处理（15）：图像平移

（1）图像平移的基本原理：计算每个像素点的移动向量，并将这些像素按照指定的方向和距离进行移动。 （2）平移向量包括水平和垂直分量，可以表示为（dx，dy）&#xff…...

编程日记 2024/12/9 17:56:41

高级java每日一道面试题-2024年12月08日-JVM篇-什么是类加载器?

如果有遗漏,评论区告诉我进行补充面试官: 什么是类加载器? 我回答: 在Java高级面试中，类加载器（ClassLoader）是一个重要的概念，它涉及到Java类的加载和初始化机制。以下是对类加载器的详细解释： 定义与作用类加…...

编程日记 2024/12/9 17:53:37

JAVA子类的无参构造器中第一行的super

在 Java 中，子类的构造器是否需要显式调用 super 取决于父类（超类）的构造器。如果父类有一个无参构造器： 如果父类有一个无参构造器，那么子类的构造器可以不显式调用 super。在这种情况下，如果子类构造器的…...

编程日记 2024/12/9 17:51:35

mysql程序介绍,选项介绍(常用选项,指定选项的方式,特性),命令介绍(查看,部分命令),从sql文件执行sql语句的两种方法

目录 mysql程序介绍选项介绍常用选项指定选项的方式编辑配置文件环境变量选项特性指定选项选项名选项值命令介绍查看客户端命令 tee/notee prompt source system help contents 从.sql文件执行sql语句介绍方式 source 从外部直接导入…...

编程日记 2024/12/9 17:48:31

Unity教程（十九）战斗系统受击反馈

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程（零）Unity和VS的使用相关内容 Unity教程（一）开始学习状态机 Unity教程（二）角色移动的实现 Unity教程（三）角色跳跃的实现 Unity教程&…...

编程日记 2024/12/9 17:47:30

lanqiaoOJ 3744：小蓝的智慧拼图购物 ← pair+优先队列

【题目来源】https://www.lanqiao.cn/problems/3744/learning/【题目描述】在小蓝的生日那天，他得到了一个由神秘人赠送的拼图游戏，每个拼图都有其特定的价值和相应的优惠券。小蓝决定要买下所有的拼图，但他希望能尽可能地节省花费。小蓝手中…...

编程日记 2024/12/9 17:44:25

Spring Boot教程之二十一：文件处理

Spring Boot – 文件处理 Spring Boot 是一种流行的、基于 Spring 的开源框架，用于开发强大的 Web 应用程序和微服务。由于它建立在 Spring 框架之上，因此它不仅具有 Spring 的所有功能，而且还包括某些特殊功能，例如自动配置、健康…...

编程日记 2024/12/9 17:29:06

云计算——弹性云计算器（ECS）

弹性云服务器：ECS 概述云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...

编程新知 2025/8/16 21:50:27

黑马Mybatis

Mybatis 表现层：页面展示业务层：逻辑处理持久层：持久数据化保存在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2026/1/22 15:36:10

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2026/1/4 5:19:25

Psychopy音频的使用

Psychopy音频的使用本文主要解决以下问题： 指定音频引擎与设备；播放音频文件本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31