前后端开发

前后端分离项目开发介绍

技术介绍

后端

1、Node.js

使用 JavaScript 来构建网站的后端服务、API（应用程序接口）以及处理数据库逻辑。

简单来说Node.js 就像一个容器或操作系统，它为你提供了一个执行 JavaScript 代码的地方，并提供了一套核心的 API（例如，处理文件、网络连接、操作系统的能力）。

TypeScript（TS），它是 JavaScript 的一个超集。它的主要目的是增强 JavaScript 的能力，使其更适合开发大型应用。一般来说，TS不能被Node.js和浏览器直接运行，需要被转义成js。

2、Express

Express.js 是用 JavaScript 语言编写的，用于在 Node.js 运行时环境中构建 Web 应用的工具集/结构。

简单来说就像是一个工具包，为我们开发后端提供助力。

特点	解释
极简 (Minimalist)	Express 提供了 Web 开发的最低限度且必需的功能。它不强迫你使用任何特定的数据库或模板引擎。
灵活 (Flexible)	它的核心是中间件。你可以自由地添加任何你需要的模块或库来扩展功能。
非侵入式 (Unopinionated)	Express 不预设你的应用结构应该是什么样的。这给了开发者完全的自由，但也意味着需要自己做更多决策。
快速 (Fast)	由于其基础和轻量级的特性，Express 本身非常高效。

3、基于Node.js和Express后端结构

在中小型项目中，最常用的结构是Routes/Controllers/Models

（1）Routes

Routes 层的职责是实现请求路由（Request Routing）。它定义了 HTTP 方法与 URL 路径的映射关系。当服务器接收到外部 HTTP 请求时，Routes 层负责将其准确地分发给对应的 Controller 函数，以启动业务处理流程。

简答来说，这就是它起到了类似于导航的作用，当传来要执行某个任务的时候，他会将这个任务导向实现这个任务的Controller 函数，随后进行后续的操作。

（2）Controllers

如果将整个后端应用比作一家公司，Controller 就是项目经理，它的职责是协调资源（Models）来完成任务，并对外（前端）给出最终结果。

它主要可以分为三部分：

处理输入数据：
从 HTTP 请求中提取出所有必要的信息，以便进行业务处理。
Controller 必须是“干净”的，它只接受整理好的数据。如果数据提取或解析失败（例如，请求体格式错误），Controller 应该在此处捕获并立即返回错误，不让无效请求进入后续的业务逻辑。
协调业务逻辑：
这一步是 Controller 的“大脑”，它负责决定执行的顺序和资源的调用。
- 调用 Models
  Controller 只需要调用 Model 提供的抽象方法，他不会来直接完成任务。
- 控制流程
  
  Controller 决定多个 Model 操作的顺序。
构造并发送响应：
这一步是 Controller 的“出口”，目标是向客户端提供明确、标准的反馈。
- 结果处理和状态码设置
  例如：
  
  成功的响应：
  - 200 OK：请求成功，且返回了数据（如 GET 请求）。
  客户端错误的响应：
  - 400 Bad Request：请求数据格式不正确（如缺少必需字段）。
- 数据格式化
数据标准化： Controller 接收到 Model 返回的原始数据后，可能会进行最后的处理，例如：隐藏敏感字段（如用户密码）、重命名字段。

发送 JSON： 在 Web API 后端，Controller 通常使用 Express 提供的 res.json(data) 方法，将处理后的 JavaScript/TypeScript 对象自动转换成 JSON 字符串并发送给前端。

（3）Models

Models 层有两个核心职责：数据蓝图定义和数据持久化操作。

数据蓝图定义

定义记录了各种数据的标准，确保数据在输入、输出和传输过程中，字段名和数据类型（如数字、字符串、布尔值）都是固定的、可预测的。
数据持久化操作
进行实际的数据操作，负责将数据写入到永久存储介质（如数据库）中，或从中读取数据。

前端

以Uniapp举例简单介绍Uniapp框架中各个部分的作用，Vue也大同小异。

1、框架介绍

（1）App.vue (Vue单文件组件)

语言：Vue3 Template + TypeScript

作用：

UniApp应用的根组件
应用启动时的全局逻辑（onLaunch）
应用显示/隐藏时的生命周期钩子

（2）main.ts (TypeScript)

语言：TypeScript

作用：

应用入口文件
初始化Vue3应用实例
集成Pinia状态管理库

（3）pages.json (JSON配置)

语言：JSON

作用：

UniApp的页面配置文件（类似小程序的app.json）
定义应用的页面路由
配置全局样式和导航栏

（4）page文件夹

存放所有完整的、独立的 Vue 单文件组件（.vue 文件），它们代表了应用中的一个独立页面。

（5）components文件夹

存放所有可复用的 Vue 单文件组件（.vue 文件）。这些组件是应用程序的 UI 构造块，但不具备独立页面的功能。例如：按钮、导航栏、自定义卡片、Modal 弹窗等。

（5）api文件夹

存放所有与后端数据交互相关的代码。例如，封装 uni.request 或 axios 的函数，用于调用后端 API（如获取用户列表、提交订单、登录等）。它将数据请求逻辑从组件中分离出来。

（6）stores文件夹

存放所有使用 Pinia 或 Vuex 定义的状态管理模块（Store）。这些文件负责管理需要在多个组件或页面间共享的数据和业务逻辑。例如：用户登录状态、购物车数据、全局配置等。

数据库

MySQL：它通过 SQL 语言，以表格和关系的形式，高效且安全地管理应用程序所需的所有结构化数据。

Apache：前后端通信的桥梁。

架构图

┌─────────────────────┐
│   UniApp前端应用     │
│  (Vue3 + TypeScript)│
└──────────┬──────────┘
           │ HTTP请求
           │ (REST API)
           ↓
┌──────────────────────────┐
│  Express后端服务器        │
│  (Node.js + TypeScript)  │
│  http://localhost:3000   │
└──────────┬───────────────┘
           │
           ↓
    ┌──────────────┐
    │  MySQL数据库  │
    │localhost:3306│
    └──────────────┘