黑马Java第二阶段:JavaWeb+AI(笔记)

全网首发AI+JavaWeb开发入门,Tlias教学管理系统项目实战全套视频教程,从需求分析、设计、前后端开发、测试、程序优化到项目部署一套搞定

黑马官方笔记


🧠 Web 开发初学者导学笔记

一、什么是 Web?

  • Web,即全球广域网(World Wide Web,简称 www)

  • 是通过浏览器访问的网站系统

  • Web开发包含:

    • 前端程序:负责界面展示(HTML/CSS/JS)
    • 服务端程序:处理业务逻辑(Java、SpringBoot)
    • 数据库:存储和管理数据(MySQL等)

二、Web 开发要学什么?(课程安排)

📌 Part1:前端基础(2天)

  • HTML / CSS / JS
  • Ajax / Axios
  • Vue3 基础

📌 Part2:后端基础(4天)

  • Maven 项目管理
  • HTTP 协议,IOC/DI
  • MySQL、JDBC、MyBatis

📌 Part3:后端实战(6天)

  • 员工/学员/班级/报表管理
  • 登录认证等常见业务实现

📌 Part4:后端进阶(2天)

  • AOP 面向切面编程
  • SpringBoot原理、自定义Starter
  • Maven高级技巧

📌 Part5:前端实战(4天)

  • Vue 工程化开发
  • ElementPlus UI 框架
  • 实战案例(Tlias系统)

📌 Part6:部署上线(2天)

  • Linux 基础操作
  • Docker 容器化部署

三、AI如何赋能Web开发?

开发环节AI能做什么
设计页面自动生成页面结构草图
编写代码AI 辅助代码生成、单元测试、优化
Bug 修复AI 快速定位并修复常见错误
前端开发自动生成 Vue/HTML 代码,提升开发效率
解释代码快速理解和学习已有项目代码
部署运维AI 自动生成脚本,简化部署过程

四、课程特色(为什么选这门课?)

  1. 项目驱动教学

    • 80% 实战练习,边学边做
  2. 全链路开发培养

    • 技术栈:SpringBoot3 + Vue3
    • 从需求分析 → 设计 → 开发 → 测试 → 部署全流程掌握
  3. AI 全面赋能

    • 融合AI完成设计、编码、调试、优化等环节
  4. 企业级开发规范

    • 前后端分离
    • 接口文档规范(30+)、模拟真实开发流程

五、学完能做什么?

✅ 前端页面开发能力
✅ 后端接口开发能力
✅ 数据库设计与使用能力
✅ 项目部署上线能力
✅ 独立完成中小型Web项目(SpringBoot3 + Vue3)

适合用于:

  • 毕业设计
  • 找实习/就业
  • 自主开发项目

六、学习建议

  1. 每天至少实践一个小模块,动手写代码
  2. 多使用 AI 工具(如 ChatGPT、Copilot)辅助理解与开发
  3. 养成良好开发规范(注释清晰、命名规范、结构合理)
  4. 多复习总结,形成自己的学习笔记和项目经验

🧠 Web 前端开发 Day01 入门笔记(HTML + CSS)

一、什么是前端?

  • 前端:负责网页在浏览器端的“结构 + 外观 + 行为”

  • 三大核心技术

    技术功能作用
    HTML页面结构(内容和标签)
    CSS页面表现(样式与布局)
    JavaScript页面行为(交互与响应)
  • 运行原理:浏览器解析程序员编写的代码 → 渲染为用户看到的网页


二、HTML 基础知识

✅ HTML 是什么?

  • 全称:HyperText Markup Language(超文本标记语言)

  • 功能:定义网页的结构内容

  • 标签结构:

    <标签名 属性="">内容</标签名>
    

✅ HTML 骨架示例

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <img src="img/1.png">
  </body>
</html>

✅ 常见标签

标签功能说明
<h1>~<h6>标题(h1最大,h6最小)
<p>段落文本
<img>图片展示,使用 src 属性
<a>超链接,使用 hreftarget
<form>表单容器
<input>表单项(文本框、密码框等)
<select>下拉列表
<textarea>文本域
<table>表格

三、CSS 样式基础

✅ CSS 是什么?

  • 全称:Cascading Style Sheets(层叠样式表)
  • 功能:控制网页的外观样式

✅ 三种CSS写法

写法示例
行内样式<h1 style="color:red">标题</h1>
内部样式<style> h1 { color:red; } </style>
外部样式表文件<link rel="stylesheet" href="style.css">

✅ 常见样式属性

属性说明
color字体颜色
font-size字体大小
background背景颜色或图片
text-align文本对齐方式
margin外边距
padding内边距
width / height宽度 / 高度

四、CSS 选择器基础

选择器类型写法作用对象
元素选择器h1 {}所有 h1 元素
类选择器.box {}所有 class=“box” 元素
ID 选择器#top {}id=“top” 的唯一元素

📌 优先级:ID选择器 > 类选择器 > 元素选择器


五、盒子模型与页面布局

✅ 什么是盒子模型?

所有HTML元素都可以看成一个“盒子”,由以下4部分组成:

margin(外边距)
border(边框)
padding(内边距)
content(内容)
  • 用于控制元素间距、边界、布局结构

✅ 常用布局标签

标签特点说明
<div>块级元素,一行一个,可设置宽高
<span>行内元素,一行多个,不可设置宽高

六、Flex 弹性布局

  • Flex 是一种弹性布局,适合横向/纵向排列元素

  • 在父元素上设置:

    display: flex;
    flex-direction: row; /* 或 column */
    justify-content: space-between;
    align-items: center;
    

七、表单与表格基础

✅ 表单结构

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>
  • action:提交目标地址
  • method:GET(拼接在URL)或 POST(提交到请求体)

✅ 表格结构

<table>
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td></tr>
  </tbody>
</table>

八、路径书写基础

类型示例
绝对路径https://xxx.com/a.png
相对路径./img/a.png(当前目录)
上级目录路径../img/a.png

✅ 总结

  • HTML 负责结构:用于定义页面的标题、段落、图像、链接等基础内容
  • CSS 负责样式:控制页面的字体、颜色、布局、间距等外观
  • 网页开发核心:先写结构,再美化样式,逐步掌握页面排版与布局技巧
  • 从页面到项目:本节掌握的知识是构建完整网页和后续实战的基础

🧠 前端开发 Day02 学习笔记(JavaScript + Vue3)

一、JavaScript 基础入门

✅ 什么是 JavaScript?

  • 一种脚本语言,用于控制网页的行为(交互)
  • 运行在浏览器中,实现页面点击、响应、动画等功能
  • 与 Java 完全不同,只是语法类似

✅ JavaScript 三大组成

组成部分功能作用
ECMAScriptJS 的核心语法规范(变量、函数等)
BOM浏览器对象模型(控制浏览器行为)
DOM文档对象模型(操作网页结构内容)

✅ JavaScript 引入方式

引入方式示例说明
内部脚本<script>...</script> 写在HTML中
外部脚本<script src="main.js"></script> 引入.js 文件

✅ 变量与常量

  • 声明变量:let name = 'Tom'
  • 声明常量:const PI = 3.14
  • JS 是弱类型语言:变量可以随时更换数据类型

✅ 数据类型

类型示例
number1, 3.14, NaN
booleantrue / false
string‘hello’, “world”, 模板字符串
null空对象
undefined未赋值变量

🧪 查看类型:typeof 变量


✅ 函数

function greet(name) {
  return "Hello " + name;
}
  • 匿名函数:const fn = function() { ... }
  • 箭头函数:const fn = () => { ... }

✅ 对象与 JSON

let person = {
  name: "Tom",
  age: 20,
  sayHi() {
    console.log("Hi");
  }
};
  • JSON 格式:
{ "name": "Tom", "age": 20 }
  • 转换方法:

    • JSON.stringify(obj) → 转为字符串
    • JSON.parse(str) → 转为对象

✅ DOM 操作

  • 获取元素:

    • document.querySelector('#id')
    • document.querySelectorAll('.class')
  • 修改内容:

    • element.innerText = '新内容'
    • element.style.color = 'red'

✅ 事件监听

element.addEventListener('click', function() {
  // 点击后的动作
});

常见事件:

  • click:点击
  • mouseenter / mouseleave:移入/移出
  • input:输入框变化
  • submit:表单提交

二、Vue3 基础入门

✅ 什么是 Vue?

  • 一种渐进式前端框架,用于构建交互式页面
  • 强调数据驱动视图
  • 优点:提升开发效率、维护方便

✅ 使用 Vue 的基本步骤

<!-- 引入 Vue -->
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

三、Vue 常用指令

🔁 v-for 列表渲染

<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>

🔗 v-bind 动态绑定属性

<img :src="item.image" />

🎭 条件渲染:v-if vs v-show

指令原理与使用场景
v-if控制是否创建元素(适合不频繁切换)
v-show控制显示隐藏(适合频繁切换)
<span v-if="gender === 1"></span>
<span v-else-if="gender === 2"></span>
<span v-else>未知</span>

📥 表单数据绑定:v-model

<input v-model="username" />

🖱️ 事件绑定:v-on 或简写 @

<button @click="doSomething">提交</button>

四、Vue 中的 Ajax 异步交互

✅ 什么是 Ajax?

  • 异步 JavaScript 和 XML 的缩写
  • 可以在不刷新页面的前提下与服务器交换数据

✅ 使用 Axios(推荐)

axios.get(url)
  .then(response => { ... })
  .catch(error => { ... })

可配合 async / await 写法提升可读性。


五、Vue 生命周期简述

Vue 组件从创建到销毁的过程叫做生命周期,每个阶段都可以挂载函数(钩子):

  • 常用钩子函数:

    • mounted():页面加载完毕后自动执行(常用于发起 Ajax 请求)
    • created()updated() 等等

✅ 总结

技术作用
JavaScript控制网页交互,掌握语法、DOM、事件是基础
Vue3构建复杂页面、提高效率,掌握数据绑定、事件监听、条件渲染等核心指令
Axios实现前后端数据通信的利器,便于异步请求服务器

本次内容为后续开发企业级项目打下基础。掌握这些内容后,就可以开始构建完整的“员工管理系统”前端页面。


🧠 Web 后端开发 Day03 学习笔记:Maven 入门基础

一、什么是 Maven?

  • Maven 是 Apache 旗下的一款用于管理和构建 Java 项目的开源工具。
  • 全称:Apache Maven
  • 官网地址:https://maven.apache.org/

✅ Maven 的主要作用:

功能说明
编译将源码编译为字节码
测试使用 JUnit 等工具执行单元测试
打包将项目打包为 jar/war
安装安装到本地仓库,供其他项目引用
发布部署到远程仓库(私服),供团队/公司共享

二、Maven 的核心概念

概念说明
POM项目对象模型(Project Object Model)
依赖当前项目运行所需的 jar 包
插件用于编译、测试、打包、部署等工作的工具
仓库用于存放 jar 包的地方

📦 Maven 的三类仓库:

  1. 本地仓库:位于用户本机(默认路径可配置)
  2. 远程仓库:可配置的服务器仓库(如私服)
  3. 中央仓库:Maven 官方公共仓库

