前后端学习的交界

一、总结

今日成就：先是为前几天的前端学习做了收尾工作，重点掌握了 Ajax 与 axios 的基础用法；接着正式迈入后端学习的大门，初次接触并认识了 Maven 这一强大的项目管理工具 ------ 不仅完成了 Maven 的环境配置，还尝试在 IDEA 中创建 Maven 项目，深入了解了 Maven 在 IDEA 中的集成方式以及核心的依赖管理机制；最后还补充了测试相关的基础知识点，初步学习了单元测试中的断言方法与常见注解的使用。

二、复盘

（一）Ajax和axios

Ajax：前端与后端进行异步数据交互的核心技术，可实现在不刷新页面的情况下向服务器发送请求、获取数据并更新页面内容，是提升用户体验的关键技术之一。
axios ：基于 Promise 的 HTTP 客户端，用于简化 Ajax 请求的编写流程，支持浏览器端和 Node.js 环境，能更便捷地处理请求拦截、响应拦截、请求取消等场景，是当前前端项目中常用的请求工具。async和await可以将异步操作变为同步操作

代码示例
1. 在本段代码中：
  通过 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 引入 axios 库，利用 axios 封装的 HTTP 请求能力实现 Ajax 异步交互（替代传统原生 Ajax 的复杂写法）。向后端接口发送请求，获取数据并更新到页面（通过 Vue 的数据绑定实现视图刷新）。
2. 请求目标 ：调用后端接口 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 请求完成，简化异步代码的写法（避免回调嵌套），逻辑更清晰。
3. 在 Vue 的 mounted 钩子函数中调用 this.query()，实现页面加载完成后自动发起请求，初始化展示数据。
  定义 clear 方法：清空查询表单后重新调用 query()，实现 "重置并重新查询" 的功能，体现了 Ajax 异步刷新的特性（无需刷新页面即可更新数据）

javascript 复制代码


<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 复制代码

<?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文件

java 复制代码

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），确保异常处理逻辑有效。