前端 | 个人主页项目HTML页面解析

前言

这是一个个人主页小项目，文章所列示的为7月4日晚得的版本，后续与开源可能会改动。

项目原型为0.9元开课吧的个人主页项目，笔者使用SpringBoot对其后端进行重写，改造前端页面，现在来谈谈前端HTML页面。

1. 项目效果展示

话不多说，先放上效果展示图：

个人主页项目图

上面这张图显示的是完整的功能，如果用户不想展示这么多信息，可以按需加载，其中留言功能可以关闭。

如下图为项目最简展示：

个人主页项目图-最简

因为至少需要姓名信息才能生成个人主页，因此在最简图里就只有名字这一信息。由于项目前端采用boostrap的CSS样式库，因此可以进行响应式布局。

如下图所示：

适配手机显示

2. HTML页面解析

这个页面是笔者个人主页项目的第二阶段主要内容。主要做了数据的获取与显示，很大部分时间花在了前端参数的调试与调整。
这里的前端显示，笔者采用SpringBoot官方推荐的Thymeleaf模板引擎作为页面解析器，直接解析后端传递的Json字符串数据，放在对应位置替换原页面信息。

这里的前端页面不是笔者自己从零开始造轮子，而是借用了开课吧0.9元公开课的页面。笔者在这基础上增添了一点点细节。接下来就从外往内聊聊这个页面吧！

首先让我们看一下u.html这个文件的结构：

最外的结构有：

1. 动画相关的div盒子；
2. 个人主页div盒子。

动画相关的div盒子顾名思义，就是你能看到的动画效果，即各种切入切出。这部分笔者没有做修改，不细说。

重点在个人主页的div盒子里，分为错误页面与正确显示两部分。在这里笔者首先根据获取的错误码204判断显示哪个盒子里的内容：

错误页面HTML结构

错误页面里包含小屏幕渲染时需要的移动导航小图标和最主要的内容区域。在内容区域里笔者只做了一个页面用来提示错误信息，浏览器渲染效果如下：

错误页面

正确页面里的信息就多了：

正确页面HTML代码

左显示框就是效果图左边蓝绿色背景里的元素，包括头像、主菜单以及联系方式小图标。

左显示框HTML代码

需要注意，这里的主菜单导航栏在大屏幕里就是右边那几个可以跳转的小图标，在小屏幕里就是文字。

主菜单导航栏

与左显示框同级的还有移动导航（小屏幕时显示的小图标）、箭头导航（如上图“>”“<”图标元素），还有最重要的内容区域，这部分就是上面效果图中的提到的：主页、关于我、经历、荣誉、联系我、留言的具体显示图。获取数据并进行展示、非空校验、list遍历基本上就是这部分实现的。

内容区域HTML代码

内容区域部分要细讲能将很久很久，大多数都要结合具体代码去谈，才能讲清楚，但大体思路是想通的。

首先进行非空校验，如果是空则有两种处理方法：

1. 直接删去内容（如：经历、荣誉、联系我、留言页面）；
2. 直接删去会导致页面整体显示出问题，如不能自动浮动，影响美观的。笔者采用填充统一默认信息方法。（如：个人介绍、职业资格与技能证书等）。

笔者填充信息

通过非空校验后就是取数据了，这里使用thymeleaf规定的表达式${}等进行数据获取，使用th:text="${}"对获取的数据赋值进HTML代码里。对于list还需要用th:each="element:${list}"进行遍历操作。

其中最令笔者掉头发的是留言页的布局，不做任何处理时留言块间留有空格，不美观。

其实是左边一块右边一块的，不过我找不到图和原来的代码了，李姐万岁吧

最后笔者采用的方法是：遍历时下标为奇数的格子右浮动，下标偶数则左浮动，这样就美观很多了。（在写总结，改代码时发现可以直接全部左浮动即可，这样可以不用获取下标值）
​

出此之外，在写这部分时还有很多小细节，比如添加的留言在数据库后端，为了使新添加的留言在最前面，需要倒序遍历（前端）或者按倒序条件查询（后端），这里笔者采用后者方法。还有留言必须有内容才能提交等校验。

留言校验

非空校验完、数据获取完，就是对各种div格子调参了，找到最美观的css样式参数。

3. 经验总结

确实啊，亲手敲出一个小项目，确确实实会有经验增长，这里总结了三点笔者认为最重要的，如下：

首先就是后端传给前端的json响应字符串对象不能套娃太多层。虽然这样thymeleaf也能解析出来，但idea会报错，影响观感。

idea报错

其次就是在做web开发时，一定一定一定要关闭浏览器的自动缓存，或者增加缓存清理频率。不然在html修改了一个css样式，浏览器可能会因为没有更新缓存导致使用之前的缓存。这样修改后的样式显示不出来，以为自己写错了。

最后，要重视错误日志。这里不是指错误信息的第一行。确实，很多错误信息第一行就能告诉你错误类型与名称，比如空指针异常等。但与此同时，当读第一行错误信息找不到问题时要往下翻翻。比如下面这个错误日志：

通过第一行翻译可以得出是模板引擎解析错误的结论：

idea报错

再看提示的 [templates/u.html] 很容易让人以为是controller层页面跳转时没配什么导致SpringBoot识别不了这是thymeleaf页面。如果这样想就错了。而这个错误也是thymeleaf+SpringBoot做web开发时的常见错误。笔者就碰过不下二十回。

其实只要往下翻翻日志信息就能知道错在哪了。

第一个Caused by

找到第一个Caused by开头的错误日志，后面跟着第一次错误发生在的行数，这里是852行，我们找到这行：

第852行

可以看出，是th:if="${ result.data.user.isMessage.hhh } == 1"这句模板引擎解析不出来，原来是笔者多打了个.hhh，去掉后就能成功运行了。

这里可以对这类错误做一个小总结：
An error happened during template parsing (template: "class path resource [templates/u.html]")
这类错误一般发生在HTML文件里操作后端数据时，很大一部分原因是语法不规范，找到Caused by开头的错误日志可以找到第一个错误发生的所在行。

最后