三、Maven 安装步骤

  1. 解压 apache-maven-x.x.x-bin.zip

  2. 修改 conf/settings.xml

    • 设置本地仓库路径
    • 配置阿里云镜像(提升下载速度)
  3. 配置环境变量

    • MAVEN_HOME:Maven 安装目录
    • 加入 PATH:%MAVEN_HOME%\bin
  4. 检查安装是否成功:mvn -v


四、在 IDEA 中使用 Maven

✅ 创建 Maven 项目

  • New Project → 选择 Maven → 配置项目信息(groupId, artifactId, version)

✅ Maven 坐标(唯一标识一个依赖)

坐标元素说明
groupId项目组织名,通常为公司域名的反写
artifactId模块名,如 order-service、user-api 等
version项目版本,常用 SNAPSHOT 或 RELEASE

✅ 导入已有 Maven 项目

  • File → Project Structure → Modules → 导入 pom.xml
  • 或使用 Maven 面板 → + 添加项目

五、依赖管理

  • 所有依赖配置在 pom.xml 文件中,格式如下:
<dependencies>
  <dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter</artifactId>
    <version>5.8.1</version>
  </dependency>
</dependencies>

🧩 依赖排除:

可使用 <exclusions> 标签手动排除传递性依赖。


六、生命周期与命令

✅ Maven 三大生命周期

生命周期说明
clean清理项目构建产生的文件
default项目主要构建流程
site生成项目文档、报告等

✅ default 生命周期常用阶段

阶段功能说明
compile编译主代码
test执行单元测试
package打包成 jar 或 war 文件
install安装到本地仓库
deploy部署到远程仓库

命令示例(终端或 Maven 面板都可执行):

mvn clean
mvn compile
mvn package

七、单元测试与 JUnit

✅ 单元测试流程

  1. test/java 目录中创建测试类
  2. 添加依赖(如 JUnit 5)
  3. 编写测试方法,使用 @Test 注解
  4. 运行测试,查看绿色(成功)或红色(失败)

✅ 常用注解

注解作用说明
@Test测试方法
@BeforeEach每个测试前执行一次初始化操作
@AfterEach每个测试后执行清理操作
@BeforeAll所有测试前执行一次初始化
@AfterAll所有测试后执行清理操作

✅ 断言(Assertions)

用于验证预期结果:

Assertions.assertEquals(4, calculator.add(2,2));

八、依赖范围(scope)

范围使用位置
compile默认,主程序和测试都可用
test仅在测试代码中可用
provided编译需要,运行由容器提供(如Servlet)
runtime编译不需要,运行时需要

九、常见问题解决方案

❌ 问题:依赖下载失败,.lastUpdated 文件存在

✅ 解决:

  • 删除仓库中对应的 .lastUpdated 文件
  • 或使用命令一键清理:
del /s *.lastUpdated
  • 然后重新刷新项目

✅ 总结

模块学习重点
Maven 作用项目构建、依赖管理、统一结构
核心概念POM、依赖、插件、生命周期、仓库
实际使用IDEA中创建项目、引入依赖、执行生命周期命令
单元测试使用 JUnit 进行功能测试,生成绿色报告,提高代码质量
常见问题处理.lastUpdated 清理、依赖范围控制、私服配置等

掌握 Maven,是进入 Java 后端开发体系的关键步骤,也是整个 Web 项目开发和部署的基础保障。


🧠 Day04:Web 后端开发基础笔记

一、Web 架构基础

✅ 静态资源 vs 动态资源

类型内容特点
静态资源页面内容固定,不随用户变化,如:HTML、CSS、JS、图片
动态资源内容根据请求动态生成,如:Servlet、JSP、接口响应

✅ 架构模式对比

架构简称特点
浏览器/服务器B/S客户端只需浏览器,维护方便
客户端/服务器C/S客户端需独立安装,体验更好但维护难

二、SpringBoot Web 开发入门

✅ 项目创建流程

  1. 创建 SpringBoot 工程,选择 Web 依赖
  2. 编写控制器类 HelloController
@RestController
@RequestMapping("/hello")
public class HelloController {
    @GetMapping
    public String hello(String name) {
        return "Hello " + name;
    }
}
  1. 启动程序 → 访问 http://localhost:8080/hello?name=Heima

✅ 注解说明

注解含义
@RestController表示该类是 Web 控制器(包含返回体)
@RequestMapping设置类或方法的访问路径

✅ 启动原理

  • 使用 main() 方法即可启动,背后由 SpringBoot 提供的自动配置完成初始化
  • 使用内嵌的 Tomcat 容器,直接运行即可对外提供服务

三、HTTP 协议基础

✅ 什么是 HTTP?

  • 全称:Hyper Text Transfer Protocol
  • 作用:规定浏览器与服务器之间如何交换数据
  • 特点:基于 TCP、无状态、一次请求对应一次响应

✅ HTTP 请求结构

组成部分示例
请求行GET /hello?name=Tom HTTP/1.1
请求头User-Agent: Chrome 等键值对信息
请求体通常用于 POST,包含表单或 JSON 数据
常见请求方式:
方法特点
GET参数放在 URL 上,有长度限制
POST参数放在请求体中,无长度限制

✅ HTTP 响应结构

部分说明
响应行HTTP/1.1 200 OK
响应头例如 Content-Type
响应体实际返回的 HTML 或 JSON 数据
响应状态码分类:
  • 1xx:处理中
  • 2xx:成功(如 200)
  • 3xx:重定向(如 302)
  • 4xx:客户端错误(如 404)
  • 5xx:服务器错误(如 500)

四、Web 案例:用户列表展示

✅ 开发流程

  1. 准备数据文件(user.txt)和前端页面
  2. 创建实体类 User 封装数据
  3. 编写 Controller 处理 /list 请求
  4. 使用 @ResponseBody 返回 JSON 数据给前端

五、分层架构与解耦设计

✅ 三层架构职责

层级作用说明
Controller控制层:接收请求,返回响应
Service业务层:处理业务逻辑
DAO / Mapper数据层:访问数据库

✅ 三层架构优点

  • 职责单一,复用性强
  • 易于维护,逻辑清晰
  • 实现高内聚、低耦合设计原则

六、IOC 与 DI(依赖注入)

✅ 术语解释

概念说明
IOC控制反转:对象的创建交给容器
DI依赖注入:容器自动将依赖对象注入进来
Bean被 Spring 管理的组件对象

✅ 常用注解

注解用途
@Component普通 Bean 类
@Service业务类(用于 Service 层)
@Repository数据类(用于 DAO 层)
@Controller控制器类
@Autowired自动按类型注入 Bean 对象
@Qualifier按名称指定注入的 Bean
@Resource按名称注入(JavaEE 标准)

所有注解生效的前提是:被 SpringBoot 的组件扫描机制扫描到
(默认扫描启动类所在包及其子包)


✅ DI 的三种方式

方式特点说明
属性注入简洁快速,但不利于封装性
构造注入依赖清晰,推荐使用(支持必注)
Setter注入适用于可选依赖,提高可维护性

✅ 总结

模块关键知识
Web 架构理解静态与动态资源,熟悉 B/S 架构
HTTP 协议掌握请求/响应格式、状态码意义、请求方式差异
SpringBoot Web能独立创建工程、定义控制器、响应数据
三层架构掌握 Controller-Service-DAO 职责划分
IOC & DI理解控制反转和依赖注入,掌握相关注解使用方式

🧠 Day05:数据库基础学习笔记(MySQL + SQL)

一、什么是数据库?

  • 数据库(Database / DB):存储和管理数据的仓库。
  • 数据库管理系统(DBMS):用于操作数据库的软件,如 MySQL、Oracle。
  • SQL(Structured Query Language):结构化查询语言,是操作关系型数据库的标准语言。

二、常见数据库产品

数据库特点
MySQL开源、轻量级、使用广泛
Oracle商业化,性能强,费用高
PostgreSQL开源,支持复杂查询
SQLite嵌入式、轻量级,无需安装

三、MySQL 基础

✅ 安装与连接

  • 推荐版本:MySQL 8.0+
  • 连接命令:
mysql -h 主机 -P 端口 -u 用户名 -p 密码

✅ 数据模型(关系型数据库)

  • 数据以 二维表 的形式存储
  • 一个数据库中可以有多张表,每张表包含若干记录(行)

四、SQL 语句分类

类别全称作用
DDLData Definition Language定义数据库结构(库、表)
DMLData Manipulation Language操作数据记录(增删改)
DQLData Query Language查询数据记录

五、DDL(定义语言)

✅ 创建数据库

CREATE DATABASE 数据库名;

✅ 创建表(含字段约束)

CREATE TABLE emp (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  gender CHAR(1) DEFAULT '男',
  age INT,
  hire_date DATE
);

✅ 常见字段约束

关键字含义
PRIMARY KEY主键,唯一且非空
NOT NULL非空
UNIQUE唯一
DEFAULT默认值
AUTO_INCREMENT自增主键

六、DML(数据操作)

✅ 插入数据

INSERT INTO emp(name, gender, age) VALUES ('Tom', '男', 25);

✅ 更新数据

UPDATE emp SET age = 30 WHERE name = 'Tom';

✅ 删除数据

DELETE FROM emp WHERE age < 18;

七、DQL(查询语言)

✅ 基本查询

SELECT name, age FROM emp;

✅ 条件查询

SELECT * FROM emp WHERE age >= 30 AND gender = '男';
  • 比较符号:=, !=, <, >, BETWEEN, IN, LIKE, IS NULL

  • 模糊匹配:

    • %:任意个字符
    • _:一个字符

✅ 分组查询(+聚合函数)

SELECT gender, COUNT(*) FROM emp GROUP BY gender;
  • 聚合函数:COUNT()SUM()AVG()MAX()MIN()

  • HAVING 用于过滤分组后的结果

  • WHERE 区别:

    • WHERE 是分组前过滤,不能用聚合函数
    • HAVING 是分组后过滤,可用聚合函数

✅ 排序查询

SELECT * FROM emp ORDER BY age DESC, name ASC;
  • 默认升序:ASC,降序:DESC

✅ 分页查询

SELECT * FROM emp LIMIT 0, 10;
  • LIMIT 起始索引, 每页条数

  • 索引从 0 开始,一般由页码换算得:

    • 起始索引 = (页码 - 1) × 每页条数

八、表结构操作(DDL)

  • 查询表结构:
DESC emp;
  • 修改表结构:
ALTER TABLE emp ADD phone VARCHAR(20);
ALTER TABLE emp MODIFY age TINYINT;
ALTER TABLE emp DROP COLUMN phone;
  • 删除表:
DROP TABLE emp;

九、数据类型(MySQL 常见)

类型示例说明
INT / BIGINT1, 10000整数
FLOAT / DOUBLE3.14, 9.99浮点数
CHAR(n)‘男’, ‘Y’固定长度字符串,节省空间
VARCHAR(n)‘张三’, ‘admin’可变长度字符串
DATE‘2024-01-01’日期
DATETIME‘2024-01-01 10:00:00’日期+时间

🔟 数据库建表设计示例

以员工管理系统为例,分析页面字段,设计如下表结构:

CREATE TABLE emp (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  gender CHAR(1) DEFAULT '男',
  age TINYINT,
  job VARCHAR(20),
  entry_date DATE,
  create_time DATETIME,
  update_time DATETIME
);

