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

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

网页前端

目录结构

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

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

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

什么语言？

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

HTML（超文本标记语言）

HTML 是网页的基础，用来定义网页的结构。它通过标签（例如

、

）来组织页面的内容。

示例：

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

解释：

  • ：这是一个HTML文档的起始标签。
  • ：包含网页的元数据，如标题、字符集等。
  • ：包含网页的主要内容。

  • ：网页的标题（最大标题）。

  • ：段落标签，用来表示一段文本。

CSS（层叠样式表）

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

示例：

  1. body {
  2.   font-family: Arial, sans-serif; /* 设置网页字体 */
  3.   background-color: #f0f0f0; /* 设置背景颜色 */
  4. }
  5.  
  6. h1 {
  7.   color: #333333; /* 设置标题颜色 */
  8.   text-align: center; /* 将标题居中 */
  9. }
JavaScript（JS）

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

示例：

  1. <button onclick="showMessage()">点击我</button>
  2. <script>
  3.   function showMessage() {
  4.     alert("你点击了按钮！");
  5.   }
  6. </script>

解释：

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

有哪些框架？

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

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

浏览器引擎：谷歌V8

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

网页后端

作用

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

后端开发的目录结构

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

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

如何和前端通信？

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

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

  1. fetch('https://api.example.com/data')
  2.   .then(response => response.json())
  3.   .then(data => console.log(data))
  4.   .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。

示例：

  1. CREATE TABLE users (
  2.   id INT PRIMARY KEY AUTO_INCREMENT,
  3.   name VARCHAR(100),
  4.   email VARCHAR(100)
  5. );

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

非关系型数据库

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

示例：

  1. {
  2.   "name": "Alice",
  3.   "email": "[email protected]"
  4. }

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

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

数媒小百科
微信公众号
数字媒体技术
注：本文转载自blog.csdn.net的Unity青子的文章"https://blog.csdn.net/leoysq/article/details/144225880"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！