前后端学习的交界
一、总结
今日成就：先是为前几天的前端学习做了收尾工作，重点掌握了 Ajax 与 axios 的基础用法；接着正式迈入后端学习的大门，初次接触并认识了 Maven 这一强大的项目管理工具 —— 不仅完成了 Maven 的环境配置，还尝试在 IDEA 中创建 Maven 项目，深入了解了 Maven 在 IDEA 中的集成方式以及核心的依赖管理机制；最后还补充了测试相关的基础知识点，初步学习了单元测试中的断言方法与常见注解的使用。
二、复盘
（一）Ajax和axios
- Ajax：前端与后端进行异步数据交互的核心技术，可实现在不刷新页面的情况下向服务器发送请求、获取数据并更新页面内容，是提升用户体验的关键技术之一。
- axios：基于 Promise 的 HTTP 客户端，用于简化 Ajax 请求的编写流程，支持浏览器端和 Node.js 环境，能更便捷地处理请求拦截、响应拦截、请求取消等场景，是当前前端项目中常用的请求工具。async和await可以将异步操作变为同步操作
代码示例- 在本段代码中：
通过<script src="https://unpkg.com/axios/dist/axios.min.js"></script>引入 axios 库，利用 axios 封装的 HTTP 请求能力实现 Ajax 异步交互（替代传统原生 Ajax 的复杂写法）。 向后端接口发送请求，获取数据并更新到页面（通过 Vue 的数据绑定实现视图刷新）。 - 请求目标：调用后端接口
https://web-server.itheima.net/emps/list，传入查询参数（姓名、性别、职位），获取员工列表数据。
参数传递：通过 URL 查询字符串（?name=xxx&gender=xxx&job=xxx）携带参数，参数值来自 Vue 实例中searchForm对象的属性（this.searchForm.name等）。
两种异步处理方式：- 传统链式调用（注释部分）：使用
.then()处理请求成功的回调，将返回的result.data.data（接口返回的员工数据）赋值给empList，实现页面数据更新。 async/await语法（实际使用）：通过async标记异步函数，await等待 axios 请求完成，简化异步代码的写法（避免回调嵌套），逻辑更清晰。
- 传统链式调用（注释部分）：使用
- 在 Vue 的
mounted钩子函数中调用this.query()，实现页面加载完成后自动发起请求，初始化展示数据。
定义clear方法：清空查询表单后重新调用query()，实现 “重置并重新查询” 的功能，体现了 Ajax 异步刷新的特性（无需刷新页面即可更新数据）
- 在本段代码中：
-
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data() {return {searchForm: {name: '',gender: '',job: ''},empList: []}},//钩子函数mounted 页面挂载后直接发起ajax请求展示数据mounted() {this.query();},// methods : { }调用 data 中的数据需要 this.methods: {// query() {// //发送Ajax请求，获取数据// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {// this.empList = result.data.data;// console.log('查询结果:', result.data.data);// })// },//async await 将异步操作变为同步操作，便于维护async query() { //代替了成功回调方法let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {this.empList = result.data.data;console.log('查询结果:', result.data.data);})},clear() { //清空表单项数据this.searchForm = { name: '', gender: '', job: '' };this.query();}}}).mount("#container");</script>
（二）Maven
- Maven 核心定位：一款强大的项目管理与构建工具，主要解决项目依赖管理混乱、构建流程不统一的问题，能自动下载依赖包、管理依赖版本冲突，规范项目目录结构。
- Maven 环境配置：包括下载 Maven 压缩包、解压后配置环境变量（MAVEN_HOME 与 Path）、验证配置是否成功（cmd 中输入mvn -v）、以及修改 settings.xml 文件（指定本地仓库路径、配置镜像源以加速依赖下载）。
- Maven 在 IDEA 中的集成与使用：在 IDEA 中配置本地 Maven 路径（指定 Maven_home 与 settings.xml 文件位置）、创建 Maven 项目、认识 Maven 项目目录结构（src/main/java、src/main/resources、src/test/java 等）、通过 pom.xml 文件管理项目依赖（在 dependencies 标签中引入所需依赖的 groupId、artifactId、version）。同时了解了maven的生命周期（clean -> compiler -> test -> package -> install等）。
-
xml文件配置
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.juzixiong</groupId><artifactId>maven-project01</artifactId><version>1.0-SNAPSHOT</version><!-- 依赖配置 --><dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>6.2.10</version><!-- 排除依赖 --><exclusions><exclusion><groupId>io.micrometer</groupId><artifactId>micrometer-observation</artifactId></exclusion></exclusions></dependency><!-- Junit Jupiter 依赖 --><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter</artifactId><version>5.10.2</version></dependency></dependencies></project>（三）测试基础&单元测试
- 单元测试核心概念：针对代码中最小的可测试单元（如方法、类）进行测试，验证其在特定输入下的输出是否符合预期，是保障代码质量的重要手段。一般采用白盒测试，而集成测试
- 单元测试断言：用于判断测试结果是否符合预期的方法，常见断言包括判断两个值是否相等（assertEquals()）、判断值是否为 true（assertTrue()）、判断值是否为 null（assertNull()）等，当断言失败时，单元测试会抛出异常并标记为失败。
以下是UserService 以及对应的UserServiceTest文件
public class UserService {
// public static void main(String[] args) {//单元测试 => 使用Junit测试框架//根据身份证号码计算用户年龄public int getAge(String idCardNumber) {// 从身份证号码中提取出生日期String birthDate = idCardNumber.substring(6, 14);// 解析出生日期为日期对象LocalDate birth = LocalDate.parse(birthDate, DateTimeFormatter.ofPattern("yyyyMMdd"));// 计算年龄int age = Period.between(birth, LocalDate.now()).getYears();// 返回年龄return age;}//根据身份证号码判断用户性别public String getGender(String idCardNumber) {if(idCardNumber.length() != 18 || idCardNumber == null) {throw new IllegalArgumentException("无效的身份证号码");}// 从身份证号码中提取性别位String genderCode = idCardNumber.substring(16, 17);return Integer.parseInt(genderCode) == 1 ? "男" : "女";}}- 测试类与方法设计：测试类名以
被测试类+Test命名（UserServiceTest），测试方法以test+被测试方法名命名。
- 断言的应用：
- 验证返回值是否符合预期（
assertEquals）。 - 验证异常是否正确抛出（
assertThrows），确保异常处理逻辑有效。
- 验证返回值是否符合预期（