✅ 总结

模块核心内容说明
数据库存储数据的仓库,使用 DBMS 管理
SQL操作数据库的标准语言,分 DDL、DML、DQL
表设计明确字段类型、约束,结构合理便于查询与维护
查询技巧掌握 where、group by、order by、limit 等语法
工具推荐图形化工具如 DataGrip 提高效率

掌握本节内容后,你就能进行基础的数据建模、表结构设计和数据操作,为后端开发打下坚实的基础。

📘 Day06 后端 Web 基础:Java 操作数据库详解笔记


一、Java 操作数据库的两种方式

技术简介
JDBCJava 官方提供的一套数据库操作 API
MyBatis简化 JDBC 操作的框架,封装更高级易用

二、JDBC 全称与原理

✅ 全称:Java Database Connectivity

是一组用于访问关系型数据库的标准 API 接口

✅ 原理图:

Java 程序  ---调用---> JDBC 接口(统一规范)
                 ↓
           数据库驱动实现类
                 ↓
          实际连接并操作数据库(如 MySQL)

JDBC 本身是接口,数据库厂商(如 MySQL)提供对应的驱动 jar 实现。


三、使用 JDBC 操作数据库的七个步骤

🔧 案例目标:更新用户表中 ID 为 1 的用户年龄为 25

UPDATE user SET age = 25 WHERE id = 1;

✅ 1. 添加 Maven 依赖

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.30</version>
</dependency>

✅ 2. 注册数据库驱动(新版可省略)

Class.forName("com.mysql.cj.jdbc.Driver");

✅ 3. 获取数据库连接对象

Connection conn = DriverManager.getConnection(
    "jdbc:mysql://localhost:3306/dbname?serverTimezone=UTC", "root", "password");

✅ 4. 定义 SQL

String sql = "UPDATE user SET age = 25 WHERE id = 1";

✅ 5. 获取 Statement 并执行 SQL

Statement stmt = conn.createStatement();
int rows = stmt.executeUpdate(sql);  // 返回受影响行数

✅ 6. 处理结果(DML:查看是否成功;DQL:遍历结果集)

✅ 7. 释放资源

stmt.close();
conn.close();

四、JDBC 查询数据(DQL)

🎯 目标:根据用户名和密码查询用户

SELECT * FROM user WHERE username = 'daqiao' AND password = '123456';

✅ 执行与解析

ResultSet rs = stmt.executeQuery(sql);
while (rs.next()) {
    String username = rs.getString("username");
    int age = rs.getInt("age");
}
  • rs.next():将光标向下移动,判断是否有下一条记录
  • rs.getXxx("列名"):获取对应列的数据

五、预编译 SQL:PreparedStatement

🛡️ 为什么推荐?

  1. 防止 SQL 注入
  2. 提升性能(SQL 只编译一次)

✅ 示例:防止注入的写法

String sql = "SELECT * FROM user WHERE username = ? AND password = ?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1, "admin");
ps.setString(2, "123456");
ResultSet rs = ps.executeQuery();

六、MyBatis 简介

  • MyBatis 是一个持久层框架
  • 核心目的:简化 JDBC 操作
  • 支持 注解式 SQLXML 映射文件

七、SpringBoot 集成 MyBatis 步骤

✅ 准备阶段

  1. 创建 SpringBoot 项目
  2. 加入依赖(MyBatis Starter、MySQL Driver)
  3. 配置 application.yml 连接数据库
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/db
    username: root
    password: root
  1. 创建数据库表 user
  2. 创建实体类 User

✅ 编写 Mapper 接口(注解方式)

@Mapper
public interface UserMapper {
    @Select("SELECT * FROM user WHERE id = #{id}")
    User findById(int id);
}
  • 使用 @Mapper 告诉 SpringBoot 它是 MyBatis 接口
  • #{} 用于占位(会自动转换为预编译 SQL)

✅ 执行增删改查

操作注解
查询@Select(...)
插入@Insert(...)
更新@Update(...)
删除@Delete(...)

示例:

@Delete("DELETE FROM user WHERE id = #{id}")
int deleteById(int id);

八、MyBatis 中 # 和 $ 的区别(重要)

符号含义推荐情况
#{}占位符,防 SQL 注入,自动转义✅ 推荐
${}字符串拼接,可能引起注入⚠️ 小心使用,如表名、列名动态时

九、数据库连接池

  • 是用于管理数据库连接的容器(Connection 的复用)
  • SpringBoot 默认连接池:HikariCP
  • 常用产品:Druid(阿里)、C3P0、DBCP

✅ 优势:

  1. 节省资源,避免频繁创建连接
  2. 提升系统响应速度
  3. 防止连接泄漏

🔟 XML 映射方式(用于复杂 SQL)

✅ 映射规则:

  • Mapper 接口与 XML 文件同名、同包
  • XML 中的 namespace 为接口全限定名
  • SQL 的 id 对应接口的方法名
<!-- resources/mapper/UserMapper.xml -->
<mapper namespace="com.example.mapper.UserMapper">
  <select id="findAll" resultType="User">
    SELECT * FROM user
  </select>
</mapper>

🧩 SpringBoot 配置文件格式

格式特点
.properties传统格式,键值对
.yml/.yaml缩进结构,语义清晰 ✅ 推荐

✅ yml 基本语法:

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/db
    username: root
    password: root
  • 用空格缩进,不能用 tab
  • # 表示注释
  • 支持对象、数组、嵌套结构定义

✅ 总结表格:JDBC vs MyBatis

对比点JDBCMyBatis
操作方式繁琐,需要手动写连接、SQL、解析简洁,封装了 SQL 及映射
安全性需要手动防止注入自动预编译(#{})更安全
学习成本偏底层,细节多上手快,逻辑清晰
推荐使用场景轻量测试、了解底层原理实际项目开发中广泛使用

🧠 Day07 后端 Web 实战笔记(部门管理模块)

一、项目背景与目标

开发 Tlias 智能学习辅助系统中的“部门管理”模块,实现以下功能:

  • ✅ 查询部门列表
  • ✅ 删除部门
  • ✅ 新增部门
  • ✅ 修改部门
  • ✅ 日志记录

二、开发模式与项目架构

✅ 采用 前后端分离架构

对比前后端混合开发前后端分离开发(推荐)
部署模式前后端一体前后端独立部署
维护性差,不易扩展高,职责清晰,接口对接规范
开发流程串行并行(前后端各自独立、通过接口联调)

✅ 开发流程

需求分析 → 接口设计 → 前后端并行开发 → 接口测试 → 联调部署

三、RESTful 风格接口设计

✅ 核心思想

  • 用 URL 表示资源(Resource)
  • 用 HTTP 动词表示操作(行为)
动作HTTP 方法URL 示例
查询GET/depts
删除DELETE/depts?id=8
新增POST/depts
修改PUT/depts
查询单个GET/depts/{id}

四、接口测试工具:Apifox

  • 官网:https://apifox.com/

  • 作用:

    • 编写和管理 API 文档
    • 调试 API 请求(支持 GET/POST/PUT/DELETE)
    • 生成 Mock 数据
  • ✅ 推荐用于前后端并行开发过程中的调试接口使用


五、部门管理功能实现

✅ 三层架构职责

职责说明
Controller接收请求,参数绑定,响应数据
Service处理业务逻辑
Mapper访问数据库,执行 SQL

六、查询部门列表

✅ SQL:

SELECT * FROM dept ORDER BY update_time DESC;

✅ MyBatis 自动封装规则:

字段名情况是否自动封装
和实体类属性名一致✅ 是
不一致,但符合驼峰命名规则✅ 是
完全不一致❌ 否,需要手动配置映射

✅ 手动映射方式:

  • 使用 @Results + @Result
  • 或在 SQL 中起别名
  • 或在配置中开启驼峰映射开关(推荐)

七、前后端联调:Nginx 反向代理

✅ 场景

前端访问地址:http://localhost:90/api/depts
后端接口地址:http://localhost:8080/depts

✅ Nginx 配置示例

server {
    listen 90;
    location ^~ /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:8080;
    }
}

✅ 原理

客户端请求 Nginx → Nginx 转发到后端 → 后端返回响应 → Nginx 返回前端


八、删除部门接口

✅ 请求格式

DELETE /depts?id=8

✅ 参数获取方式(推荐使用最后一种)

方式示例代码
HttpServletRequestrequest.getParameter("id")
@RequestParam@RequestParam("id") Integer id
同名绑定public Result delete(Integer id) ✅ 推荐

⚠️ 注意:@RequestParam 默认 required=true,必须传值


九、新增部门接口

✅ 请求格式(POST JSON 数据)

POST /depts
{
  "name": "教研部"
}

✅ 参数绑定

  • 使用实体类接收 JSON 格式请求体
  • 配合 @RequestBody 注解
public Result insert(@RequestBody Dept dept) {
    ...
}

🔟 修改部门接口

✅ 需求拆解

  1. 根据 ID 查询回显

    • GET /depts/{id}
    • 使用 @PathVariable
@GetMapping("/{id}")
public Result getById(@PathVariable Integer id) { ... }
  1. 修改后提交

    • PUT /depts
    • JSON 格式,使用 @RequestBody
@PutMapping
public Result update(@RequestBody Dept dept) { ... }

11. 日志记录技术

✅ 日志的作用:

  • 排查 bug、记录运行状态、记录用户行为等

✅ 常见日志框架对比

框架特点
JULJava 自带,性能较弱
Log4j配置灵活,主流使用
LogbackLog4j 的升级版,SpringBoot 默认
SLF4J日志门面(统一日志接口标准)

✅ SpringBoot 默认使用 Logback

配置文件位置:logback.xml
<configuration>
  <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
    <encoder>
      <pattern>%d %p %c - %m%n</pattern>
    </encoder>
  </appender>

  <root level="info">
    <appender-ref ref="STDOUT" />
  </root>
</configuration>

✅ 日志级别(从低到高)

trace < debug < info < warn < error

✅ 使用方式

@Slf4j
public class DeptController {
    log.info("正在查询所有部门...");
    log.error("发生异常:{}", e.getMessage());
}

✅ 总结表

模块学习目标与关键点
项目架构理解前后端分离与三层结构分工
接口设计掌握 RESTful 风格设计规范(路径 + 方法)
参数绑定理解 RequestParam、PathVariable、RequestBody 的使用
数据封装掌握 MyBatis 自动/手动映射字段的方式
反向代理能配置 Nginx 实现前后端联调
日志技术掌握 Logback 配置、使用与日志级别管理

🧠 Day08 后端 Web 实战笔记:员工管理模块(Tlias 系统)

一、需求总览

我们将基于 Tlias 智能学习系统,实现以下功能:

功能模块涉及内容说明
多表设计设计员工与部门的关系(多表关系建模)
多表查询编写内连接、外连接、子查询 SQL
分页查询实现员工列表分页 + 条件分页查询
请求接收熟悉 @RequestParam、@DateTimeFormat、@RequestBody 等参数接收方式
程序优化动态 SQL、请求参数封装对象等

二、【数据库建模】多表关系详解

✅ 三类多表关系

