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

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

首先一点,不管是那个框架开发的网页前端,最后都需要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协议,其中前端通过 GETPOST 请求数据,后端返回数据。

例如,前端可以通过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)。

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

如何运行后端+前端

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

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

数据库

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

关系型数据库

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

示例:

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

这个SQL语句创建了一个名为 users 的表,存储用户的 idnameemail 信息。

非关系型数据库

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

示例:

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

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


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

相关文章:

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

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

机器学习贝叶斯模型原理

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

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

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

Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!

Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01; 文章目录 Python 浏览器自动化新利器&#xff1a;DrissionPage&#xff0c;让网页操作更简单&#xff01;&#x1f680; 引言&#x1f31f; DrissionPage简介&#x1f6e0;️ 三大…...

Rust学习笔记_13——枚举

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

Postgresql 格式转换笔记整理

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

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

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

详细介绍vue的递归组件(重要)

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

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

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

yolov5导出命令

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

RabbitMQ的常用术语介绍

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

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

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

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

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

数字图像处理(15):图像平移

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

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

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

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

在 Java 中&#xff0c;子类的构造器是否需要显式调用 super 取决于父类&#xff08;超类&#xff09;的构造器。 如果父类有一个无参构造器&#xff1a; 如果父类有一个无参构造器&#xff0c;那么子类的构造器可以不显式调用 super。在这种情况下&#xff0c;如果子类构造器的…...

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

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

Unity教程(十九)战斗系统 受击反馈

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

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

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

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

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

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...