新手学习:网页前端、后端、服务器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协议,其中前端通过 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 三样文件! 网页前端 目录结构 在开始开发网站之前,首先需要了解如何组织文件。一个简单的网页项目通常会有以下几个文件夹和文件&…...
机器学习贝叶斯模型原理
一、引言 在机器学习与数据分析的广袤天地中,贝叶斯模型犹如一颗璀璨的明星,闪耀着独特的光芒,为众多领域的分类、预测等任务提供了强大的理论支撑与实用解法。然而,对于许多初涉此领域的小伙伴而言,贝叶斯模型背后的…...
【C++】实现100以内素数的求解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯代码概览💯代码结构与逻辑分析1. 包含的头文件和命名空间2. 素数判断函数 isPrime功能输入与输出核心逻辑数学背景 3. 主函数 main功能核心逻辑输出示例 &#…...
Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!
Python 浏览器自动化新利器:DrissionPage,让网页操作更简单! 文章目录 Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!🚀 引言🌟 DrissionPage简介🛠️ 三大…...
Rust学习笔记_13——枚举
Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包 枚举 文章目录 枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型 在Rust编程语言中,枚举(enum…...
Postgresql 格式转换笔记整理
1、数据类型有哪些 1.1 数值类型 DECIMAL/NUMERIC 使用方法 DECIMAL是PostgreSQL中的一种数值数据类型,用于存储固定精度和小数位数的数值。DECIMAL的精度是由用户指定的,可以存储任何位数的数值,而小数位数则由用户自行定义。DECIMAL类型的…...
AI开发:卷积神经网络CNN原理初识,简易例程 - 机器学习
一 、卷积神经网络是什么 (1)印象 今天说的CNN,并不是我们熟知的美国有线电视新闻网。 那什么是CNN呢? Convolutional Neural Networks, CNN)简单来说,就是用一个筛子来筛面粉的。 筛子就是卷积核&…...
详细介绍vue的递归组件(重要)
递归组件在 Vue 中是一个非常强大的概念,尤其在渲染层级结构(如树形结构、嵌套列表、评论系统等)时,能够极大地简化代码。 什么是递归组件? 递归组件就是一个组件在其模板中引用自身。这种做法通常用于渲染树形结构或…...
【单片机基础知识】基础知识(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…...
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检测图片命令&…...
RabbitMQ的常用术语介绍
出版商 “出版商”一词在不同的上下文中有不同的含义。一般来说,在消息传递中 发布者(也称为“生成者”)是应用程序(或应用程序实例) 发布 (生成) 消息。同一应用程序也可以使用消息 因此同时也…...
Docker魔法:用docker run -p轻松开通容器服务大门
前言 “容器”与“虚拟化”作为现代软件开发和运维中的关键概念,已经广泛应用于各个技术领域。然而,在使用 Docker 部署应用时,常常会遇到这样的问题:容器正常运行,却无法让外界访问其内部服务?即使容器内的应用顺利启动,外部无法通过浏览器或 API 进行连接。此时,doc…...
【后端面试总结】Redis过期删除策略
Redis会将每个设置了过期时间的key放入一个独立的字典中,以后会定时遍历这个字典来删除到期的key。除了定时遍历之外,它还会使用惰性策略来删除过期的key。所谓惰性策略就是在客户端访问这个key的时候,Redis对key的过期时间进行检查ÿ…...
数字图像处理(15):图像平移
(1)图像平移的基本原理:计算每个像素点的移动向量,并将这些像素按照指定的方向和距离进行移动。 (2)平移向量包括水平和垂直分量,可以表示为(dx,dy)ÿ…...
高级java每日一道面试题-2024年12月08日-JVM篇-什么是类加载器?
如果有遗漏,评论区告诉我进行补充 面试官: 什么是类加载器? 我回答: 在Java高级面试中,类加载器(ClassLoader)是一个重要的概念,它涉及到Java类的加载和初始化机制。以下是对类加载器的详细解释: 定义与作用 类加…...
JAVA子类的无参构造器中第一行的super
在 Java 中,子类的构造器是否需要显式调用 super 取决于父类(超类)的构造器。 如果父类有一个无参构造器: 如果父类有一个无参构造器,那么子类的构造器可以不显式调用 super。在这种情况下,如果子类构造器的…...
mysql程序介绍,选项介绍(常用选项,指定选项的方式,特性),命令介绍(查看,部分命令),从sql文件执行sql语句的两种方法
目录 mysql程序 介绍 选项 介绍 常用选项 指定选项的方式 编辑配置文件 环境变量 选项特性 指定选项 选项名 选项值 命令 介绍 查看客户端命令 tee/notee prompt source system help contents 从.sql文件执行sql语句 介绍 方式 source 从外部直接导入…...
Unity教程(十九)战斗系统 受击反馈
Unity开发2D类银河恶魔城游戏学习笔记 Unity教程(零)Unity和VS的使用相关内容 Unity教程(一)开始学习状态机 Unity教程(二)角色移动的实现 Unity教程(三)角色跳跃的实现 Unity教程&…...
lanqiaoOJ 3744:小蓝的智慧拼图购物 ← pair+优先队列
【题目来源】https://www.lanqiao.cn/problems/3744/learning/【题目描述】 在小蓝的生日那天,他得到了一个由神秘人赠送的拼图游戏,每个拼图都有其特定的价值和相应的优惠券。小蓝决定要买下所有的拼图,但他希望能尽可能地节省花费。小蓝手中…...
Spring Boot教程之二十一:文件处理
Spring Boot – 文件处理 Spring Boot 是一种流行的、基于 Spring 的开源框架,用于开发强大的 Web 应用程序和微服务。由于它建立在 Spring 框架之上,因此它不仅具有 Spring 的所有功能,而且还包括某些特殊功能,例如自动配置、健康…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