类型示例案例数据库实现方式
一对多部门:员工 = 1:n在“多”的一方添加外键字段,关联“1”的主键
一对一用户:身份证 = 1:1任意一方添加外键,并添加 UNIQUE 限制
多对多学生:课程 = n:n新建中间表,两个外键分别指向两张表的主键

✅ 部门与员工是一对多

  • 每个员工属于一个部门(emp.dept_id → dept.id)

三、【数据库完整性】物理 vs 逻辑外键

类型特点
物理外键使用 FOREIGN KEY 声明外键,强一致性,但影响性能 ✅ 不推荐
逻辑外键在业务逻辑中控制关联,删除/更新前检查 ✅ 推荐用于实际开发

四、【多表查询】内连接、外连接、子查询

✅ 内连接

SELECT * FROM emp e INNER JOIN dept d ON e.dept_id = d.id;

✅ 左外连接(左边全保留)

SELECT * FROM emp e LEFT JOIN dept d ON e.dept_id = d.id;

✅ 子查询

SELECT * FROM emp WHERE salary < (SELECT AVG(salary) FROM emp);

✅ 练习示例题

  1. 查询“教研部”中“男性”员工,入职时间 > 2011-05-01
  2. 查询工资低于公司平均工资的男性员工
  3. 查询人数 > 10 的部门名称
  4. 查询薪资 > 10000 且入职时间 > 2010-05-01 的“教研部”员工,按薪资降序
  5. 查询工资低于自己部门平均工资的员工

五、【分页查询】员工列表分页展示

✅ 涉及表:emp(员工)+ dept(部门)

✅ 三层职责拆解

层级主要逻辑
Controller接收分页参数(page、pageSize),返回封装结果
Service调用分页工具 PageHelper,返回 PageResult
Mapper编写分页 SQL + count SQL

✅ SQL 示例

-- 查询数据
SELECT * FROM emp e LEFT JOIN dept d ON e.dept_id = d.id LIMIT ?,?;

-- 查询总记录数
SELECT COUNT(*) FROM emp e LEFT JOIN dept d ON e.dept_id = d.id;

✅ 分页请求示例

GET /emps?page=1&pageSize=10

✅ Controller 接收参数(设置默认值)

public Result list(@RequestParam(defaultValue = "1") Integer page,
                   @RequestParam(defaultValue = "10") Integer pageSize) { ... }

六、【分页插件】使用 PageHelper 简化开发

✅ 步骤

  1. Maven 引入 PageHelper 依赖
  2. 在 Service 层配置分页逻辑:
PageHelper.startPage(page, pageSize);
Page<Emp> pageData = (Page<Emp>) empMapper.selectByCondition(...);

✅ 注意

  • 只能作用于紧随其后的第一条 SQL
  • SQL 末尾不加分号 ;

七、【条件分页查询】

✅ 请求格式示例

GET /emps?name=张&gender=1&begin=2021-01-01&end=2023-01-01&page=1&pageSize=10

✅ Controller 接收多个参数

public Result list(@RequestParam String name,
                   @RequestParam Integer gender,
                   @RequestParam @DateTimeFormat(pattern="yyyy-MM-dd") LocalDate begin,
                   @RequestParam @DateTimeFormat(pattern="yyyy-MM-dd") LocalDate end,
                   Integer page, Integer pageSize) { ... }

✅ SQL 条件拼接

SELECT * FROM emp
WHERE name LIKE ?
  AND gender = ?
  AND entry_date BETWEEN ? AND ?
ORDER BY update_time DESC

八、【参数接收优化】对象封装 vs queryString

方法特点说明
多个参数可用 queryString,使用 @RequestParam 一一接收
参数多时推荐封装为对象,如 EmpQueryDTO,提高可维护性
public class EmpQueryDTO {
    private String name;
    private Integer gender;
    private LocalDate begin;
    private LocalDate end;
    private Integer page;
    private Integer pageSize;
}

九、【MyBatis 动态 SQL】 + 组合使用

✅ 场景:用户输入的查询条件不固定

