当前位置：首页 > article >正文

学习笔记：黑马程序员JavaWeb开发教程(2024.10.27)

article 2024/11/4 18:51:46

P3 Day01-02

需要记住：

P4 Web前端开发

P34 Ajax介绍

对于异步交互的举例：浏览器中输入不同的关键词，会有不同的提示，但是浏览器没有进行刷新

同步，会进行等待，在浏览器中访问链接，点击网页什么的，都是同步。异步不用等待服务器响应，可以执行其他操作

原生的Ajax进行操作时，主要分三步，第一步创建XMLHttpRequest对象，来和服务器端进行数据交换；第二步调用其中的open方法来设置请求方式和请求路径，并且调用send方法来发送异步请求；第三步获取服务器端响应的数据，需要监测XMLHttpRequest的状态变化，一旦状态发生变化，就触发写好了的函数，函数当中的条件成立，说明请求成功，就可以拿到服务器端响应的数据，并且奖响应回来的数据，填充到div1这个div区域中。

程序可以参考W3C中的参考手册，为什么是4和200.在参考手册中的Ajax的对象属性中写了

在代码中常见document.getElementById，这样的方法使用，其中document是一个接口

3.2 Axios2

Axios是对Ajax的封装，简化书写，快速开发

如何使用Axios：使用script引入Axios的js文件<script src=”js/axios-0.18.0.js”></script>，使用Axios发送请求，并获取响应结果，使用get方式需要传递参数，可以在url后面通过？key：values的方式来传递参数；post请求，的请求参数是在请求体中传递的，在Axios中，使用date来传递所传递的请求参数。

获取服务器端响应回来的数据，要加上.then，在里面加上函数，课程使用的是箭头函数的的形式，在Ajax请求成功后，自动调用该函数。

Result.date中拿到result中的date属性，而date属性中就封装了来自服务器端响应回来的数据

实操的时候，发现给的URL用不了，会导致接口错误

为了简化书写，Axios提供了请求方式别名

案例的URL也用不了，新的URL：https://yapi.pro/mock/401965/user/getById

在老师14：28的演示中，有表头和数据，但是自己拿案例代码跑出来只有表头，原因是因为自己的案例代码中没有名字为tom的那个数据代码

在vue中发送异步请求，只要使用他生命周期中的钩子函数就行

因此声明一个钩子函数mouted，在里面发送异步请求，加载数据即可（钩子函数补充如下）

使用上面学到的axios方法得到数据，之后将数据赋值到emps

This.emps = result.date.date//站立是将当前vue对象的emps被数据赋值

整个的流程，先创建vue对象，vue对象创建完成并且挂载完毕之后，会自动触发这个钩子函数，在钩子函数中发送异步请求，并且加载数据，然后将加载的数据赋值到数据模型emps

接下来使用v-for来遍历展示emps中的数据，使用插值表达式的形式输出数据；图像不能使用插值表达式，要使用属性绑定v-bind；性别展示因为1展示为男，使用用条件表达式v-if

自己写代码的时候，出现了一些小错误，比如拼写什么的

Img :src因为是img v-bind:src的简写，在这里写的时候，src前面多写了一个空格，然后出现报错

3.3 前端工程化

3.4 前端工程化-环境准备

NodeJS安装失败了，直接跳过前端从P50开始看了

4.1 maven课程介绍

4.2 maven-概述-介绍&安装

4.3 maven-idea集成-配置及创建

4.4 idea集成-导入maven项目

4.5 maven-依赖管理-依赖配置

评论区有一个评论说，现在的版本和老师的版本不一样，会报错，全部下载最新的就行，但是下载最新的maven也就是maven3.9之后，还是出现了报错

经过一番排查下来，发现自己用的是idea2019，应该是和maven3.9不适配，改成maven3.6之后就没问题了

现在的配置是idea2019+Java8+maven3.6

4.6 maven-依赖管理-依赖传递

A依赖B，B依赖C，B中的依赖也会传递到A，也就是C会到A

当A不需要C的时候，可以通过<exclusion>这个标签排除依赖

4.6 maven-依赖管理-依赖范围

4.7 maven-依赖管理-依赖范围

Maven默认的打包时不会把依赖打包进来，注意范围是被分为了主程序、测试程序、打包（运行）

4.8 maven-依赖管理-生命周期

生命周期不是一根线，是分为好几套生命周期，生命周期下面又有一些阶段

在一套生命周期中，必须先运行前面的再运行后面的，后面的依赖于前面

在文件目录下输入cmd，可以在该文件目录下执行命令行指令

Maven本质是一个插件执行框架，他的工作但是由插件完成的

4.9 web入门-课程介绍

4.10 web入门-springBootWeb-快速入门

pring Initializr Error

Initialization failed for "https://start.aliyun.com/

Please check URL, network and proxy settings.

Error message:

Error parsing JSON response

在创建项目的时候，因为已经到2024年，更新到不能使用Java8,因此选择换用阿里云镜像源，但是使用阿里云镜像源还是出问题，以为idea设置的问题，更改设置后，仍然失败；怀疑是校园网的问题，换成手机热点之后还是有问题，最后在评论区得到答案：idea2020之前的都不能用阿里云的镜像源

在重装的过程中，发现，装了Java17之后，java -version之后，出现了的Java8版本，但是在这个时候，已经删除了Java8在path和JAVA_HOME中的环境变量经过排查之后发现，jdk1.8安装时会自动配置一个环境变量在path里并置顶了，所以只需要把自己配置的jdk17的环境变量上移到jdk1.8自动配置的环境变量之前即可

重装之后，版本是idea2023+maven3.9+springboot3.3.4，暂时没有再出现由于版本不相同导致的报错

加上@RestController之后，就从普通类变成了请求处理类

还要指定方法处理的是那个请求，@RestquestMapping(/”hello”)，这句话的意思是浏览器请求/hello这个地址，最终会调用这个方法

启动程序需要运行启动类中的main方法

运行时报错：ERROR 17792 --- [springboot-web-quickstart] [ main] o.s.b.d.LoggingFailureAnalysisReporter

原因是8080端口被占用，结束进程就可以了