前端速成计划总结： 全26h课程，包含html，css，js，vue3，预计7天内学完。
起始日期：9.16 预计截止：9.22 完结日期： 10.14
学前计划
课程来源
B站---Java程序员用学前端么？java开发所需的前端技术全教程
课程安排
学习时长总计
html，css P1-P4 3节 3h
JavaScript P5-P58 50节*10min 8h
Vue 3 P104 - P163 60节*15min 15h
合计总时长： 26h
学习目标
计划学习时长
基础： 有后端学习的基础。之前也了解过一点点前端的东西，但了解的很浅。
计划：每天按4h视频内容来算，最多7天学完。
Day--1 9.16
HTML
介绍
超文本
就是超链接，可以把不同的网页联系起来。
标记
不同的标记，赋予标记里的内容不同的含义。也叫做标签。
标准的html代码
样例
<html> <head> <body>
快捷键
文档声明
三个感叹号： ！！！
htnl的框架
一个感叹号： ！
标签
只输入标签的名字即可： img p
常见元素
Html由一系列的元素组成。感觉和标签差不多一个意思。
标签特性
1.元素之间可以嵌套。但标签不能交叉。
2.空元素，不包含内容的元素称为空元素。
、
通用属性
id ： 用于区别相同标签
title :
title 属性在 HTML 中主要用于提供额外的信息或描述，当鼠标悬停在某个元素上时，浏览器会显示该元素的 title 属性值作为工具提示（tooltip）。
示例效果
当你将鼠标悬停在上面的 <img> 标签、超链接或按钮上时，浏览器会在鼠标指针下方显示一个包含 title 属性值的小窗口。
实测有效，但没办法截图，因为需要鼠标悬停才会显示，截图时候，鼠标就消失了。
基础标签
<p>
段落标签。表示一个段落。
<br>
换行标签，会换行，页面内不可见。
<hr>
分割线标签，生成一个分割线
<h1> <h2> ..... <h6>
1到6号标题，字体大小从大一次减小。
列表类标签
<li>
<ol>
<ul>
<a> 超链接
Anchor 标签
三种链接跳转方式
#的含义
表示，是在页面内跳转
多媒体标签
表单标签
介绍
基本用法
表单项
第一次前后端代码联调测试
表单提交测试
感慨
现在看起来，很简单啊哈哈，当时不了解的时候，可算是一头雾水。
有一些顿悟的意思了，原来前端提交的数据名称，可以在标签的属性里面指定，然后后端按属性名接收。
但目前他这个代码，返回数据以后，浏览器页面就直接刷新了，肯定后面还回学其他技术，来处理返回的数据，进行展示等等。
日期格式不一致 报错
错误原因： 前后端 日期的格式不一致
CSS
介绍
主要负责控制网页展现的样式。
全天总结
今天的的话，进展不多，但也算是起了一个头，还不错。本来今天休息的，但是对出去玩没什么兴趣，于是还是学了一会儿。
Day--2 9.17
全天总结
今天呢，图书馆闭馆，所以一天都在宿舍了。前端没有进展，但是了解了一下怎么做动态壁纸，居然也是要用到前端语言实现一些动画效果的，也算蛮有意思。
再看一本书，很喜欢，米兰昆德拉的《不能承受的生命之轻》。
但是，重便是真的残酷，而轻便真的美丽？
总之，是很有哲学意味的一本书，引人深思，收获很多。
不过后面呢，大概是要加快脚步了，只剩五天了。还好这也算是在考虑的范围内吧，五天应该也差不多，加油。
Day--3 9.18
前后端交互测试
代码
后端代码有误，可能是苍穹的Rest风格代码写习惯了，修改如下
无法请求到服务器
原因
刚刚调试了半天，请求没发出去，结果是因为，前端的URL 地址少写了一个冒号
解决
localhost后加上冒号
首测成功
换一种后端请求接收写法
发现也可以提交成功
原因分析
根据浏览器控制台网络请求，发现请求方式为GET，说明表单默认提交方式为get
-
后端代码的注解组合：
@Controller注解表示这是一个控制器类。@RequestMapping("/test")注解表示该控制器的所有请求都将映射到/test路径。@GetMapping注解表示这是一个 GET 请求处理器。@ResponseBody注解表示返回的内容将直接作为响应体返回给前端。
刚刚发布了一篇博客，专门讲这个的，算是清楚为什么了。
getMapping就是只处理改路径下的get请求，requestMapping就是所有类型请求都处理。
@ResposeBody
@ResponseBody 是 Spring MVC 中的一个常用注解，它并不是新用法，而是自 Spring 3.0 版本以来就已经引入的功能。这个注解用于标记控制器方法的返回值，使得该方法的返回值可以直接作为 HTTP 响应体的一部分返回给客户端。
不小心看出了@RequestBody ，疑惑了半天
进阶测试
简单实体参数
多个参数提交
报错
MethodArgumentNotValidException
根据日志信息，问题出现在以下方面：
-
类型不匹配：
- 请求中的日期字符串
2024-09-10无法转换为java.time.LocalTime类型。这是因为LocalTime表示一天中的某个时刻（例如13:45），而不表示日期。
- 请求中的日期字符串
-
期望的格式：
- 你的代码可能期望日期字符串为
LocalTime的格式（例如HH:mm），但实际上传递的是日期格式（例如YYYY-MM-DD）。
- 你的代码可能期望日期字符串为
解决方案
你需要更改日期字段的格式，使其符合 LocalTime 的要求。或者，你可以将日期字段改为 LocalDate 或 LocalDateTime。
测试结果
只能收到其中的一部分数据
推测原因，get方式请求不能携带date，多选框等组件传递的信息
修改请求提交方式
还是不行，测试结果不变
检查请求体信息，正常
原因：tostring方法不会打印所有参数，需要手动get出来，上面的几个猜测是错误的
文件上传注意事项
method enctype
表单的熟悉值不能是默认的了，需要设置一下
理解
method 方法
enctype 编码方式
示例
测试成功
HTTP请求
表单请求方式
请求行
请求头
请求体
请求体用于携带数据
数据编码格式
application/x-www-form-urlencoded
格式：
名字=值，多组数据间以&风格
示例：
multipart/form-data
application/json
@RequestBody 表示到请求体里找数据，并且把数据按照json的数据格式转化为Java对象
数据格式小结
反引号
`` JavaScript中只有反引号才支持换行
session原理
CSS
简介
头文件引入css
元素选择器
属性和值
大概就是选择器里里面设置样式的东西
布局
布局示例
div标签
容器标签，容纳其他标签
template标签
又叫模板标签
一般开始时不会在也页面中显示
要配合JavaScript事件，来动态的把它加入到其他div容器之内
JavaScripe
介绍
第一次JavaScript语句测试
变量与数据类型
声明变量的方式
let与var的区别
能用let就尽量不要用var，用var容易出作用域的问题。
数据类型
Nullish
String
number，bigint
默认为number，常用转化方法为parseInt()
要表示整数，在数据后面加n即可
bollean
对象类型
Function
Array
Object
全天总结
今天状态还不错，但是还是没能赶上今天的计划内容。其实本来可以的，但我用一部分时间去实际写代码，解决报错什么的，还写一些分析博客。
不过虽然慢了不少，但我想收获还是有的。继续加油吧。今天还起来晚了，中午才开始学习，明天应该进度会快一些的。
Day--4 9.19
JS数据类型
对象类型
Function
注意：函数和java中的方法是有区别的。因为js是动态语言。
匿名函数
箭头函数
函数是对象
函数作用域
类似于java，如果作用域在所有方法之外，就是全局作用域
闭包重点：作用域是在函数定义的时候就确定了。
Java中也有类似的特性
lamda表达式和它的参数捕获
Array
语法
常用API
高阶函数，回调函数
Object
语法
get，set
没有私有变量的概念
属性前加下划线只是一种普遍约定而已。
控制台直接输入._name也是可以访问到的，只不过不走get方法
而如果时.name就会走get方法访问该属性
特色：属性增删
添加get，set方法
this
let 与 var 区别
主要就是作用域的区别。用let和Java中的作用域用法更像。
继承
继承示例
原型继承
函数的prototype相当于是，你可以自己在这个属性上加一些模板属性和方法。
一点理解：
1.函数的prototype相当于是，你可以自己在这个属性上加一些模板属性和方法。然后这个子对象就会根据你在prototype里设置的模板来创建
2.原型继承，就是直接以对象实例为依据去继承。继承的方式就是先定义好父对象，然后用Object.creat()方法，传递父对象进去，然后创建子对象。而子对象特有的方法和属性，是在后续在加上的。
3.java的继承发生在类上，js的继承发生在对象上
Json与js对象的关系
格式上的相似
区别
json字符串与js对象的转换
动态类型语言JS
运算符，表达式
基础运算符
、
严格相等
逻辑或运算
值1 || 值2
总结：如果值1是truthy ，返回值1，值1是flasy，返回值2.
双问号，问好点
双问号
值1 ？？值2 如果值为nullish ，返回右边 ，反之，返回自身
问好点
?. 就是在访问属性的时候做一个判断，如果属性为nullish，则短路返回undifined
展开运算符
注意：展开表达式的复制，属于浅拷贝
合并对象时，后定义的属性会覆盖先定义的同名属性
解构赋值
控制语句
for in
for of
try catch
nvm，Nodejs下载
需要去git官网发布页
配置下载的国内镜像地址，查看可用的版本
好烦，下载的太慢了，也可能是镜像地址没设置成功
总之半天没能解决这个问题。
也许是网速太慢了，等我回宿舍了再试试。
全天总结
今天总的来说，情况还不错，该学的时候都在学习，继续保持吧。要不是最后下载出来点问题，可以一直把api部分学完 。但目前情况看来，api之内留到明天学了。
Day--5 9.20
下载Nodjs npm
忙了早上好久，终于快要下载好nodejs和npm了
镜像网址
淘宝的镜像地址目前我访问不了，京东和华为的镜像地址都可以用
更新npm
因为我不能用nvm自动下载nodejs和npm，所以我是自己直接去镜像资源网址下载的，然后安装到nvm的目录下了。
但是npm版本有点问题，就更新了一下版本。
配置环境变量
我丢，服啦，本来都是那个安装程序自动完成的，结果出问题，都得我自己来弄。
唉，不过也确实熟悉了这一套操作也挺好的，今天昨天，输了一堆命令，改配置文件，找镜像资源网址。也算是锻炼了能力，同时加深了理解。
初始化工程
更改配置
导包相关的一个配置
node命令在终端用不了，cmd就能用
api部分
课前配置
导入前端代码
后端服务启动
数据库连接，创建表
查询api
document.querySelector('')
查询，返回所有匹配到的元素中的第一个。
document.querySelectorAll（）
document.getElementById()
注意
quert方法调用时要符合规范，class加. id加#
修改api
innerHTML（）
可以再内容中加html标签，标签会被解析
textContent（）
不会解析html标签，只会以文本的形式添加。
清空某一个标签
用以上两个方法，设置值为空字符串 '' 即可
利用模版
复制一个对象
document.importNode(row, true)
第一个参数 ：复制的对象 第二个参数：是否连着子标签一起复制
获取一个标签里的所有内容
tp.content
建立父子关系
tbody.appendChild(newRow)
同步接收结果 异步接受结果
前端接收后端数据的API
跨域
同源策略
当浏览器访问前端页面时，前端页面会返回一个前端页面的副本给浏览器，然后浏览器继续访问，如果访问的资源也是前端服务器，那请求可以正常返回。但是如果访问的是其他的服务器，为了确保数据安全性，浏览器不会接受这个响应。
解决策略
给后端返回的响应头加一个属性，表明这个请求可以被哪些地址访问
刚刚测试同步异步请求遇到一个报错
查了一下，感觉可能是数据库没连上，重启了一下mysql服务但还是报错
突然感觉是配置文件没改，看了一下还真是，要改成自己数据库的名字
我的配置文件修改后，还是报错
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/架构_students spring.datasource.username=root spring.datasource.password=123456
注意事项： 数据库的名称不能带中文，否则还会报错
再次修改后，成功运行服务
请求发送成功了，但数据为空
这是因为处理后端数据的方式不对，修改如下
同步异步请求测试成功
代理解决同源跨域问题
使用代理，就不会发生跨域
配置代理，下载插件
修改启动类代码如下，可以正常启动服务
导入导出
导出语法
导入语法
Day--6 9.21
嘶，被夸了，有点开心哈哈。谢谢哦~
第一次建构Vue项目
项目构建
运行Vue服务器的命令
刚刚找了半天呜呜呜
全天总结
今天学习上还行吧，但是Vue这的安装下载又用了好多时间，有点烦呢，不做了，明天再学吧，最后一天了，时间可能不太够。但也就是了解一下前端，需求也不高，后面最后一天结束后就直接继续后端开发了。
哎呀，服了，原来刷新一下页面就可以搞定插件的问题
害的我搞了好久，啊啊啊
好吧，还是不能轻易放弃前端的，要好好学，不能轻易放弃，我将来可得做全栈的。
回宿舍了继续学，心情好多了哈哈哈，加油加油。
Day--7 9.22
星期天，休息了一天。
Day--8 9.23
今天突然对社科政治哲学感兴趣，了解学习了一天相关的知识。虽然没有推进计划，但也解决了我不少困惑，感觉是成长不可或缺的一步。
Day--9 9.24
运行vue项目的命令
到命令提示符，输入命令： nmp run dev
修改启动端口号
代理服务器配置成功，解决跨域问题
vue工程目录结构
Ts入门
安装编译器
npm install -g typescript
数据类型
变量类型声明
注意：很多可以进行类型推断的时候，可以省略类型声明
定义复杂类型
可选属性 ？：
注意： 可选属性，要注意调用时的undifind处理。
鸭子类型，ts中的类型检查特点
方法定义
字面量类型
Nullish类型 null undifind如何使用
泛型
定义泛型
使用泛型
泛型函数定义
意义
1.给了用户更好的提示
2.越来越多的框架使用了TS，可以更好的阅读源码
3.可以使用泛型等，给了编译时的类型检查等，增加代码健壮性。、
类，class语法
入门案例
响应式变量
两种方式，变为响应式数据 ref reactive
只有响应式变量才会自动更新，普通变量不会自动更新。
普通变量调用函数转为响应式变量
reactive只能包装对象，ref都可以包装
在js中，调用响应式对象的值的方式不同
案例效果
属性绑定
代码示例如下
图片属性前加 冒号 ：
计数器加减案例
表单数据绑定
单项绑定，不推荐
只会把js的数据同步到页面，不会把页面同步到js
双向绑定
v-model 属性，绑定对象的id
计算属性
优势：缓存，只做一次字符串拼接
使用场景： 当一个值需要多次被调用时，使用这个函数
xhr基本使用
xhr上传数据
与fetch相比，xhr功能更强大
代码测试成功
Axios库使用
安装第三方库
安装好后可以在配置文件的依赖项中找到
实战案例
后端自己写的，前端学着写的
Onmounted（）函数
页面组件加载完成后执行
全天总结
今天的进度还可以，算是第一次真正用Vue进行了前后端代码的同时编写和测试，感觉很不错哈哈。但是Vue还不能结束掉，估计明天还得一天才行。尽可能明天就给它结束掉。加油。
Day--10 9.25
提交表单数据
前后端代码
前后端测试结果
vite环境变量
实战案例
发送成功
axios拦截器
在发送和接受请求时，做统一的逻辑处理。
请求拦截
发送成功
响应拦截
响应拦截器做全局异常处理
条件与列表
控制循环 v-for
示例：根据students来循环，临时变量为s
完整代码
响应结果
Day--11 9.26
监听器
代码测试
会话存储，本地存储
确保页面刷新后数据不丢失
Vueuse --- 常用第三方库
下载第三方库
Usecounter UseMouse
useStorage
作用
提供了大量的已经封装好的响应数据。
VueUse 是一个基于 Vue 3 的实用工具库，它提供了一系列的组合式 API（Composition API）函数，可以帮助你更方便地处理常见的任务。VueUse 包含了大量的功能，如状态管理、浏览器 API 封装、响应式数据处理等。
VueRequest --- 常用第三方库
用于简化发送请求部分的代码
代码测试
分页use
报错
分析得出
由于我自己建的数据库表为gender字段，所以查询显示不存在sex字段，修改mapper接口，还需要修改一下表结构，把12改为男女。
修改如下
数据发送成功，但不显示结果
修改前端代码后显示成功
Day--12 9.27
今天国庆放假，感觉最近前端学的有点无聊了，倒不是难，是一下子接触太多新的东西，来不及消化，感觉有点疲惫，总之就是不太想继续学了。就看了些社科方面的东西，算是找点兴趣放松放松吧。
Day--13 9.29
嘶，我就说这么久为什么我的测试总是不显示性别，原来是我用自己建的表，性别字段是gender，但是前端传的是sex，改过来以后算是成功了
记录数不显示是因为我原本没有传递map集合，没有分装记录数和页数的数据，修改后成功
分页UsePage
这段代码确实就不那么好理解了，不过认真听一遍，还是没问题的。
子组件
会自动导入，直接加标签就行。
ant-design-vue
作用：帮助我们把界面做的更好看
导入组件库
vue中引入组件库样式
注意：最新的样式文件已经换了 是 reset.css
表格样式应用成功
vue-router
作用：在多个组件之间跳转
pinia
作用：实现多个组件间的数据共享
Day--14 10.10
计划：
国庆这些天没能继续学前端，也有好一段时间没更新了。不过这几天很开心，一点也不后悔。昨天刚坐火车回学校，休息调整了一天。从今天开始继续我的学习任务，希望可以在寒假找到一个后端开发实习。目前最近的计划是3天结束掉这个前端的了解学习。
ant-design-vue
作用：帮助我们把界面做的更好看
<a-table>
分页 { usePagination }
搜索
删除
因为发现自己的后端还没写删除接口，所以先写了一下
测试结果这里也是没有任何问题啊。就是一开始的时候忘记了那个id是路径参数，所以删除失败，找了好一会儿的问题。
删除选中
复选框的显示，是通过标签的属性row-selection来设置
Day--15 10.13
vue-router
作用：在多个组件之间跳转
具体的路由相关代码
路由的嵌套
布局
实现方式：atdv 中的组件 Layout
图标二次封装
下载相关依赖包
使用方式
1.直接引入相关包之后，在代码内加标签
2.对图标进行二次封装
效果展示
单文件组件
特点，以.vue结尾
函数式组件
案例
jsx格式组件
下载支持该格式的插件
修改配置文件
使用方法
动态路由和菜单
原来权限管理是在后端数据库做的路由地址，有意思
最初设置了所有用户都可以看到的静态路由，然后再更具查询用户的身份不同，返回给前端不同的路由表，然后前端将路由表动态的添加到路由中，来实现不同用户可以访问的不同资源。
本地存储路由
作用：避免刷新页面后路由数据丢失
动态菜单
通过动态菜单，结合前面配置好的路由，就可以实现菜单的路由跳转效果
Day--16 10.14
router -令牌
主页用户名显示
实现思路： 从token中拿到用户名，然后存储到浏览器的本地storage，然后再显示到用户名的位置
没登录默认跳转至登录界面
实现思路： 通过router的beforeEach方法
第二段代码的作用是，给每个页面添加标题
项目中的根目录，其实只有一个html页面，就是index.html
前端的token携带
实现方法：在request.ts中利用请求拦截器全局配置token参数
pinia
作用：实现多个组件间的数据共享
安装插件包
使用方式
共享数据中的方法
用于将共享数据存入数据库和刷新页面时的加载数据
完结撒花
从整体上看，前端的学习并不是很顺利，前前后后没想到战线拖了这么长。前端的学习对于后端的人来说还是需要适应一下的，不然看起来确实感觉很繁琐，复杂。
从html，css页面学习再到js，ts语言学习，再到最后的Vue框架学习。感觉有些力不从心可能是因为学习的进度和内容的变化太大了，基础不稳固，所以总感觉有些急躁。当时学java到javaweb再到苍穹外卖项目，可是用了整整一年的断断续续的学习。
后续可能还需要继续加强自己对于完全全新的知识的学习能力，这段经历对我也是非常有帮助，总算是揭开了前端神秘的面纱。
目前能达到的水平大概是，不能完成从0手写一个页面。但是让我做的话，查查改改，再结合ai做出来一个项目应该还是没有问题的。
确实是有种打通任督二脉的感觉，前后端都了解之后。
后续的话，可能来不及自己实战写一个前端项目了，毕竟是做后端嘛，其实也无伤大雅。打算复习一下后端知识，再了解一下jdbc以后，就要进入微服务学习了。
lyf我爱你。
在此也祝各位看到此文章的小伙伴学习顺利，生活开心，早日找到实习，拿到offer，加油。
真的，确实学习的过程会有太多的不确定和想要放弃的时候，但还是要坚持，因为最美的风景也正是在此之后，才会被那个更好的你所发现。
扫一扫
1377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