<select id="list" resultType="Emp">
  SELECT * FROM emp
  <where>
    <if test="name != null and name != ''">
      AND name LIKE CONCAT('%', #{name}, '%')
    </if>
    <if test="gender != null">
      AND gender = #{gender}
    </if>
    <if test="begin != null and end != null">
      AND entry_date BETWEEN #{begin} AND #{end}
    </if>
  </where>
</select>

✅ 总结

模块核心内容
多表设计一对多/多对多关系建表设计、逻辑外键优先
多表查询掌握内连接、左连接、子查询的写法与使用场景
分页查询手动分页 vs PageHelper 插件简化分页操作
条件接收结合 @RequestParam、@DateTimeFormat 灵活绑定
参数优化参数封装对象 + 自动映射提升代码整洁性
动态 SQLMyBatis 使用 <if> + <where> 实现条件拼接,灵活高效

🧠 Day09 后端 Web 实战笔记(员工管理进阶)

一、新增员工功能实现

🎯 目标

  • 接收前端传来的员工信息(含多条工作经历)
  • 将员工基本信息写入 emp 表
  • 将工作经历批量写入 emp_expr 表

✅ 开发流程

  1. 接收请求参数(JSON 格式)
  2. 调用 Service 方法处理
  3. 先保存基本信息(emp)
  4. 批量插入工作经历信息(emp_expr)

✅ SQL 示例

INSERT INTO emp (name, gender, ...) VALUES (...);
INSERT INTO emp_expr (emp_id, company, begin, end, job) VALUES (...), (...), (...);

✅ 批量插入工作经历(MyBatis 动态 SQL)

使用 <foreach> 标签循环插入:

<insert id="insertExprList">
  INSERT INTO emp_expr (emp_id, company, begin, end, job)
  VALUES
  <foreach collection="list" item="expr" separator=",">
    (#{expr.empId}, #{expr.company}, #{expr.begin}, #{expr.end}, #{expr.job})
  </foreach>
</insert>

✅ 插入后获取主键 ID

@Insert("INSERT INTO emp (...) VALUES (...)")
@Options(useGeneratedKeys = true, keyProperty = "id")
void insert(Emp emp);

二、Spring 事务管理

💡 场景问题

如果成功保存了 emp 表中的数据,却因异常没插入 emp_expr,会导致数据不一致。
👉 必须将两步操作放入一个事务中!


✅ 什么是事务(Transaction)?

  • 一组操作,要么全部执行成功,要么全部失败
  • 是数据库中保证数据一致性的机制

✅ 手动事务控制(了解)

START TRANSACTION;
-- 执行多条 SQL
COMMIT; -- 或 ROLLBACK;

✅ SpringBoot 中事务控制(重点)

使用注解 @Transactional

@Service
public class EmpService {
    @Transactional
    public void saveEmp(Emp emp) {
        empMapper.insert(emp);
        empExprMapper.insertBatch(emp.getExprList());
    }
}

✅ 异常回滚说明

  • 默认:只回滚 RuntimeException
  • 想回滚其他异常 → 设置 rollbackFor
@Transactional(rollbackFor = Exception.class)

✅ 事务传播行为(了解)

行为说明
REQUIRED默认,加入当前事务
REQUIRES_NEW创建新事务,暂停旧事务

适用于:主方法 + 日志记录方法分别管理事务


✅ 实践扩展:记录新增日志

  • 创建 emp_log 表 + 实体类 + Mapper
  • 在新增员工时插入一条日志,无论成功或失败

三、文件上传


✅ 应用场景

  • 上传头像、简历、图片等资源
  • 广泛存在于社交、办公、学习等平台

3.1 本地存储上传

✅ 步骤

// 获取原始文件名
String fileName = multipartFile.getOriginalFilename();

// 转存到服务器指定路径
multipartFile.transferTo(new File("D:/upload/" + fileName));

⚠️ 注意

  • 文件大小限制默认 1MB

    • 配置方式(application.yml):
spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 50MB
  • 缺点:无法公网访问、磁盘容量有限、不可靠

3.2 阿里云 OSS 上传(企业推荐)

✅ OSS 简介

OSS(Object Storage Service)是阿里云提供的对象存储服务,支持上传图片、音频、视频等文件,提供外链访问。


✅ 使用步骤

  1. 注册阿里云账号并实名认证
  2. 充值并开通 OSS 服务
  3. 创建 Bucket(存储空间)
  4. 获取 AccessKey(ID + Secret)
  5. 安装官方 SDK,使用 Java 上传

✅ 项目集成流程

① 添加 SDK 依赖
<dependency>
  <groupId>com.aliyun.oss</groupId>
  <artifactId>aliyun-sdk-oss</artifactId>
  <version>3.15.1</version>
</dependency>
② 编写上传工具类
public class AliOssUtils {
    public String upload(MultipartFile file) {
        // 连接 OSS,上传,返回文件外链 URL
    }
}
③ 上传接口
@PostMapping("/upload")
public Result upload(MultipartFile file) {
    String url = aliOssUtils.upload(file);
    return Result.success(url);
}

3.3 参数配置优化方式

方法特点说明
@Value单个字段注入,适合少量配置
@ConfigurationProperties一次性绑定多个配置项到 Java Bean ✅ 推荐

✅ 示例

aliyun:
  oss:
    endpoint: xxx
    accessKeyId: xxx
    accessKeySecret: xxx
    bucketName: xxx
@ConfigurationProperties(prefix = "aliyun.oss")
public class AliOssProperties {
    private String endpoint;
    private String accessKeyId;
    ...
}

✅ 总结表格

模块核心内容
新增员工拆分 emp、emp_expr 表,批量插入,注意主键回填
事务控制使用 @Transactional,保证多表数据一致性,支持异常控制
文件上传本地上传入门,阿里云 OSS 企业应用推荐,掌握 SDK 使用流程
参数注入方式@Value 适用于少量,@ConfigurationProperties 适合批量注入

🧠 Day10 后端 Web 实战笔记(员工管理 · 进阶模块)

一、删除员工功能

🎯 需求说明

  • ✅ 删除单个员工
  • ✅ 批量删除多个员工
  • ✅ 删除员工的同时删除其工作经历信息(emp_expr)

✅ 后端接口设计

DELETE /emps?ids=1,2,3

✅ Controller 参数接收方式

方式示例代码
使用数组public Result delete(Long[] ids)
使用集合public Result delete(List<Long> ids) ✅ 推荐

✅ SQL 执行逻辑

-- 删除员工表
DELETE FROM emp WHERE id IN (?, ?, ?);

-- 删除工作经历表(关联 emp_id)
DELETE FROM emp_expr WHERE emp_id IN (?, ?, ?);

两张表都要清理,保持数据一致性,推荐在事务中处理。


二、修改员工信息

🎯 需求分析

  • 查询员工信息(基本 + 工作经历)并回显到前端表单
  • 修改后提交 → 更新两张表

✅ 步骤 1:查询回显

SELECT * FROM emp e
LEFT JOIN emp_expr ee ON e.id = ee.emp_id
WHERE e.id = ?;

✅ MyBatis 查询结果封装方式

方式使用场景
resultType字段名与属性名一致 ✅ 推荐简单查询
resultMap字段名不一致或嵌套复杂对象时使用

✅ 步骤 2:更新员工信息

  • 修改基本信息(emp 表):
UPDATE emp SET ... WHERE id = ?;
  • 工作经历的处理逻辑:
DELETE FROM emp_expr WHERE emp_id = ?;
INSERT INTO emp_expr (...) VALUES (...), (...);

✅ MyBatis 优化 SQL

使用 <set> 标签动态拼接字段,避免 SQL 尾部逗号错误:

<update id="updateEmp">
  UPDATE emp
  <set>
    <if test="username != null"> username = #{username}, </if>
    ...
  </set>
  WHERE id = #{id}
</update>

三、统一异常处理机制

🎯 为什么需要异常处理?

  • 代码中不可避免会出现运行时异常、数据库异常、空指针等
  • 默认异常堆栈信息不利于用户阅读或前端处理

✅ 三种处理方式对比

方式是否推荐说明
try-catch 局部处理❌ 不推荐代码臃肿、重复多
controller 层 try❌ 不推荐会打破三层职责划分
全局异常处理器✅ 推荐解耦、统一处理、便于维护

✅ 全局异常处理器配置

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public Result handleException(Exception e) {
        log.error("全局异常捕获:", e);
        return Result.error("系统异常,请稍后再试");
    }
}

本质上是使用 @ControllerAdvice + @ResponseBody + @ExceptionHandler


四、员工信息统计(职位 & 性别)

🎯 统计目标

  1. 职位统计:每个岗位的员工数量
  2. 性别统计:男女员工占比

✅ 职位统计 SQL 示例

SELECT job, COUNT(*) AS count
FROM emp
GROUP BY job;

返回值结构:List<JobOption>List<Map<String,Object>>

可用于饼图、柱状图等图形展示。


✅ 性别统计 SQL 示例

SELECT 
  IF(gender = 1, '男', '女') AS gender,
  COUNT(*) AS count
FROM emp
GROUP BY gender;

✅ MySQL 常用函数说明

函数作用说明
CASE多条件匹配,类似 switch/case
IF(expr,a,b)条件表达式,expr 成立则返回 a,否则 b
IFNULL(a,b)若 a 不为 null,返回 a,否则返回 b

✅ 总结归纳表

模块学习重点与实用技巧
删除员工支持批量删除 + 工作经历清理,推荐使用集合参数,事务控制
修改员工分步骤:回显 + 提交,注意工作经历删除再插入,动态 SQL 优化
异常处理推荐使用全局异常处理器,统一日志输出与响应格式,提升开发效率
信息统计熟练掌握 SQL 分组统计 + CASE/IF 等函数,结合图表进行数据可视化

🧠 Day11 后端 Web 项目实战笔记(综合开发)

一、实战项目概述

📌 项目名称:Tlias 智能学习系统(后端)

✅ 本次任务目标

围绕以下模块,完成后端功能的编码与调试:

模块名称功能说明
班级管理列表查询、新增班级、删除班级、修改班级
学员管理查询学员、添加学员、删除学员、修改学员、违纪处理
数据统计班级人数统计、学历结构统计

所有功能严格按照接口文档实现,并完成前后端联调


二、实战阶段要求

要求说明
独立完成每位成员需要真正完成模块功能开发
团队协作小组内成员互帮互助,遇到问题先自己思考,再团队讨论
接口规范接口入参、出参、返回值格式要完全参照接口文档
前后端联调后端完成后,使用前端页面或 Apifox 进行接口联调与测试
过程记录对功能实现过程中的 Bug、优化点、异常处理方式进行记录与总结
演示讲解每组选一人汇报成果:功能演示 + 思路说明 + Bug 经验总结

三、开发模块建议实现方式

1. 班级管理模块

功能说明方法示例(Rest 风格)
查询列表分页 + 条件查询(名称、时间等)GET /classes?page=1&pageSize=10
新增班级表单提交 JSON 数据POST /classes
删除班级批量删除DELETE /classes?ids=1,2,3
修改班级查询回显 + 更新GET /classes/{id} + PUT /classes

2. 学员管理模块

功能说明方法示例(Rest 风格)
学员列表分页查询 + 按班级、姓名筛选GET /students
添加学员支持文件头像上传 + 学员信息提交POST /students
删除学员支持批量删除DELETE /students?ids=...
修改学员查询 + 修改接口GET /students/{id} + PUT
违纪处理标记违纪状态 / 添加记录PATCH /students/{id}/discipline

3. 数据统计模块

功能SQL 技巧接口返回值格式建议
班级人数统计GROUP BY class_idList<Map<String,Object>> 或 VO对象
学员学历统计GROUP BY education_level同上,支持生成柱状图 / 饼图数据结构

四、实战中可能遇到的问题 & 建议

问题类别常见情况说明建议解决方式
参数接收异常@RequestParam 与 JSON 提交混用搞清楚 GET 与 POST 的参数提交方式
日期格式错前端传参与 Java 中 LocalDate 不匹配使用 @DateTimeFormat(pattern=“yyyy-MM-dd”)
事务未生效多表操作时部分成功,部分失败检查是否加了 @Transactional,是否异常被捕获
外键未处理删除班级时无法删除学员手动处理逻辑外键,或添加 ON DELETE 语句
接口文档偏差实际接口返回值与文档不一致严格按照接口文档定义入参与响应结构

五、小组演示建议内容

汇报模块示例说明
功能实现说明展示模块页面和接口测试,说明数据如何从前端流入数据库
思路与流程简要画出流程图或讲解:控制层 → 业务层 → 数据层的调用顺序
Bug 经验总结举出调试过程中遇到的典型问题,如空指针、SQL 错误、分页失效等
解决方案简述通过日志排查、断点调试、API 文档核对等方式如何定位和修复

✅ 总结与建议

项目环节初学者需要关注的重点
模块职责划分理解控制层、服务层、Mapper 层的分工
接口规范掌握 Restful 接口命名、请求方式、参数格式
数据一致性掌握事务处理 @Transactional,注意回滚机制
实际操作能力能从 0 到 1 实现接口设计、测试、调优、联调
团队沟通锻炼文档协作、接口对接、问题复盘的沟通技巧

🧠 Day12 后端 Web 实战笔记:登录认证机制详解

一、登录功能实现

✅ 登录成功的本质是什么?

用户提供的用户名和密码,在数据库中存在并匹配。

✅ 核心流程

步骤说明
请求参数接收用户名、密码
查询数据库根据用户名和密码查询 emp
判断是否存在存在则登录成功,返回用户数据 + 令牌
登录失败处理返回错误信息(如 401 未认证)
SELECT * FROM emp WHERE username = ? AND password = ?;

二、登录校验(访问权限控制)

✅ 问题场景

未登录状态下仍可访问敏感接口,如 /emps、/depts,存在安全隐患。


✅ 目标:实现登录校验机制

功能实现手段
登录成功后记录登录状态使用“登录标记”如 Cookie、Session、Token 等
所有请求统一拦截、校验权限使用 Filter(过滤器)或 Interceptor(拦截器)

三、会话技术原理与对比

1. Cookie

  • 客户端存储
  • 由服务器响应 Set-Cookie,客户端后续请求自动携带

缺点

  • 用户可禁用 Cookie
  • 无法跨域
  • 不安全(可伪造)

2. Session

  • 服务器存储
  • 基于 Cookie(JSESSIONID)识别用户

缺点

  • 集群部署时 Session 不共享,需额外配置共享机制(如 Redis)

3. Token(推荐)

在移动端与分布式系统中使用最广泛的会话跟踪方案

  • 将登录状态数据编码成令牌,返回给客户端
  • 客户端后续每次请求都携带该令牌
  • 服务端验证令牌即可,无需保存状态,支持分布式

四、JWT 技术(Token 的主流实现)

✅ JWT(JSON Web Token)结构

JWT = Header + Payload + Signature
部分内容说明
Header元信息:如签名算法 {"alg":"HS256","typ":"JWT"}
Payload有效载荷,存放自定义信息,如 idusername
Signature签名,用于防篡改

✅ JWT 优点

  • 支持跨端(PC/移动端)
  • 减轻服务端压力
  • 支持分布式架构(不依赖 Session)

✅ 使用流程

  1. 登录成功后,生成 JWT:
String token = Jwts.builder()
    .setSubject("userInfo")
    .claim("id", userId)
    .claim("username", "Tom")
    .signWith(SignatureAlgorithm.HS256, secret)
    .compact();
  1. 响应返回给前端,前端保存在 LocalStorage 或 Cookie 中

  2. 前端每次请求时在 Header 携带:

Authorization: Bearer <token>
  1. 服务端在过滤器/拦截器中校验 token:
Claims claims = Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();

五、统一拦截机制

✅ 为什么需要统一拦截?

  • 避免在每个接口中都写 token 校验逻辑
  • 实现一次配置,处处生效

✅ Filter(过滤器)

特点说明
属于 Java Web 规范拦截所有资源请求(.jsp、.html、*.js)
通用性强、适合登录认证、统一编码、日志记录等操作
Filter 开发流程
  1. 实现 javax.servlet.Filter 接口
  2. 实现 doFilter() 方法
  3. 使用 @WebFilter(urlPatterns="/*") 配置拦截范围
  4. 在启动类上加 @ServletComponentScan 开启扫描

✅ Interceptor(拦截器)

特点说明
属于 Spring 规范只拦截 Controller 请求(不拦截静态资源)
控制更细粒度,适合权限控制、请求日志、请求时间统计等
Interceptor 开发流程
  1. 实现 HandlerInterceptor 接口
  2. 实现 preHandle() 方法(返回 true 放行,false 拦截)
  3. 实现配置类,重写 addInterceptors() 方法注册拦截器
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
    // 获取 token,校验通过放行
}

✅ JWT 校验 Filter 流程图

请求到达 Filter
 ↓
判断是否是登录请求(/login) → 是:放行
 ↓
获取请求头中的 token → 没有:响应 401
 ↓
校验 token 合法性 → 非法或过期:响应 401
 ↓
放行请求

六、Filter 与 Interceptor 区别

对比点FilterInterceptor
所属规范Java EE(Servlet)Spring MVC
作用范围所有请求,包括静态资源、第三方接口Controller 控制器方法请求(更精细)
执行顺序先于 Interceptor 执行Filter 执行完后才执行 Interceptor
适合用途登录校验、统一编码、跨域等权限校验、日志、性能分析等

✅ 总结表

功能模块学习重点
登录功能实现接收用户名密码、数据库验证、返回 JWT
会话技术对比Cookie / Session / Token(三种方案优缺点 + 应用场景)
JWT 使用Header+Payload+Signature,掌握生成与校验方法
统一拦截机制Filter 与 Interceptor 区别与使用流程
安全实践登录校验流程设计、401 响应机制、token 续签(可拓展)

🧠 Day13 后端 Web 进阶笔记:AOP(面向切面编程)


一、什么是 AOP?

  • 全称:Aspect Oriented Programming(面向切面编程 / 面向方面编程)
  • 定义:在不改变原始业务逻辑的前提下,将一些公共行为(如日志、权限校验、事务控制等)从业务代码中抽取出来统一管理

✅ 场景示例

统计每个业务方法执行耗时:

  • 在所有 service 方法中加时间统计?✘ 重复冗余
  • 使用 AOP 统一处理?✅ 高效、解耦

✅ AOP 优势

优势说明
减少重复代码公共逻辑抽出,不需重复写
代码无侵入原业务逻辑不需要修改
提高开发效率共性功能一次配置,全局生效
易于维护修改公共逻辑时,只需改一处即可

