折乙

从2.3到3.6绩点, 我做了什么一个计算机学生大二上期末考后的一些思考

Thu, 05 Feb 2026 00:00:00 GMT

本文未经任何AI润色, 如有错别字,语病等问题, 我心情好就改

闲话

正如我的副标题所言标题是瞎扯的, 不过倒是事实; 2.3的绩点我大一下的学期绩点; 那学期我刚转完专业飘了,以及当时觉得自己不可能用的上绩点了, 压根没好好上过几门课期末考也瞎考的所以考得差; 3.6则是本学期(大二上)的学期绩点 ~~其实完全没达到我预期目标好烂啊喂~~;

原本我是抱着证明我 想做的话什么都能做到的哦, 就算是保研什么的也只是我选择了不去追求而已 的心理, 想这学期考个超高分, 结果给两三门平时好好学的课背刺了掉的就剩这点了

不过这学期也是我大学一年多以来在学业上最努力的一学期了, 想稍微记录一下自己的辉煌~~虽然也没多辉煌~~, 另一方面是想分享下学习方法

嘛众所周知呢, 在大学里绩点4.0+的一大把, 也就是我这点成绩压根没啥好炫耀的, 那为什么我还要写这篇文章呢?

首先, 虽然考得好的人多, 但是同时会愿意主动分享学习方法的也没几个; 在此之上, 会分享学习方法又会写文章记录的更少了; 就算有也不一定和你一个专业;

另外虽然我有的科考得差但我也有的考得好啊, 抛开考得差的科目我每一科都考得很好!

考得差的科目我少说几句不就是了, 哎哎

另外，平时分怎么刷我不讲怎么让数字性质的人体在课堂而物理性质的人体不在课堂也不可能讲

方法类总述

首先我觉得我没什么学习的才能, 我考得好的科目大家花像我这么多的时间并且用对地方肯定也能考很好; 而且我一个期末一共考了10门(因为转专业补课多考了3门程序设计基础C, 离散数学, 线性代数), 正常考的不像我这么多平均每门课会有更多的时间来复习绩点自然更高;

我也自知没有速成的才能, 所以对期末考的准备从14周就开始了(包括学还没学的科目), 我的期末考期间因为考的科目多没有多少额外复习的空闲时间

众所周知刷卷子是很重要, 我那时候就印了两本试卷(最后大概做了一半)

(图为其中一本)

既然要刷卷子 那哪里找卷子呢?

老师钉钉, Q群, 微信群直接发的
学习通对应课程的学习资料, 如高数,大物都可以从这找到
浙江工业大学课程攻略共享计划
找学长学姐要

卷子除了思政类这种感觉刷了题也没啥用的, 一定要每科都搞到几套; 相信自己认识的学长学姐一定是有的, 扯下脸皮向他们要, 他们一般都是愿意帮助你的, 毕竟每个人都这么过来的 学长学姐也是被他们的学长学姐帮助着过来的

复习大纲之类的除非确定是能限定考试内容的(如思政类) 不然感觉没什么必要性, 你直接网上找复习材料也一样用

理想情况我觉得应该预留一周专门用来刷卷子, 在此之前把所有科目都学完, 我的情况最后就剩了半周, 因为突然发现写数据结构课设 和 计网课设 花了很多时间, 有几个科目最后变成了考前一两天突击复习和刷卷子所以考烂了

部分理工科学习部分就是靠Gemini+看课本+b站搜点辅助视频来自学全部内容, 个别是纯上课学的, 计网是跟b站课学的

期末复习阶段除了两个思政类科目, 总的复习思路都是刷卷子找不会的→问Gemini or B站上搜相关视频来学会 →再做相关题目

85+科目经验分享

按成绩从高到低讲吧; 其实我觉得没到90的科目都不算考得好大概看点学习思路就行

程序设计C

容我skip; 这学期会考这门是因为转专业补课; 我一个大二上考这成绩只能说正常, (主要是我压根没学)

数据结构

首先我很惊讶我很这么高, 不是因为我学的不好, 是这卷子出的确实太难了

虽然我觉得老师发的模拟卷是有点简单了吧, 不过这神秘的考卷题量大抵是模拟卷的两倍, 我考试的时候一拿到就一直写写到考试结束, 大题全是画图和手写代码; 最后还险些选填忘抄到答题卡上, 还好我以高考锻炼出来的紧急手速, 在肾上腺素加持下以自己都难以相信的手速写下狂草, 填空题有两三空抄出来的我自己都看不懂百分百是要被算错的, 考完试出来双腿发抖都没力气骑自行车回宿舍了

言归正传讲下我怎么学的

一学期下来的学习进度大概如下

开学1~5周就实验跟着写了课没另外学

有一说一数据结构实验自己写感觉还是有用的, 毕竟是实实在在的学代码的东西