二、AOP 的核心概念(五大术语)

名称含义说明
JoinPoint连接点:可以被 AOP 拦截的方法或执行点(如所有方法)
PointCut切入点:实际要拦截的方法的定义规则(如 service.*)
Advice通知:定义要执行的横切逻辑(如日志、权限)
Aspect切面:通知 + 切入点的组合体
Target目标对象:被增强的原始业务类

三、AOP 快速入门实践(统计业务层方法执行耗时)

✅ 1. 引入 AOP 依赖(SpringBoot 默认已集成)

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-aop</artifactId>
</dependency>

✅ 2. 编写切面类

@Slf4j
@Aspect
@Component
public class TimeAspect {

    @Around("execution(* com.xxx.service.impl.*.*(..))")
    public Object recordExecutionTime(ProceedingJoinPoint joinPoint) throws Throwable {
        long start = System.currentTimeMillis();

        Object result = joinPoint.proceed();  // 原始方法执行

        long end = System.currentTimeMillis();
        log.info("执行方法:{},耗时:{}ms", joinPoint.getSignature(), end - start);
        return result;
    }
}

四、通知类型详解(Advice)

通知注解说明
@Around环绕通知,目标方法前后都能执行 ✅ 最常用
@Before前置通知,在目标方法执行前调用
@After后置通知,无论是否异常都会执行
@AfterReturning返回后通知,方法正常返回后执行(异常不会执行)
@AfterThrowing异常通知,目标方法抛出异常时执行

✅ @PointCut 抽取公共切入点表达式

@Pointcut("execution(* com.xxx.service.impl.*.*(..))")
private void serviceMethods() {}

@Around("serviceMethods()")
public Object around(ProceedingJoinPoint jp) { ... }

五、切入点表达式详解

✅ execution 表达式语法

execution([修饰符] 返回值类型 包名.类名.方法名(参数) throws 异常)

✅ 通配符说明

通配符含义
*匹配任意单个项(如返回值、类名等)
匹配任意层级包名 / 参数列表

✅ 常见示例

execution(* com.itheima.service.*.update*(..)) // 匹配所有 update 开头的方法
execution(* com.itheima..*.save(..))           // 匹配所有 save 方法(任意包)

✅ @annotation 表达式(通过注解匹配)

  • 适用于无法通过方法签名表达的切面需求(如指定加了某个注解的方法)
@Around("@annotation(com.itheima.anno.Log)")

六、通知顺序控制(多个切面共存时)

  • 默认顺序:按切面类名的字母顺序
  • 推荐使用 @Order 注解:
@Order(1) // 数字越小,越早执行(前置)或越晚执行(后置)

七、实战案例:记录增删改日志

✅ 日志需求

内容说明
操作人 ID当前登录员工,从 JWT 令牌中获取
操作时间当前系统时间
类名、方法名通过 JoinPoint 获取
参数与返回值JoinPoint 和 proceed() 获取
执行耗时计算方法前后时间差

✅ 切入点表达式

@Around("execution(* com.itheima.controller.*.save(..)) || " +
        "execution(* com.itheima.controller.*.update(..)) || " +
        "execution(* com.itheima.controller.*.delete(..))")

或:

@Around("@annotation(com.itheima.anno.Log)")

八、ThreadLocal 用于传递登录用户信息

✅ 问题:如何从 JWT 中解析出的员工 ID 传给 AOP 程序?

✅ ThreadLocal 原理

  • 是“线程内的全局变量”
  • 每个线程有自己独立的变量副本,线程安全

✅ 用法示例

// 设置
ThreadLocalUtils.set(currentUserId);

// 获取
Long id = ThreadLocalUtils.get();

// 清除
ThreadLocalUtils.remove();

✅ 应用流程

  1. 在 TokenFilter 中解析 JWT,得到登录员工 ID
  2. 将 ID 存入 ThreadLocal
  3. 在 AOP 或 Controller 中读取 ThreadLocal 获取登录用户信息
  4. 用完清除,避免内存泄漏

✅ 总结表

模块核心内容与关键理解点
AOP 概念统一处理共性问题的技术(如日志、安全、事务)
核心术语JoinPoint、PointCut、Advice、Aspect、Target
通知类型@Before、@After、@Around、@AfterReturning、@AfterThrowing
表达式写法execution、@annotation,支持通配符 * 和 …
实战日志案例使用环绕通知 + ThreadLocal + JWT 实现用户行为记录

🧠 后端开发进阶与总结笔记 day14(Maven + SpringBoot 原理 + 项目回顾)

一、Maven 高级用法详解

✅ 1. 分模块设计与开发

将大型项目按“模块”或“分层”拆分为多个子模块,提高可维护性与复用性。

拆分策略举例
按功能模块用户模块、商品模块、订单模块等
按系统层次controller、service、mapper、pojo、utils
功能 + 层次混合拆分例如 mall-order-controller、mall-order-service

📌 实战模块示例:

  • tlias-pojo:实体类模块
  • tlias-utils:工具类模块
  • tlias-service:业务处理模块

✅ 2. Maven 继承与聚合

概念说明
继承子模块继承父工程的依赖、插件、属性(用于版本统一管理)
聚合父工程统一构建所有子模块(用于一次性打包整个项目)
✍ 示例:
<parent>
  <groupId>com.xxx</groupId>
  <artifactId>tlias-parent</artifactId>
  <version>1.0</version>
</parent>

<modules>
  <module>tlias-pojo</module>
  <module>tlias-service</module>
</modules>
💡 附加:版本锁定
  • <dependencyManagement> 中集中管理版本
  • 子模块中无需写 <version>

✅ 3. 私服(Nexus)上传与使用

私服是团队共享 jar 包资源的仓库,上传依赖后局域网内即可复用。

上传步骤(3 部分配置):
  1. settings.xml 中配置私服账号
  2. pom.xml 中配置发布地址 <distributionManagement>
  3. 配置下载地址 <mirrors><profiles>

发布命令:

mvn clean deploy

二、SpringBoot 原理入门笔记

✅ 1. 配置优先级(从低到高)

  1. application.yaml(被忽略)
  2. application.yml
  3. application.properties
  4. Java 系统属性(-D 参数)
  5. 命令行参数(-- 参数)

💡 示例:

java -Dserver.port=9000 -jar xxx.jar --server.port=10010

✅ 2. Bean 管理方式对比

场景推荐注解
管理自己写的类@Component、@Service、@Controller 等
管理第三方类(外部 jar 包)@Bean 配合 @Configuration

✅ 3. 起步依赖机制

所有 SpringBoot 的模块都以 spring-boot-starter-xxx 开头。

示例依赖作用说明
spring-boot-starter-webweb 模块(Tomcat)
spring-boot-starter-data-jpaJPA 模块
spring-boot-starter-aopAOP 切面编程

💡 这些 starter 本质上是对依赖和配置的封装(起步依赖 + 自动配置)。


✅ 4. 自动配置原理深入理解

核心注解
@SpringBootApplication

等价于:

@SpringBootConfiguration
@ComponentScan
@EnableAutoConfiguration // ⭐ 自动配置核心注解
条件装配机制(@Conditional)

自动配置类并不是全都生效,而是由条件注解控制。

注解含义
@ConditionalOnClass存在某个类才生效
@ConditionalOnMissingBean如果容器中没有该 Bean 才注册
@ConditionalOnProperty指定配置属性成立时生效

✅ 5. 自定义 Starter 步骤

场景:将通用工具类封装为自定义 starter,如:Aliyun OSS Starter

步骤:

  1. 创建 xxx-spring-boot-starter 模块
  2. 编写配置类 + 自动装配类
  3. META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports 中声明自动配置类
  4. 引入 starter,自动注入即可使用!

三、Web 后端开发体系总结(知识图谱)

✅ 核心框架与技术栈

类型技术
编程语言Java
框架体系Spring、SpringBoot、MyBatis
架构思想三层架构(Controller、Service、Mapper)
技术能力AOP、IOC、DI、事务、异常处理
工具能力Maven、JWT、OSS、Filter、Interceptor
持久层工具MyBatis、PageHelper
安全能力登录认证(JWT)、拦截器、会话管理
部署能力打包 jar、私服发布、配置管理

✅ Web 开发常见组件梳理

类别具体内容
数据模型JavaBean、DTO、VO、PageBean
通用模块统一响应结构、统一异常处理
安全模块登录认证(JWT)、权限控制
日志模块AOP 实现操作日志记录
文件上传本地存储 / 阿里云 OSS
数据导出Apache POI 实现 Excel 导出

✅ 开发流程总结

明确业务 → 数据库建模 → 接口设计 → 后端开发 → 前后端联调 → 部署上线

✅ 遇到问题建议先看控制台 → 查看日志栈信息 → 精确排查错误位置


✅ 总结图谱

Maven 高阶:
└─ 模块化设计
└─ 继承与聚合
└─ 私服上传配置

SpringBoot 原理:
└─ 配置优先级
└─ 起步依赖机制
└─ 自动配置(@EnableAutoConfiguration + @Conditional)
└─ 自定义 Starter

Web 技术总结:
└─ Controller / Service / Mapper 三层架构
└─ MyBatis、事务管理、统一异常处理
└─ JWT、拦截器、过滤器、AOP、OSS、日志

🧠 前端 Web day15 实战笔记(Vue 工程化 + Element Plus)

一、什么是 Vue?

  • Vue 是一款渐进式的 JavaScript 框架,用于构建用户界面。
  • 官网:https://cn.vuejs.org

✅ 特点

  • 轻量、灵活、易学
  • 基于数据驱动视图
  • 支持组件化开发
  • 拥有丰富生态(Vue Router、Pinia、Vite 等)

二、Vue 工程化开发

✅ 什么是前端工程化?

企业级开发中,对前端项目结构、规范、工具、流程的标准化、自动化管理方式。

工程化目标说明
模块化将项目划分为若干独立模块,职责单一
组件化页面划分为组件,提高复用
规范化统一目录结构、编码风格、开发流程
自动化使用脚本自动构建、测试、部署等

✅ 环境准备

工具作用
Node.jsJavaScript 运行时,支撑 Vue 项目运行
npmNode.js 包管理器
create-vueVue 官方脚手架,用于创建项目
# 安装 Node.js 后,自带 npm
npm create vue@3.3.4
npm install
npm run dev

访问地址:http://localhost:5173


✅ Vue 项目结构说明

文件 / 目录作用说明
main.js项目入口文件
App.vue根组件
components/通用组件目录
assets/静态资源(图片、字体)
package.json项目信息 + 所有依赖 + 脚本命令
vite.config.js项目配置(端口、代理等)

✅ Vue 单文件组件(SFC)

Vue 推荐使用 .vue 文件来写组件:
将 HTML(结构)、CSS(样式)、JavaScript(逻辑)写在一个文件中,利于封装和复用。

<template>HTML结构</template>
<script>逻辑</script>
<style>样式</style>

三、Vue 的两种编程风格

风格特点描述
选项式 API使用对象语法定义 data、methods、mounted 等
组合式 API使用函数组合逻辑,灵活、适合大型项目 ✅ 推荐

✅ 组合式 API 核心函数

函数名用法说明
ref()定义响应式变量,访问时需 .value
onMounted()生命周期钩子,页面加载后执行
setup()所有组合式 API 代码写在这里
setup() {
  const count = ref(0);
  onMounted(() => { console.log("页面已加载") });
  return { count };
}

四、axios 异步请求(结合组合式 API)

✅ 安装

npm install axios

✅ 使用

import axios from 'axios';

onMounted(async () => {
  const res = await axios.get('http://localhost:8080/api/users');
  users.value = res.data.data;
});

五、Element Plus 简介

  • 官网:https://element-plus.org
  • 基于 Vue3 的高质量组件库
  • 提供常用 UI 组件:表格、表单、分页、按钮、对话框等

✅ 安装与引入

npm install element-plus@2.4.4 --save
// main.js 中引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

六、Element Plus 常用组件使用

📊 表格组件 <el-table>

  • 展示多条数据记录
  • 必须绑定 :data="tableData"
<el-table :data="users" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

🔢 分页组件 <el-pagination>

  • 用于大量数据的分页展示

  • 常用属性:

    • :total 总记录数
    • :page-size 每页数量
    • @current-change 页码切换事件

💬 对话框组件 <el-dialog>

  • 控制显示:v-model="visible"
  • 可嵌入表单、按钮等内容
<el-dialog title="提示" v-model="dialogVisible">
  <span>确定删除该用户?</span>
  <template #footer>
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirmDelete">确定</el-button>
  </template>
</el-dialog>

📝 表单组件 <el-form>

  • 表单项绑定值:v-model
  • 支持输入框、单选框、下拉框、多选框等
<el-form :model="form">
  <el-form-item label="用户名">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
</el-form>

七、实战案例要求(页面展示)

结合组合式 API + axios + ElementPlus,实现用户列表页:

要求技术点
页面加载时获取用户数据axios 异步请求 + onMounted
渲染表格展示用户数据el-table + el-table-column
实现分页操作el-pagination
实现新增 / 修改 / 删除操作弹窗el-dialog + 表单组件

✅ 总结回顾

内容板块技能关键点
Vue 工程化使用 create-vue 脚手架搭建项目,项目结构清晰
组合式 API学会使用 refsetuponMounted 等组合式函数
异步请求使用 axios 发请求,处理响应数据
ElementPlus熟练掌握表格、分页、对话框、表单等组件使用方式
项目实践将前后端数据结合,完成用户管理页面的展示与交互

🧠 前端 Web day16 实战笔记(Tlias 案例:部门管理模块)

一、项目背景介绍

✅ 项目名称

Tlias 智能学习辅助系统

✅ 本次开发模块

  • 开发模式:前后端分离
  • 当前前端模块:部门管理模块
  • 后续可扩展:员工管理、班级管理、学员管理等

二、前后端分离开发模式

✅ 开发模式说明

特点描述
前后端职责独立后端提供接口,前端通过接口获取数据、渲染页面
并行开发前后端可根据接口文档独立开发,提高效率
接口驱动开发所有数据交互通过 HTTP 接口完成

✅ 前后端协作流程

需求分析 → 接口定义 → 并行开发 → 单元测试 → 联调测试

三、前端布局与 Vue 路由设计

✅ 页面布局组件(Element Plus)

组件标签功能说明
<el-container>外部容器布局
<el-header>顶部导航栏
<el-aside>左侧菜单
<el-main>主内容区域

✅ Vue 路由核心组成

组件 / 对象作用说明
router 实例使用 createRouter 创建路由配置对象
<router-link>路由链接,最终渲染为 <a> 标签
<router-view>动态组件显示区域,页面切换时展示
<!-- 使用方式 -->
<router-link to="/emp">员工管理</router-link>
<router-view></router-view>

四、部门管理模块实现步骤

📌 包括以下功能

功能说明
查询列表加载全部部门数据展示在表格中
新增部门表单校验后提交新增数据
修改部门回显 + 提交更新
删除部门弹窗确认后执行删除

五、查询部门列表功能

✅ 页面布局组件

功能Element 组件
操作按钮<el-button>
数据表格展示<el-table>
表格列<el-table-column>

✅ 数据加载流程

  1. 使用 onMounted() 生命周期钩子,在页面加载时调用数据加载函数
  2. 使用 axios 发送异步请求获取部门数据
  3. 将数据渲染到 <el-table>

✅ 接口调试优化建议

  • 初期可使用 Mock.jsApifox 提供的 Mock 服务
  • 正式开发中建议封装请求逻辑:
// request.js:封装 axios 拦截器
// api/dept.js:封装每个模块的接口调用
// vite.config.js:配置代理规则解决跨域问题

六、新增部门功能

✅ 页面构成

功能Element 组件
弹出窗口<el-dialog>
表单区域<el-form>
表单项<el-form-item> + <el-input>
校验规则rules + prop + ref 组合使用

✅ 表单校验流程

  1. 定义校验规则:
rules: {
  name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
}
  1. 给表单绑定 rulesref,并调用 validate() 进行验证

  2. 校验通过 → 提交数据给后端 → 请求成功后刷新表格


七、修改部门功能

✅ 操作流程

步骤说明
查询回显点击“编辑”按钮 → 通过 ID 查询该条数据
展示弹窗填充数据 → 弹出 <el-dialog> 表单
提交修改提交后调用更新接口并刷新表格

八、删除部门功能

✅ 实现细节

  • 点击“删除”按钮时,使用 ElementPlus 的弹窗组件进行确认:
ElMessageBox.confirm('确认删除该部门吗?', '提示')
  .then(() => {
    // 确认后发请求
  })
  .catch(() => {
    // 用户点击取消
  });
  • 删除成功后刷新数据表格

✅ 总结表格:Tlias 部门管理模块开发关键点

技术模块学习关键
Vue 路由使用 router-view + router-link 实现页面切换
axios 封装使用 request.js + 模块 api 文件组织请求逻辑
页面布局使用 ElementPlus 的布局容器实现导航 + 内容区域
数据加载生命周期钩子 + 异步请求,填充表格数据
表单校验ref + rules + validate 实现数据提交前检查
弹窗操作dialog + messageBox 实现用户确认交互

🧠 前端 Web 实战笔记 day17(Tlias 案例 · 员工管理模块)

一、功能模块概览

本次开发目标是实现 “员工管理” 模块中的两个核心功能:

功能点技术关键词
条件分页查询表单绑定、表格渲染、分页组件、侦听器
新增员工动态表单项、表单校验、异步提交

二、条件分页查询实现

✅ 页面组成

区块说明
搜索栏(表单)绑定查询条件,如姓名、性别、入职日期
表格展示<el-table> 渲染员工信息
分页条<el-pagination> 切换页码

✅ 数据绑定建议

使用统一对象封装查询参数(推荐):

const searchEmp = reactive({
  name: '',
  gender: '',
  date: ['2025-01-01', '2025-12-31']
})

在模板中使用 v-model 绑定:

<el-input v-model="searchEmp.name" />
<el-select v-model="searchEmp.gender">...</el-select>
<el-date-picker v-model="searchEmp.date" type="daterange" />

✅ 查询时机(页面交互逻辑)

触发场景响应操作
页面加载后自动发送请求加载第一页数据
点击“查询”按钮重新查询
修改页码、页容量自动重新发送请求

✅ 分页组件使用(Element Plus)

<el-pagination
  :current-page="page"
  :page-size="pageSize"
  :total="total"
  @current-change="handlePageChange"
  @size-change="handleSizeChange" />

✅ Vue 组合式监听 watch()

侦听页码、页容量、查询条件变化,自动调用查询方法:

watch([page, pageSize], () => {
  fetchEmployeeList()
})

三、新增员工功能实现

✅ 页面布局组成

部分说明
弹出对话框使用 <el-dialog> 展示表单
表单使用 <el-form> 提交信息
工作经历使用动态数组绑定多段工作经历信息

✅ 表单字段组成

  1. 基本信息(如用户名、性别、手机等)
  2. 工作经历(公司、开始时间、结束时间、职位等)

✅ 表单校验规则(示例)

const rules = {
  username: [{ required: true, message: '用户名必填', min: 2, max: 20 }],
  name:     [{ required: true, message: '姓名必填', min: 2, max: 10 }],
  gender:   [{ required: true }],
  phone:    [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]
}

✅ 动态添加 / 删除工作经历项

const experiences = ref([
  { company: '', begin: '', end: '', job: '' }
])

const addExperience = () => {
  experiences.value.push({ company: '', begin: '', end: '', job: '' })
}

const removeExperience = (index) => {
  experiences.value.splice(index, 1)
}

页面中使用 v-for 渲染每段经历。


✅ 保存按钮逻辑

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await axios.post('/api/emp', {
        ...formData,
        experiences: experiences.value
      })
      dialogVisible.value = false
      fetchEmployeeList() // 刷新表格
    }
  })
}

四、watch() 侦听函数讲解

✅ watch 基础语法

watch(, 回调函数, 可选配置)
参数说明
源(第一个参数)可以是 ref、reactive、getter 函数
回调函数数据变化后执行的逻辑
第三个参数{ deep: true, immediate: true }

✅ 常用侦听方式

类型写法
侦听单个属性watch(() => user.value.name, callback)
侦听多个属性watch([page, pageSize], callback)
深度侦听对象watch(user, callback, { deep: true })

✅ 总结:员工管理模块重点复盘

项目技术点
条件查询表单封装查询条件、watch 自动联动、分页组件
表格展示使用 el-table 显示员工信息,prop 精准绑定字段
动态表单工作经历列表使用 v-for + ref 数组动态添加与移除
表单校验rules + validate + pattern 结合使用
异步请求提交axios 提交后判断响应,成功则关闭弹窗并刷新表格

🧠 Tlias 前端 Web 实战笔记 day18(终章:功能完善与部署)

一、员工管理模块:修改 & 删除


✅ 修改员工信息(两步)

  1. 点击“编辑”按钮

    • 发送 axios 请求 → 根据员工 ID 查询详细信息
    • 将返回数据填充到对话框的表单中(回显)
  2. 点击“保存”按钮

    • 调用新增/修改接口(根据有无 id 判断)
    • 表单验证通过后发送修改请求
if (form.id) {
  // 调用更新接口
} else {
  // 调用新增接口
}

✅ 删除员工信息

1. 删除单个员工
  • 点击表格中某条记录右侧的“删除”按钮
  • 弹出确认框 → 确认后发送删除请求(带 id)
2. 批量删除员工
  • 用户勾选复选框选择多条记录
  • 点击“批量删除”按钮,取出所有勾选的 id,封装为数组发送请求
const ids = selectedRows.map(item => item.id)
axios.post('/api/emp/deleteBatch', ids)

二、登录 & 退出功能完善


✅ 登录流程问题说明

当前问题解决方案
登录成功未保存 Token使用 localStorage 保存 token
每次请求需携带 Token设置 axios 请求拦截器统一处理
登录后访问页面未登录仍可访问判断无 token 或 401 状态跳转登录页

✅ localStorage 基本用法

// 存储
localStorage.setItem("token", res.data.token)

// 获取
const token = localStorage.getItem("token")

// 删除
localStorage.removeItem("token")

✅ 携带 Token 请求后端(拦截器)