花费时间约9h, 每次实验1~2h, 偶尔上课有假装听一听(

6~8周期中考备考认真学了学, 期中考考86

这感觉是一门学科考好的基本了, 期中考都考烂了期末考拉回来有点难; 一方面会丢了好几分, 一方面你自己估计都不信自己能学好了, 再一方面期末复习的量会大大增多;

复习材料就对着课本自学, 把相关问题问了问gemini, 然后再刷了点王道的数据结构书

时间约为9h

9~13周

基本没学还是就写写实验, 个别一两个实验还不是自己写的

少于7h

14~16 期末复习(学习·)

学完课本剩余内容大概花了9h

学习方法

课本+gemini答疑
看B站视频

推荐此UP这一系列视频, 主要是方便一个知识点一个知识点的碎片的学, 不用从头跟到尾, 以及数据结构动画非常方便理解

另外复习的时候要注意要把各类数据结构的经典例题看一眼, 你可以不做, 但是得看一眼; 因为数据结构题目会用到的一些的专有术语, 题目想要你做的事情你没看过是不明白的;

学完所有课本要求的数据结构和算法, 再稍微看眼例题后能不能考好就看你的代码水平了; 数据结构相关画图题很多你也不用刷过, 相关的知识点会考场上就能推; 代码题也是如此

写卷子+复习约5h

复习完全可以看王道的数据结构考研书

科技传播叙事与话语博弈是通识课 skip; 另外不对英语和国际事件感兴趣别选这门课

大学物理II B

好好听课的几门课里唯一一门坚持与努力得到回报的科目

因为这门课一半多学习时间都是上课学的这里主要讲下我对于上课好好听和期末考考好之间的关系的思考

前面的数据结构就是经典的自学出来的成绩

另外两门我上课好好听的了是

离散数学 82(本学期考的第11好的科目) , `线性代数B 79(本学期考的第13好的科目)

这两科真的气煞我也, 出了分后让我只得哀叹这b课以后再也不听了! 不过冷静下来反思为什么考得差其实就觉得合理了

首先我上课好好听了, 所以好好上课让我我很好的完成了应试的第一步学会知识; 但是这不意味着我很好的完成了应试的第二步, 学会做题;

这两科平时的作业量很少, 只能是掌握题型怎么做的地步; 虽然期末也都有做一套卷子(才一套), 但是总的刷题量不多, 而且零零散散的, 我也没去回顾; 相比起来呢, 其他自学的科目虽然知识的掌握没那么好, 但是我应试刷的到位啊; 不得不品的会了不等于能考好

大物的关键在于平时作业量算充足, 并且是练习册形式的, 非常方便复习; 事实上我约15周就过了一遍大物, 后面考试再复习了一遍也是相当游刃有余了

那么这里就提出大物很好的一种学习方案, 因为平时你不得不要做练习册, 所以你可以把80%的刷题量就压在这练习册上, 期末再复习练习册达到确实掌握就可以了; 练习册平时做不明白的话 Gemini2.5Pro同水平或往上的AI可以解答的清清楚楚的; 不过平时没做练习册的话期末就不要再去看了, 很多题型不考而且难度偏高不如直接做卷子

大物自学起来不算方便, b站也没有看到非常优质的速成视频之类的; 真要自学感觉也只能自己看书, 问问AI, 然后直接往年卷上找对应题型, 因为大物的卷子是公开的 , 我的大物老师就直接放在学习通里, 量也完全够刷;

还有一点提一下, 大学物理期末考上有些平时学的很难的是不会考的, 老师好的话会和你说大概哪些会考哪些不考(练习册上有些题也不考, 你写的时候应该就有感觉这怎么这么难了) 所以很多章节只要记住几个核心公式就行如德布罗意波小节只要背$\lambda = \frac{h}{p}$, 不过我不是很想列出来(不然又要写1k字)

Java程序设计

这真是我临阵突破出来的成绩; 众所周知呢浙工大Java考试是一页开卷考; 此外Java考试又不能真指望你学多深, 所以大部分东西浅浅的过一遍然后不会的抄到开卷纸上就行了;

简单来说就是考前对考试内容(课表 or PPT) 从头到尾过一遍, 边过边把不会的抄到开卷纸上, 过完一遍再刷两套卷子(Java卷子有点难找看你手段了)

我就是考前晚上从20:00边过课本边抄开卷纸到1:30然后看了两张卷子, 也就是复习花了6h, 平时也稍微有学一些, 花了大概10h

另外还要注意Java写程序的大题比较麻烦, 比如手写线程题, GUI题, 都要求能写对应的代码, 所以我推荐专门给会考的几类大题记录对应代码(可以看我的第二页开卷纸来参考主要是线程, GUI 流和文件三类大题; 手写类相关的大题不用专门抄写大题代码也写得出来)

以下是我的开卷纸看了的也请别到处传之前有一次在某位学长讲东西的时候有人在下面发弹幕: 折乙的博客上说xxxxx; 丢的是我的面子啊喂

不过我今年的考试程序题全考的手写类的题, GUI什么的都没有, 我也是白准备了; 但这显然不意味着以后不会考, 如果你消息灵通搞得到几张往年卷就会知道往年GUI和线程考的频率有多高了

计网课设 | 数据结构课设

计网课设88

数据结构课设优秀(95)

两个课设简直是地狱口牙

我的期末复习安排最失败的就是没想到写课设会花这么多时间; 两个课设每个平均花了我将近2天, 写一个课设的时间够我复习两遍Java了; 如果你是在期末周前看到这篇文章, 注意分配好写课设的时间, 别让课设毁了你的期末复习计划

计网课设

主要难点在于用Packet Tracer搭建网络集成设计这一个任务

我搭建了一个模拟学校校园网环境的设计, 难点在于内外网之间的连接, 端口映射等, 用了NAT, Web浏览器, 端口映射, DNS, ospf 几个感觉可能是加分项的技术 (我的老师感觉挺按点加分的, 具体可以看下自己的老师然后问问学长学姐这个老师的风格)

然后验收的时候就对着这个设计讲了七八分钟老师中途没插嘴就轻松通过了, 我说要申优(我老师会让想拿高分的自己提出来)老师也觉得没什么问题, 最后只拿了88估计是报告写太烂了(写起来真的好麻烦啊), 想报告也拿高分的可以找一份95+的往年学长学姐的报告来看

数据结构课设

我写的Avl树模拟图书管理系统 , 90+% 的人的选择; 目前还没出分也不怎么能吹; 主要就是得有自己的优秀的点验收的时候老师会比较关注

同计网具体看自己老师关注什么

我提出来Avl树的比大小可以改造成多级比大小, 依次比分类, 作者, 标题; 这样同分类,同作者的书就数据结构上天然的临近, 不用刻意整理; 验收的时候老师看起来还是觉得有这么一个创新点不错的; 如果没这个创新点我就和其他人写的一样了那肯定是拿不了多少分

毛概

话说博客里写这东西应该不会出问题吧(?) 其实我想写全称的不过感觉写出来更容易出事

这分数又惊喜又失望; 首先我也是约等于考前几天临阵突破学的, 但是考试的时候明明感觉全都会的说, 怎么才这点

毛概重点就完全不在刷题的, 会背确实就是拿得到分; 千万要把老师提的重点都背下来, 一般来说老师划重点的就是大概率要考的(如果划的重点不是很多的话)

消息灵通的话你会找到很多往届的资料; 大多其实感觉也用处不大, 不用去搞一大堆, 有一两份辅助学习就行; 部分重点确实很准

我这次所有毛概老师统一划了10个课本重点, 3个延伸点, 95%覆盖考试考点了; 而我之前就听往届学长说要好好把老师划得重点背下来所以就基本都会背; 这种课真感觉为了提分的话听课的意义没多大, 很遗憾; 学的太深也没啥用, 反正背了就会

85-科目

考得差的科目我就稍微说说大多其实我也好好学了的

马原

考的应该不差但是我平时分大抵烂了, 再多旷一次课期末考都要被禁止了; 另外我考前一天晚上把没学过的舍友教到七十多所以我应该还是算会的

虽然都是思政类不过和毛概也不完全一样; 马原我的老师压根没划重点, 而且感觉确实这个科目不好划重点; 知识都是自成体系的, 不像毛概那样一个个单独抽出来可以背

个人感觉马原不好考前突破, 因为要学的实在太多了; 你需要老老实实的把会考的几章确实都学会才能考好

我真不知道考前才背还能考好的到底有多天才, 相比起来我真的毫无才能

所以学习方案大概就是老老实实把每一个知识点都看懂, 然后记住; 马原不像其他思政类那样那么要死记硬背理解了基本就会了

觉得看课本|资料实在看不下去可以看看这个系列视频

{爆肝制作}一口气看完马克思主义哲学

这个链接只是哲学部分, 这个up也有做马原其他部分视频

另外马原在我这届已经是全考大题的了, 有余力可以看眼大概怎么考(反正别浪费时间刷不会考的选择题)

体育skip, 概率论还真没好好学 skip, 离散数学和线性代数考太烂了不想讲skip

计网

可以算最难的科目了, 学起来量确实很大; 考差了也没太多好抱怨的

想用B站视频跟着学的话普遍选择就两个

深入浅出计算机网络微课视频_哔哩哔哩_bilibili

中科大郑烇、杨坚全套《计算机网络（自顶向下方法第7版，James F.Kurose，Keith W.Ross）》课程_哔哩哔哩_bilibili

只是想考好看第一个, 主要是为了多学一些计网知识看第二个; 我看的第二个花了非常多时间在不会考的知识上, 不过确实学了很多有用的并不后悔

如何度过煎熬的期末周(月)

当然这个我只能讲讲我是怎么度过的了

有一说一我觉得自己还算是努力的, 好歹连续两周坐在宿舍电脑前接近从早学到晚(不过全都是中等强度的学习)

挂一张当时学习拍的照, 我是超级死宅, 学习都不愿意离开宿舍能坚持下来的技巧性的可分享的点有两个

吃巧克力
朋友的陪伴

第一个换成自己喜欢吃的比较轻巧的东西; 期末考两周我吃了两盒巧克力,200+g, 平时我根本不会买巧克力, 因为太爱吃了绝对会忍不住一直吃, 但是期末考为了考好我愿意以胖一斤为代价, 解封两周的巧克力食用权缓解压力用; 不过最后竟然没胖;

第二个其实也决定了你复习的位置, 状态之类的; 我和朋友陪伴的形式是用网易云一起听功能; 现在想起来还是觉得很温暖

尾声

期末考最大的感受是

年轻人的脑子真好用!

啊呀还没老真是太好了, 脑子目前还好用着可以学很多很多东西

三周我就能学十科, 假想我就算一直维持这个学习强度的80%, 那也非常不得了了;

所以寒假我重新拾起了日语学习, 另外还开始学食品营养学;

前者是兴趣, 后者是为了活的健康; 有着这么强的学习力, 多学些东西多好, 感觉其实不用怕学不过来; 经历期末月的狂风暴雨才发觉学这点东西不过是柔和的细雨

关于这两部分的学习, 其实还想说挺多的, 不过感觉再在这篇文章里写更多东西也不好这些内容也与本文主题无关, 况且写博客也挺累的摆咯

SSR篇1-从认识渲染方式到简单的SSR问题

Sun, 09 Nov 2025 00:00:00 GMT

唠叨

上一篇博客 (9月末) 的时候, 本人在写Nuxt 操作localstorage的时候遇到了一个问题, 起初以为是代码设计的问题, 后来发现是需要避免的 水合(Hydration)问题。当时其实就挺想写一篇文章的, 不过无奈现实生活的繁忙加上才疏学浅, ssr的水又太深得花大精力研究我才能写出一篇文章。就拖到现在才写一小篇。悲

一开始我研究 水合问题 我想着就解决水合问题是什么就行了, 然后随便总结几个可能触发水合问题的情况。后来再看, 水合问题是 SSR(Server Side Rendering) 和 SSG(Static Side Generation) 两种 渲染方式(Rendering Patterns) 共有的一种问题, 那我也得搞懂SSR和SSG是什么, 不然无法理解为什么要水合, 以及水合到底是在干什么。那要理解SSR和SSG, 我又得知道渲染方式是什么现在大概有哪些渲染方式......

所以那也只能原谅我了吧, 原谅我拖了这么久才写出这一小篇文章

不过虽然我好像关于SSR和水合问题没多少经验, 但回头一算我竟发现自己已经接触了三个带SSR的项目 (算上我的博客,它是Astro的孤岛渲染方式, 我对博客也改造过)。那看来我应该还是有底气写好文章的吧。

概念引入

从知识体系的层层递进来说吧, 我应当先说什么是渲染方式再说下什么是SSR再说什么是水合问题...

不过这可真是条长路, 那就先非常笼统的讲下几个核心名次概念(渲染方式, SSR), 再容我用简单的例子来让大家基本的理解理解SSR和水合问题,能明白几个简单的SSR报错情况, 之后再谈对SSR什么的深刻理解吧。

从渲染说起吧

渲染指的是从三件套代码变为具体的页面的过程这里我对于其具体含义掌握也不深, 直接放一段gemini的解释。总的来说你需要理解渲染是比较耗时的, 是有一定成本的, 所以我们才会有不同的渲染方式

SSR —— Server Side Rendering —— 服务端渲染, 是一种渲染方式, 渲染方式描述的是: 浏览器是如何把你写的前端代码渲染成网页; 以下我举例两个读者大概率接触过的渲染方式

静态渲染

比如你直接写个Hello.html文件然后跑起来, 那么采用的就是Static WebSites——静态渲染, 就啥也不操作, 纯纯把你的Hello.html搬到浏览器上让浏览器把他渲染出来就完成了。那么如果你想要分页面, 你就应该在url里写 /page1.html ,/page2.html 通过切换访问的文件来切换页面

客户端渲染

相对应的比如说我们直接用npm create vue@latest 创建一个新的Vue项目, 那么它的渲染方式默认就是 CSR - Client Side Rendering - 客户端渲染。

在一个CSR的前端项目里, 服务器返回的html一开始只是一个空壳, 后续再由js动态的去在这个html里生成页面内容;

如vue里就是给你一个<div id="app"></div>, 你所写的所有.vue文件, 都是通过js操作来嵌到前面那个id为app的div里, 进而展示内容的; 在这里呢, js和html始终都是一体的

服务端渲染

通过上面两种大家熟悉但是不知道名字的渲染方式, 相信大家已经对于浏览器渲染这一操作有了一定的理解了吧。接下来来到重头戏SSR(服务端渲染)了

那么经常改造自己博客的朋友们都知道, 一般来说博客都是采用 ssr来渲染的 (Hexo是纯静态); 它的具体渲染逻辑, 简单来说就是 在服务器上预先把页面渲染成完整的 HTML 字符串，然后返回给浏览器, 之后再想办法把js代码嵌到HTML上(实际表现为接管已经渲染好的DOM节点)

相比于CSR呢, 比如说如果你的博客采用CSR, 那么在用户进入博客的时候, 服务器传给用户的会是一个的空壳, 然后浏览器再运行服务器传来的js代码, 在空壳里渲染;

而如果用SSR, 那么服务器会直接把完整的预先渲染好的博客首页内容以带内容的HTML文件的形式传过来, 用户不用再去渲染; 也就是说

首屏加载速度 相比起来会非常的快, 类比餐饮就相当于给了你预制菜, 而CSR是~~搞了半天还得自己煮~~;

前置步骤-服务端渲染

这一步对于用户来说并不能算一个第一步, 因为往往服务器都是提前把html, js代码渲染好的, 用户(客户端)只要等着获取就行了;

需要注意, html和js代码这里是分开的, 正如我前面所说。 js代码会在后面通过客户端水合 嵌到html上

另一方面但是其他如CSR的渲染方式, 都是在客户端渲染的, 那服务端和客户端的环境是有区别的, 这会导致书写SSR时容易造成一些报错; 关于这点, 本文后面有一些相关的例子。

第一步-获取静态文件

客户端获取服务端提前渲染的html和js文件, 并直接使用html来填充浏览器页面; 于是用户就很快的得到了一个静态的页面——SSR的核心优势之一

至于js文件呢, 将在下一步起作用。

第二步- 客户端水合

这一步是SSR最特殊于其他渲染方式的, 也是最难理解的一步; 在这一步, 我们需要把在上一步还没用到的js文件和已经用于呈现静态页面的html文件拼装起来, 拼装完成后的整体才是一个前端页面完整体

比如说, 我写了一个登录页, 通过一开始服务端传来的HTML我当然可以把登录按钮什么的渲染出来, 但是显然没有js的话, 这个按钮就是一个空壳, 没法实际登录的; 我们得给它绑定上 @click=login() 以及 login函数的具体实现, 两段js代码, 这样页面才能正常运行; 这个把js绑定到对应html元素的操作就叫做 水合(hydrate)

也就是说, 水合是 将在前置步骤(此处是服务端渲染)拆开的, 原就应当是一体的一份html代码和其对应的js代码, 重新关联起来的过程

第三步-客户端正常运行

最后就是在客户端正常运行已经水合完毕的完整前端了同CSR

常见报错问题

以下来讲下SSR使用过程中的

localStorage无法调用

首先我们假设已经在localStorage(即浏览器缓存) 中存好了一个 key为API_KEY的键值对

<script setup lang="ts">
const key = localStorage.getItem("API_KEY")
</script>

那么请问, 这么写在ssr渲染的情况下能正常运行吗? 并不能我们会收获如下报错

这里我们会报错; 原因是在 前置步骤-服务端渲染 因为在服务端上并没有localStorage这个api , localStorage是浏览器相关的操作，是用来调用浏览器缓存的;

那么这样会报错吗

import { getKey } from "~/use-key.ts";
const key = getKey()
//下为use-key.ts
export const getKey = () => {
  const key = localStorage.getItem("API_KEY")
  return key;
};

也是会的, 也就是即使是import操作, 也会在服务端渲染的时候执行

正确的不报错操作应该是如下

function getKey() {
	return ...
}
onMounted(()=> {
	getKey();
})

如上报错的原因均为服务端渲染时没有localStorage这个api导致的而正确写法中, onMounted是会在第三步-客户端正常运行 中触发的(这里是onMounted的性质, 会在页面挂载后运行)

部分请求不该在服务端发送

我们很经常写 当进入xxx页面就打xxx请求 的逻辑

然而, 有些请求在 前置步骤-服务端渲染 不应该被打出, 如你打请求时需要附带一些需要用户提交的东西, 例如有登录功能的项目里, 很多请求都要求带有用户登录态相关的东西(比如需要token鉴权), 那么这种情况这些请求在服务端渲染时打出就是没有意义的

那咋办呢? 哎, 像Nuxt框架里就有一个东西叫<client-only> 如下

<client-only>
    <!-- 内容物 -->
</client-only>

你可以把要打请求的部分封装成一个组件, 然后填到<client-only>里, 这个元素的意思是只会在第三步-客户端正常运行时渲染相关的玩意, 那自然就不会有问题了

客户端水合时报错 (水合问题)

这里我举出的例子就是我上一篇文章;因为这个问题本身非常的复杂, 我觉得值得单独放在一篇文章里讲述;

虽然那篇文章标记着发布时间为9月份, 不过核心的根本解决方案部分是我在写完这篇SSR1后才再次撰写的, 其他部分也经过修改过, 可以放心观看

自动保存apiKey功能遇初始化异步, 最终确诊水合问题

尾声

其实我还有好多想写的, 像是在我的博客astro项目里见到的如下神秘写法

---
//本文件是一个组件 叫ConfigCarrier.astro, 被直接挂载到layout.astro (即挂载到所有页面上)
import { siteConfig } from "../config";
---

<div id="config-carrier" data-hue={siteConfig.themeColor.hue} data-lightDarkMode={siteConfig.lightDarkMode.defaultMode}>
</div>

首先解释下, 这里config文件是博客使用者的设置, siteConfig是里面的存储设置的const变量; 这个组件在其他文件里会被通过dom操作获取到存储的config信息。

那, 为什么不直接在需要这些信息的地方import siteConfig呢?

我目前理解是: 因为config文件并不会被服务端渲染, 也就是说实际压根不会发给客户端

这个东西我接下来也会再研究, 上述猜想要是错了的话, 这篇文章里我也不再修改了, 会在下一篇SSR相关文章写一大段来讲述这相关的内容

碍于时间以及篇幅, 这里就先停笔了希望你们很快就能看到我的SSR篇2文章捏

参考

视频: 10 Rendering Patterns for Web Apps (这分类的有点泛, 不过讲的够广)

文章: Understanding Hydration in React applications(SSR)

Bing搜索

ChatGpt

我的项目代码

折乙先生的大脑

一次水合问题的修复经验 (于SSR篇1写完后大改了后半段)

Sun, 21 Sep 2025 00:00:00 GMT

本文一开始写的有问题, 但是因为思绪混乱, 短时间内没改好; 后来在2025-11-09的SSR篇1-从认识渲染方式到简单的SSR水合问题发布后,

重新大改了一次, 可以把本文视作一个水合问题的修复例子

场景描述

前端开发, 写的是登录页 (不过没有实际后端登录接口) 整个项目没有账号的概念, 是通过在请求的headers里放key来鉴权的

所以在登录页的时候只需要输入一行key就行, 如下图

功能设计

因而我自发的设计了两个功能

缓存key, 并且在每使用时自动调用缓存里的key补全输入框(这样之后要是你还是手动来到login页,就可以直接点击登录不用再输一遍key了)
检测输入框有无内容,无内容时登录按钮 disabled 无法点击

按钮我使用的是<el-button> 因而disabled功能就是使用它的 :disabled 属性来实现的

初版设计

既然要进缓存, 那正常来说就得直接调localStorage, 不过这有点不是很优雅, 所以项目里创建了一个 useApiKey.ts来把这份缓存单独管理(这样就不用手动调取localStorage了) 具体代码如下

// use-api-key.ts
import { useStorage } from "@vueuse/core";

export const API_KEY_STORAGE_KEY = "xxxxxxxxxxxxxxxxx";

export const useApiKey = () => {
  const apiKey = useStorage(API_KEY_STORAGE_KEY, "");

  return apiKey;
};

useStorage是vueuse的一个方法, 是创建一个localStorage名为 API_KEY_STORAGE_KEY 的对象所以在login页代码里我只用这么写

<!-- login.vue -->
<template>
<el-input
    v-model="apiKey"
/>
<!-- handleConfirmApiKey相当于登录函数(校验下key对不对) -->
<el-button
    :disabled="apiKey.length <= 0"
    @click="handleConfirmAPIKey"
>
    登录
</el-button>
</template>

<script setup lang="ts">
const apiKey = useApiKey();
</script>

然后在要使用到Key的页面里, 也只需要用useApiKey() 这个 Composable 就获取到一个优雅的叫做apiKey的变量啦

问题

当然, 初版设计一定是有问题的, 不然就不会是初版设计了; 首先这次设计的优点当然是优雅——代码量也少, 使用方式也非常的舒服

问题在于<el-button>的 :disabled属性, 这个属性传入的是一个 boolean 值, 自动更新表现不理想, 出现了如下bug

这里, 我在已有apiKey缓存的情况下进入页面(或者原地刷新), 会出现输入框里有字, 但是<el-button>的:disable=true的情况

解决方案

我一开始想了一个简单粗暴的解决方案, 如下

简单粗暴的方案

<!-- login.vue -->
<template>
  <el-input
      v-model="apiKey"
  />
  <el-button
      :disabled="isDisabled"
      @click="handleConfirmAPIKey"
  >
      登录
  </el-button>
</template>

<script setup lang="ts">
const apiKey = useApiKey();

const isDisabled = ref();

onMounted(() => {
  isDisabled.value = apiKey.value.length <= 0;
})

watch(apiKey, () => {
  isDisabled.value = apiKey.value.length <= 0;
});
</script>

也就是我手动把后续:disabled不会自动刷新的问题解决了, 我手动让它进行刷新(onMounted触发比apiKey初始化晚), watch则是让 isDisabled 变量与apiKey动态同步

根本解决 (25-11-11撰写)

在前辈的提示下, 我打开了控制台发现了如下报错让我知道这原来是个水合问题

问题为: 服务端渲染时认为按钮是 disabled=true; (因为) 但客户端（浏览器）执行逻辑时认为按钮 disabled=false；两边渲染结果不一致, 所以被认为是水合问题就给我弹报错了

这里我给代码修改下进行测试

// use-api-key.ts
import { useStorage } from "@vueuse/core";

export const useApiKey = () => {
  const apiKey = useStorage<string>(API_KEY_STORAGE_KEY, "", undefined);
  console.log("渲染useApiKey", apiKey.value ? "apiKey有值" : "apiKey无值");
  return apiKey;
};

// login.vue
<!-- 省略template部分 -->
<script setup>
import { useApiKey } from "~/composables/use-api-key";
// 省略其他代码
const apiKey = useApiKey();

onMounted(() => {
  console.log("login页面的onMounted触发", apiKey.value ? "apiKey有值" : "apiKey无值");
});
</script>

我们就可以直观的明白, 在SSR服务端渲染阶段没获取到localStorage里的apiKey, 而在客户端渲染时可以正常获取到apiKey;

另一方面, 我们可以知道, 时序来说是

服务端渲染 → 客户端渲染 → 页面挂载完成(onMounted触发)

关于修复呢, 这里VueUse提供了一个字段, initOnMounted,

这里我们来测试下把useApiKey里的useStorage加上initOnMounted: true后, 会怎么样

// use-api-key.ts
import { useStorage } from "@vueuse/core";

export const useApiKey = () => {
  const apiKey = useStorage<string>(API_KEY_STORAGE_KEY, "", undefined, { initOnMounted: true });
  console.log("渲染useApiKey", apiKey.value ? "apiKey有值" : "apiKey无值");
  return apiKey;
};

如图, useApiKey在客户端渲染的时候也没有拿到apiKey的值; 也就是说这个字段的作用是让 useStorage在页面挂载(Mounted)之后才获取值

这样, 服务端渲染和客户端渲染 的apiKey就都为空字符串, :disabled也都是true了, 于是没有了水合问题, 程序正常执行;

这样按钮的是否disabled就变成了

初始一定是:disabled: true, 按钮无法点击; 在页面挂载后判断本地localStorage里是否有存储key, 有就让:disabled变为false

逻辑很清晰, 代码也很优雅万事大吉咯

浙工大转专业(计算机) 经验分享 | 指南(?

Wed, 04 Jun 2025 00:00:00 GMT

如果你是刚入学看的本篇博客推荐之后也再看看

因为我写这篇博客主要希望你能够因此完成对大一一整年以转专业为主基调之一的规划

对你有所帮助就再好不过了

我的情况

首先我转的计算机(软工) 转别的大类的可以蛮参考参考除机考外部分

原专业化学工程大一上考虑过打acm 以及平时有在干前端开发代码经验比较丰富所以机考准备不是很足也是勉强水过

面试的话我有端项目前不过最主要感觉是大学生服务外包区域三等这个竞赛起了作用

但是按我这么个水平来说也不算特别轻松的通过(主要机考5题才过3题给喷了) 就算是打acm的小登来了也得稍微注视点机考(我们这届还真有打acm的机考没过的)

所以要转专业的别拖从进校园开始就得规划了不然很容易被降转甚至不通过

时间线/难度描述

转专业大一下大二上大二下三次机会
大抵上默认读者是大一下就转

大一上:刷绩点,特定课分达标 → 大一下: 自主加课(辅修) → 转专业考: (机考 → 面试)

每一步我都见过有人失败都看看吧难度因人而异吧我只能说, 学业好的绩点就没问题反过来说也有人高数没达70直接给刷掉的

机考和面试难度我用通过率来描述数据都是左右偏差个1~2人吧

(25届)软工收20人计科收18人网安6人
机考 130 →34
第一志愿面试 34→ 软工12, 计科 13 (共25）网工2 数媒5

注意面试人数是一面均未达招收的最大人数哦所以转专业与其视为参与者之间大概这样贴个图(24届第一志愿通过人的图)(反正官网可查) 降转率看得出来还是比较高的

需要找的资料注意的消息

转专业标准细则当届的转专业标准 以及 浙江工业大学2024级普通本科学生转专业实施细则汇总一览表 类似这玩意
转入专业的培养方案一来是你要根据这个来找出你需要补的课你不需要上的课二是面试可能会问你: 你看过我们培养方案了吗喜欢我们培养方案上的什么课啊
录取人数看看你这届计科啊软工啊收几人我这届计科18 软工20 其他几个合起来大概13 有助于填报志愿
转专业填报时间正常都该学期的第12周开考也就是一旦快到12周了 时刻注意什么时候允许报名转专业(不要忘了报转专业啊www)

实力上的准备

自主提前修课

不提前修的话要是差的课太多会给降转(大概差4门就给降我差3门勉强稳住了)

大一上大概率是没法自己调课的如果你比较有手段去找教务处给你提前加上课那你也是大神了比较好的是在大一下辅修课程 在大一上结束选大一下课程的时候在正方上报辅修(早点报可能被报满) 我就辅修了一门C++

然后大一下可以尝试把非计算机需要的专业课退了(比如我就退了工程图学) 方法是

选课的时候偷偷不选这个课(我就这么成的) 你的教务处很可能不会发现或者发现了也懒得管
如果已选课可以试试找教务处退(很难成)

绩点/特定课程达标

24届要求:

大学物理70(如果有)
数学类科(如高数)70 (最勤学)
大学英语70 (最拜佛)
编程类(如py,C)70(最简单)

数学和大学英语多小心点平时分拿满满不然你期末考等出分会很煎熬(本人亲身体验)

绩点的话我自己是3出头总的来说不下3正常就还是很合格的比较高的优势大概就面试夸夸你可刷可不刷但是起码得到3左右太低了确实不好看

机考

5题过3题才算通过机考
机考是最大筛选器主要难度集中处

编程语言:

机考只允许用C/C++ 别嚷嚷浙江有选信息的考生们你们最的python了老老实实学C++吧练习用devC++来练只有这个是机考考场包有的喜欢用vscode的有福了自觉苦练下devC++吧

机考还是推荐C++ 用<bits/stdc++.h>库爽写 C++的基础学习这里就不教了自己想办法指针啊 class 啥的都不用学能写题就行练习: 考试的OJ: [http://acm.zjut.edu.cn/onlinejudge/] (要校园网) 这上面也有很多通关考练习题不过转专业机考的难度是比通关考大的练到四十分钟能稳定AC一套通关考 以及熟悉下这个OJ的特性如卡行末空格不卡样例末尾的换行报错中Prensentation Error WA Routime Error 比较常见熟悉分别是什么意思

转专业机考也有往年题我自己这次考的我也有记下来不过我这里就不具体发出来了毕竟学校要求不能外传 (所以私下找我我可能告诉你大概?怎么考的咳咳)

竞赛/项目

我说了好几个项目但面试老师感觉不怎么因此理我估摸着项目多半作用有限

竞赛还是推荐水个比较差的竞赛也没事面试的时候你一说你有个竞赛面试老师就会肯定你对计算机的兴趣加分很大

推荐的竞赛:

只推荐计算机的比赛其他用处不一定大

我校acm迎新赛 acm校赛 都推荐参加认可度高也相当于模拟机考(模拟下环境机考肯定更简单)
学校的其他计算机比赛比如寒软 可以看看能不能水
认可度高的全国性计算机相关比赛(如大学生服务外包创新创业大赛)打这种就比较难了有拿到这种比赛奖项的话帮助也很大

志愿填报

正常就 计算机科学与技术 和 软件工程里选

其他我不熟这里就不讲了计算机大类下除了计科软工其他几个人数占比都不高

第一志愿/第二志愿机制:

具体机制根据你那届情况来看(比如我前几届机考是可以两次的) 不过感觉以后顶多比我这个惨

我这届只机考一次第一志愿第二志愿只是面试面两场也就是机考通过后大概下一周第一志愿面试面试结束后一天正常就发布面试通过名单如果没通过你就会参与第二志愿面试

不同专业分支介绍:

计科肯定最王牌其次软工再其他的拿出去交简历的时候如果非对口工作(比如你网安面个前端开发) 容易不好看计科的课程更难比如有电路啥的软工比起来会比较简单

然后如果想保研的话选软工肯定简单, 计科养蛊比较严重

我的机考+面试经验

机考

机考时长90min 共5题过3题及以上算通过可以进入面试阶段
只看题数不罚时

具体往届数据可以上 [http://acm.zjut.edu.cn/onlinejudge] 的contest里找往届转专业考榜单是允许看的

24届大一下(也就是我这次) 是18人个3题 16个人4~5题

我的考试情况是

10min调好电脑(用的电脑上DevC++) 过第一题

20+min卡在第二题(卡细节题目要求我每行输出两个数我以为直接输出考完发现要比大小然后换顺序)

40min做出第三题没被卡细节

55min调出第四题但是因为忘记0和1不是质数被卡了

55~77min这二十分钟最紧张一直在找第二题第四题两道题卡哪里了

77min发现第四题细节错误做出第四题

最后三十分钟非常紧张实际做题感觉就60min有效时间(实力不够实在无奈) 要是C++还行的话正常就是考虑细节问题总体机考题难度相当于洛谷入门~普通- 但是细节会故意卡你

面试

我这次规则:

时长5min 不会死卡包括自我介绍+提问
面试者站讲台上教室第一排第二排坐两排老师
一个主面试官一直问你问题其他的菜市场讨论问题: 问题大多数是针对你自我介绍中讲的东西来问

自我介绍

这自己想办法我的话就说了自己的项目和竞赛情况

你自己有学些什么

答: 前端开发. 但是感觉几个老师不懂这个听了也不说话

补课和缺课情况

答: 目前还缺三门(离散程C 线代) 其中程C可以轻松通过(自学了) 以及我辅修了C++

问这个问题基本说明你过了在看你要降转还是平转要是这里你欠的课4+门基本准备降转吧

你有看过我们的培养方案吗? 有没有什么比较喜欢的课

答: web开发, java, 计网什么的.

你为什么转软工而不是计科

答: 计科要学电路什么的太难了学不来(其实我是懒得花那么多时间去学)

后续讨论要不要我降转感觉几个老师之间聊了一会不过我面试的时候比较幸运我辅修的C++课的老师有来面我在下面给我说好话不希望我降转所以大一一年别得罪什么计算机学院的老师比如你要是在老师课上睡觉到时候来面你你基本可以滚蛋了(泪)

elmUI真王朝了? 使用经验分享

Mon, 28 Apr 2025 00:00:00 GMT

elmUI介绍

(给没用过elmUI的小登写的老登别看啦) 先给伟大的ElmUI贴个链接 elm 组件库最新版本全称Element Plus 套用官方说明就是个"基于 Vue 3，面向设计师和开发者的组件库"

也就是说比如这样一个登录按钮你不用手搓直接写入

<button type="primary">登录</button>

就行啦也就是说可以当场找到你想要的组件当场写入你的前端项目

组件介绍

内容组件

elmUI中如 Card,Button, input, icon 这些是作为某一个页面布局的一部分来使用的用起来最大的感受就是省时间舒服 拆包即用 组件的拓展性都不错比如input组件如图左边的几个input 像邮箱那里可以直接在input里添加上右侧的发送验证码按钮右上的是大型文本框写学期总结的地方()

布局(功能)组件

如el-dialog(弹窗组件) el-info(提示信息功能) el-message 这些组件的泛用性个人认为会高于Button什么的而且也更重要毕竟搓个button谁不会就是懒搓个弹窗组件这种还是很头疼的

刚开始用的时候特别是el-dialog 会让我感觉: 哦原来这么轻松就能实现这样的布局结构然后我就在我的项目里用了快10个el-dialog 比起只有只有页面的跳转网页高级了个档次

缺点

因为是用来布局的所以会附带着elm自己的一套风格 也就是说这些组件拿来写写个人项目还是很不赖的，拿来多人开发的正式场景，就容易遇到风格问题可能UI要求的风格和elm的不兼容那就用不了了所以还是别依赖过头了()

其他

bug

手动添加elm内置的class名

elmUI有内置的class名以及对应属性所以不要乱使用可能和内置class名重叠的class名 如下我由于在一个<el-upload/>的最外层额外写了个class="el-upload" 导致如下属性侵入其中display:inline-flex; 导致此处变为flex布局故导致如下bug

正常的在组件最外层多写了class="el-upload"

样式渗透时多加了scoped

elm的组件源码正常我们不会去改那这时候要是我们想稍微对这组件小改个色或控个尺寸咋办呢这时候就可以在<style>里写来操作具体操作如下先F12找到这个组件你要改的那一层的class名 这里注意 elm的组件基本都好几层别改错层了 如果你有在.vue的style里都加上scoped的习惯的话就单独起一个<style> 不加scoped 或者在外层套个:global() 如下

scoped这个属性会让你写的<style>只对当前文件起效果而显然elm组件在其他文件里所以记得别加scoped捏

水项目小技巧

因为elmUI够出名所以AI也认识你用elm组件写项目的话可以直接叫AI 比如生成一个ElMessageBox 里面要有账号和密码.... 就能光速水完哎这是真无敌了不过要这样用多了自己再改的不认真大概率整个项目要变shi山了

感受

显然elmUI不是万能的但是也算是非常实用全能的用起来让我对一些已有规范的组件有所认识(比如switch组件) 这样的组件虽然html里没有但是大家都这么叫这个名都大概是这么个写法

没用过elmUI的还是很推荐写个人项目时用一用的既有效率又能带来提升(使用方法直接看官网文档链接在本博客最上方或者直接浏览器搜索elmUI)

正规团队项目初体验

Sun, 29 Dec 2024 00:00:00 GMT

杂话

好久没更博客，但是最近学的杂七杂八的太多了，就先写篇非技术类文章抒发下情感(水一下) 之后有空还可能再写点技术文()

开发团队中的体验

团队是对应功能拉的小群人员有 后端 前端(我) 前辈(视察组) 主要的苦难在于自身技术不足，就时不时要接受前辈的"拷打"，要失去对技术的信心啦 :(

然后原先习惯的是非常业余的开发，在团队里要非常有理有据，不断思考功能到底需要怎么样容易不习惯

所以对于如果读者未来或者现在将要初步进入开发团队，请做好语言管理和心理防御别破防了()

写码时的体验

痛苦

接手的是陌生的团队项目，由于能力不足一开始啥都看不懂就不停翻文件夹不停搜这是什么东西写的时候也会质疑: 自己写的规不规范，性能高不高可读性强不强 还是比较痛苦的

期待自己混成老登了来拷打小登捏

对陌生项目技巧

先看Src文件夹里的布局对应下自己熟知的前端文件夹标准大概能了解文件分布若有没见过的文件夹可以搜索这是个什么功能(前提是你项目的文件夹比较标准不是瞎命名的)

建议边看文件夹边启动项目，把实际页面和文件夹对应起来更有实体感

自己研究了发现实在不懂了还是老老实实问前辈吧虽然大概率会有点问不清楚然后被说两句心理素质所以还是关键的()

由于项目需要标准化规范化，变量函数往往是包装在某一块然后export import一套到你着眼的文件夹上这时候可以用上搜索功能如vscode里的搜索，来搜索变量名，可以找到一堆 types, store, 变量的产生, 变量的使用 就大抵知道这个东西的来龙去脉了(还能用来搜console.log()销赃)

投降喵

投降喵给前端跪了喵这辈子就是被前端毁了

后记

我草好羞耻 --25年末

前端文件夹结构浅讲解

Sun, 27 Oct 2024 00:00:00 GMT

叠甲

这篇文章适用于偏新手的前端观看写的本意在于便于前端入门者看得懂
仅讲解少量文件夹一是入门者不需要知道那么多二是我也不会(bushi)
如有描述不当处感谢指出

总结构

我们先来看一个vue基础项目的文件结构

分类

这里作为一个前端入门者我们只需要知道哪些是我们需要用的哪些是我们不需要的就行所以我姑且将文件分为以下几类

src文件夹----你的源码存储处 主要的工作场所

各类配置文件----如图中的 vite.config 当你需要配置一些东西的时候需要使用 偶尔使用

其他各类文件----比如README.md 这个是用于在github中向用户介绍这个项目 几乎不碰

也就是说在实际编程中你大部分时间只需要在src中操作偶尔在如XXX.js XXX.josn中配置一些东西比如刚刚的vite.config在vue项目编写过程中就可以用来配置跨域(简单来说就是填入你的后端的地址帮你连上你的后端)

src文件夹

那么现在来具体介绍下src文件夹下的结构能不能认清里面的文件结构对于写码体验有极大影响 (可不要成为文件瞎放的人呐)

以下放我的blog项目(一个astro项目)的文件配置这里不同类型的项目下src里的东西会不一样主要先认识下共有的一些东西

pages(vue中为views)字面意思也就是存放前端项目的页面 比如 loign.vue ,register.vue.... 每一个页面对应着一个项目中实际的页面

assets--静态资源存储也就是图片之类的东西放里面然后用来在前端页面里渲染出来

components--组件库这里延伸一个组件的知识点(如果你不知道的话看一下)比如像我博客最上方的导航栏就是一个组件 组件能够在不同的页面中复用 像我的blog的每个页面最上方都有导航栏但是其实我的库里只有一份代码可以说是一个前端项目的核心之一了
也就是说 components中储存着各种各样的组件 大多项目中components中还有分文件夹比如分为用来控制的组件等等 如果你对于这个概念非常不了解推荐单独去了解下

以上是基础中的基础什么项目中一定都会有的部分接下来再说一些src常见的文件夹/文件夹

这里再贴个vue项目的src文件夹结构

router--vue中router功能的配置文件的储存位置详细可以查一查vue中的router的相关信息

layout-- 这里又牵引到一个嵌套结构也就是说我们可以提前写一个大模板(比如一个layout.astro/layout.vue)用来复用性的写你想要配置的page的总布局然后再在你正在写的那个page中引用这个模板把内容丢到模板里

最后

首先很多文件夹因为本人能力有限可能也很重要但是没提到这里推荐把文件夹名译成中文看看 大多数情况就能理解是用来干嘛的了(可能吧)
相信你也发现很多文件其实对应的就是一大块的前端知识所以一定程度上你可以依据你的项目文件夹(或者可以看看别人的项目) 进行一块一块的学习

折乙

从2.3到3.6绩点, 我做了什么 一个计算机学生大二上期末考后的一些思考

闲话