👉 request 拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem("token")
  if (token) {
    config.headers.Authorization = token
  }
  return config
})
👉 response 拦截器
axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response && err.response.status === 401) {
      localStorage.removeItem("token")
      router.push("/login")
    }
    return Promise.reject(err)
  }
)

✅ 展示当前用户信息 + 退出登录

  • 登录成功后可将用户名保存到 localStorage 并在主页显示

  • 点击“退出”按钮,执行:

    1. 清空本地存储 token
    2. 跳转回登录页
localStorage.clear()
router.push("/login")

三、前端项目打包与部署


✅ 打包操作(Vite 项目)

npm run build
  • 会生成 dist 文件夹 → 里面是构建好的前端代码

✅ 使用 Nginx 部署

📦 第一步:复制 dist 内容到 Nginx
将 dist 文件夹内容复制到 nginx 安装目录中的 html 文件夹下
🚀 第二步:启动 Nginx
# 方式一:双击 nginx.exe 启动服务
# 方式二:命令行方式
nginx.exe         # 启动
nginx.exe -s stop # 停止
nginx.exe -s reload # 热重载配置
🌐 第三步:访问项目页面
访问地址:http://localhost 或 http://127.0.0.1
默认使用 80 端口

✅ 知识总结总览

模块技术点
员工信息修改回显数据、表单复用、判断是否新增或修改
员工信息删除单条 / 批量删除,使用确认框交互
登录认证优化登录成功保存 token,axios 拦截器统一携带 token
异常处理401 统一跳转登录页,避免未登录访问受限资源
前端打包与部署npm run build 构建、Nginx 服务器部署 dist 静态页面文件

这部分内容为整个前后端实战体系的收尾,是确保项目可以上线运行的关键步骤。


🧠 Day 19 项目部署笔记(基于 Linux 环境)

一、Linux 基础知识简介


✅ 什么是 Linux?

  • Linux 是一套自由开源、类 Unix 的操作系统

  • 分为:

    • 内核版:Linux 核心部分(开源、控制硬件)
    • 发行版:各种企业/社区基于内核构建的版本(带软件 + UI)

✅ 常见发行版

发行版特点说明
CentOS企业常用,稳定(推荐学习使用)
Ubuntu桌面系统友好
RedHat商业付费版
openSUSE图形界面丰富
Fedora新特性更新快

✅ 安装方式

安装方式说明
物理机安装安装在真实服务器硬件上
虚拟机安装 ✅ 推荐使用 VirtualBox / VMWare 模拟环境

✅ 远程连接工具

  • FinalShell ✅(推荐)
  • XShell / Putty / SecureCRT 等

连接成功后,即可在 Windows 系统上远程操作 Linux。


✅ Linux 路径规则

  • /:根目录,所有文件的起点
  • /home:普通用户的家目录
  • /usr:系统应用
  • /etc:配置文件
  • /var:日志、缓存

注意:
/itheima 是“根目录下的 itheima”
itheima 是“当前目录下的 itheima”


二、常用 Linux 命令速查


📁 目录/文件操作

目的命令
查看内容ls -al
进入目录cd /usr/localcd ~
创建目录mkdir itcastmkdir -p a/b
删除文件/目录rm -rf xxx

📄 文件查看/编辑

工具用途说明
cat一次性查看完整文件
more分页查看大文件
head查看文件前 n 行
tail -f实时查看文件末尾内容(如日志)
vim编辑文件(命令模式 / 插入模式 / 退出)

🔧 打包压缩

命令用途示例
打包tar -zcvf abc.tar.gz ./abc
解压tar -zxvf abc.tar.gz-C /usr/local 解压到指定目录

📦 拷贝 / 移动

命令示例
拷贝cp hello.txt /home/user/
移动/重命名mv hello.txt newname.txtmv a.txt dir/

🔍 查找命令

  • 按文件名找文件:find . -name "*.log"
  • 查文件内容:grep "关键字" 文件名

三、常用环境安装(JDK、MySQL、Nginx)


✅ 安装 JDK(例如 JDK 17)

tar -zxvf jdk-17.0.10_linux-x64_bin.tar.gz -C /usr/local
vim /etc/profile
# 添加以下内容
export JAVA_HOME=/usr/local/jdk-17.0.10
export PATH=$JAVA_HOME/bin:$PATH

source /etc/profile
java -version

✅ 安装 MySQL(8.0)

  1. 卸载系统默认的 mariadb
rpm -qa | grep mariadb
rpm -e --nodeps mariadb-libs-*
  1. 解压、移动、配置环境变量
tar -xvf mysql-xxx.tar.xz
mv mysql-xxx /usr/local/mysql
vim /etc/profile
export MYSQL_HOME=/usr/local/mysql
export PATH=$MYSQL_HOME/bin:$PATH
source /etc/profile
  1. 初始化数据库、启动服务
mysqld --initialize --user=mysql --basedir=... --datadir=...
systemctl start mysql
mysql -uroot -p临时密码
  1. 修改密码、远程授权
ALTER USER 'root'@'localhost' IDENTIFIED BY '1234';
CREATE USER 'root'@'%' IDENTIFIED BY '1234';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';
FLUSH PRIVILEGES;

✅ 安装 Nginx

# 安装依赖
yum install -y pcre pcre-devel zlib zlib-devel openssl openssl-devel

# 解压源码包并编译安装
tar -zxvf nginx-1.20.2.tar.gz
cd nginx-1.20.2
./configure --prefix=/usr/local/nginx
make && make install

# 启动 Nginx
cd /usr/local/nginx
sbin/nginx

四、前后端项目部署流程(实战)


✅ 前端部署(Vue 项目)

  1. 打包:
npm run build
  1. 上传打包后的 dist 文件到 Linux:
# 使用 FinalShell 上传到 /usr/local/nginx/html
  1. 配置 Nginx(反向代理):
location /api/ {
    proxy_pass http://localhost:8080/;
    rewrite ^/api/(.*)$ /$1 break;
}
  1. 重启 Nginx:
sbin/nginx -s reload

✅ 后端部署(SpringBoot 项目)

  1. 本地打包:
mvn clean package
  1. 上传 jar 包到服务器:
scp target/tlias.jar root@server:/usr/local/tlias-app/
  1. 后台启动服务:
cd /usr/local/tlias-app
nohup java -jar tlias.jar &> tlias.log &
  1. 查看日志 / 进程:
tail -f tlias.log
ps -ef | grep java

✅ 防火墙配置(可选)

操作命令
关闭防火墙systemctl stop firewalld
永久关闭systemctl disable firewalld
开放端口firewall-cmd --add-port=8080/tcp

✅ 总结总览

模块学习重点
Linux 基础命令格式、路径规则、目录结构
常用命令ls、cd、mkdir、rm、cp、vim、tar、grep、find
软件环境JDK、MySQL、Nginx 安装 + 配置 + 启动
项目部署前端(Nginx)、后端(jar 包)、数据库连接配置
运维建议使用 nohup 后台运行,定期检查日志 + 防火墙设置

🧠 Day20 Docker 学习笔记(初学者友好)

一、什么是 Docker?

  • Docker 是一款用于快速构建、运行和管理应用的容器化工具。
  • 目标:解决传统部署中“依赖难装、环境难配、迁移困难”等问题。

二、Docker 核心概念

概念说明
镜像 (Image)应用+环境的打包模板,如 MySQL 镜像、Java 镜像
容器 (Container)镜像运行时的实例,是一个独立的轻量级运行环境
镜像仓库用于存储镜像的服务,如 DockerHub
Dockerfile构建镜像的脚本文件,用于定义应用环境与启动方式

三、Docker 快速入门实战

✅ 安装 MySQL(镜像方式)

docker run -d \
  --name mysql \
  -p 3307:3306 \
  -e MYSQL_ROOT_PASSWORD=123 \
  mysql:8

说明:

参数含义
-d后台运行容器
–name指定容器名称
-p宿主机端口:容器端口
-e设置环境变量,如 root 密码

四、镜像与容器常用命令

📦 镜像操作

docker pull mysql        # 拉取镜像
docker images            # 查看本地镜像
docker rmi 镜像名        # 删除镜像

📦 容器操作

docker run               # 创建并运行容器
docker ps                # 查看运行中容器
docker stop 容器ID       # 停止容器
docker start 容器ID      # 启动已停止容器
docker rm 容器ID         # 删除容器
docker logs 容器ID       # 查看容器日志
docker exec -it 容器ID bash  # 进入容器终端

五、数据卷(Volume)机制

数据卷用于实现容器与宿主机之间的数据持久化与共享。

✅ 两种挂载方式

挂载方式命令示例说明
命名卷-v mysql:/var/lib/mysql
本地目录挂载 ✅ 推荐-v /root/mysql:/var/lib/mysql

✅ 数据卷操作命令

docker volume ls             # 查看所有数据卷
docker volume inspect 名称   # 查看数据卷详情
docker volume rm 名称        # 删除数据卷

六、自定义镜像(Dockerfile)

✅ Dockerfile 常见指令

指令用途
FROM指定基础镜像(如 centos)
COPY拷贝文件到镜像内
RUN构建时执行的命令
ENV设置环境变量
EXPOSE暴露端口
ENTRYPOINT启动镜像时执行的命令

✅ 构建命令

docker build -t my-java-app .

七、Docker 网络通信

✅ 网络模式

模式特点说明
bridge ✅默认模式,所有容器连到 docker0 网桥
host容器与宿主机共享网络
none容器没有网络
自定义网络允许容器通过名字互相访问,适用于服务间通信
docker network create my-net
docker run --network my-net --name mysql ...
docker run --network my-net --name app ...

八、Docker Compose 快速部署

使用 docker-compose.yml 管理多容器协同部署(如前端、后端、数据库)

✅ 项目结构准备

docker-compose.yml
tlias-server/
├── Dockerfile
├── tlias.jar
├── jdk17/
tlias-nginx/
├── html/
├── nginx.conf

✅ docker-compose.yml 示例

version: "3.8"
services:
  mysql:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: 123
    ports:
      - "3306:3306"

  backend:
    build: ./tlias-server
    ports:
      - "8080:8080"
    depends_on:
      - mysql

  frontend:
    image: nginx
    volumes:
      - ./tlias-nginx/html:/usr/share/nginx/html
      - ./tlias-nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - "80:80"

✅ 启动命令

docker compose up -d      # 后台启动所有服务
docker compose down       # 停止并清除所有容器

九、Tlias 项目部署实操总结

✅ 服务端

  1. 修改 application.yml:数据库地址为 mysql 容器名
  2. 编写 Dockerfile,配置 JDK、JAR 包
  3. 构建镜像,运行容器或使用 Compose 自动部署

✅ 前端

  1. 使用 Nginx 镜像部署静态文件
  2. 配置 nginx.conf,实现前后端联通(/api 转发)

✅ 知识图谱总结

Docker 入门:
  ├─ 镜像 & 容器
  ├─ docker run 参数详解
  ├─ 数据卷(持久化)
  ├─ 网络模式(通信)
  └─ Dockerfile(构建镜像)

Docker 进阶:
  ├─ docker-compose 多容器部署
  ├─ Tlias 项目服务端镜像构建
  └─ Nginx 容器部署前端资源

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值