前端 | 个人主页项目HTML页面解析
个人主页项目HTML页面解析
- 前言
- 1. 项目效果展示
- 2. HTML页面解析
- 3. 经验总结
- 最后
前言
这是一个个人主页小项目，文章所列示的为7月4日晚得的版本，后续与开源可能会改动。
项目原型为0.9元开课吧的个人主页项目，笔者使用SpringBoot对其后端进行重写，改造前端页面，现在来谈谈前端HTML页面。
1. 项目效果展示
话不多说，先放上效果展示图：
个人主页项目图
上面这张图显示的是完整的功能，如果用户不想展示这么多信息，可以按需加载，其中留言功能可以关闭。
如下图为项目最简展示：
个人主页项目图-最简
因为至少需要姓名信息才能生成个人主页，因此在最简图里就只有名字这一信息。由于项目前端采用boostrap的CSS样式库，因此可以进行响应式布局。
如下图所示：
适配手机显示
2. HTML页面解析
这个页面是笔者个人主页项目的第二阶段主要内容。主要做了数据的获取与显示，很大部分时间花在了前端参数的调试与调整。
这里的前端显示，笔者采用SpringBoot官方推荐的Thymeleaf模板引擎作为页面解析器，直接解析后端传递的Json字符串数据，放在对应位置替换原页面信息。
这里的前端页面不是笔者自己从零开始造轮子，而是借用了开课吧0.9元公开课的页面。笔者在这基础上增添了一点点细节。接下来就从外往内聊聊这个页面吧！
首先让我们看一下u.html这个文件的结构：
最外的结构有：
- 动画相关的div盒子；
- 个人主页div盒子。
动画相关的div盒子顾名思义，就是你能看到的动画效果，即各种切入切出。这部分笔者没有做修改，不细说。
重点在个人主页的div盒子里，分为错误页面与正确显示两部分。在这里笔者首先根据获取的错误码204判断显示哪个盒子里的内容：
错误页面HTML结构
错误页面里包含小屏幕渲染时需要的移动导航小图标和最主要的内容区域。在内容区域里笔者只做了一个页面用来提示错误信息，浏览器渲染效果如下：
错误页面
正确页面里的信息就多了：
正确页面HTML代码
左显示框就是效果图左边蓝绿色背景里的元素，包括头像、主菜单以及联系方式小图标。
左显示框HTML代码
需要注意，这里的主菜单导航栏在大屏幕里就是右边那几个可以跳转的小图标，在小屏幕里就是文字。
主菜单导航栏
与左显示框同级的还有移动导航（小屏幕时显示的小图标）、箭头导航（如上图“>”“<”图标元素），还有最重要的内容区域，这部分就是上面效果图中的提到的：主页、关于我、经历、荣誉、联系我、留言的具体显示图。获取数据并进行展示、非空校验、list遍历基本上就是这部分实现的。
内容区域HTML代码
内容区域部分要细讲能将很久很久，大多数都要结合具体代码去谈，才能讲清楚，但大体思路是想通的。
首先进行非空校验，如果是空则有两种处理方法：
- 直接删去内容（如：经历、荣誉、联系我、留言页面）；
- 直接删去会导致页面整体显示出问题，如不能自动浮动，影响美观的。笔者采用填充统一默认信息方法。（如：个人介绍、职业资格与技能证书等）。
笔者填充信息
通过非空校验后就是取数据了，这里使用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开头的错误日志可以找到第一个错误发生的所在行。
最后
新人制作，如有错误，欢迎指出，感激不尽！ 欢迎关注公众号，会分享一些更日常的东西！ 如需转载，请标注出处！
前端 | 个人主页项目HTML页面解析相关推荐
- 前端Vue项目——购物车页面
一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...
- 前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
- 前端月趋势榜：6 月新增的、最热门的 20 个前端开源项目 - 2106
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ GitHub 上面有个 Trending 榜 (趋势榜),在 Trending 页面,你可以看到最近一些热门的开源项目或者开发者,这 ...
- 前端月趋势榜：5 月最热门的 20 个前端开源项目 - 2105
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 相信很多人都没有逛 GitHub 的习惯,因此总会有开源信息的不对称,有哪些优秀的前端开源项目值得学习的也不知道. 从 2018 年 ...
- 前端月趋势榜：4 月最热门的 20 个前端开源项目 - 2104
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ GitHub 上面有个 Trending 榜 (趋势榜),在 Trending 页面,你可以看到最近一些热门的开源项目或者开发者,这 ...
- py获取前端的参数_微前端 qiankun 项目实践
(给前端大全加星标,提升前端技能) 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语 最近在做微前端的项目 , 过程中真是踩了 ...
- 前端H5项目部署到OSS-利用jenkins实现自动发布【生产环境实战】
前端H5项目发布到OSS 文章目录 前端H5项目发布到OSS 背景 一.创建Bucket 二.为Bucket绑定自定义域名 1.购买的域名和oss在同一个阿里云账号下(大多数) 2.购买的域名和oss ...
- 多迪php,多迪PHP项目经理深度解析：PHP应用性能优化指南！
原标题:多迪PHP项目经理深度解析:PHP应用性能优化指南! 程序员都喜欢最新的PHP 7,因为它使PHP成为执行最快的脚本语言之一.但是保持最佳性能不仅需要快速执行代码,更需要我们知道影响性能的问题 ...
- 前端web项目使用electron和electron-builder生成桌面应用
背景 需求推进技术探索,技术实现需求设计.刚开始本来是用 vue 做一个 web 项目,随着开发推进,产品要求做成桌面端应用... 想到了用 Electron 框架构建桌面应用程序,查了一下大多都是使 ...
最新文章
- xshell查询日志命令_Polysh命令实现多日志查询的方法示例
- 再谈 Devstack（Rocky）
- 赠书：深入理解MySQL主从原理
- deep learning:RBM公式推导+源码 ----- C++
- sql必知必会(第四版) 学习笔记二 视图
- C和C++的关键字区别
- 漫画：什么是二叉堆？（修正版）
- Shell学习之结合正则表达式与通配符的使用(五)
- 嘿嘿～～大家一起来测测自己反映速度
- 【奇技淫巧】Android真机调试看不到应用logcat或者应用logcat信息太少的解决方法
- 使用正则表达是搜索多个字符串，表达式中加入变量
- 4.CND技术详解---集群服务与负载均衡技术
- APS傻瓜教材读后感之为什么需要人机交互调度
- Nginx之（一）Nginx是什么
- 千月影视APP前端搭建_①_注册apicloud账号密码
- 关于变压器的这些小知识
- 纸带打点计算机是什么原理,从电火花打点计时器高清拆解图，分析构造，详细解读电路工作原理...
- SCVMM 2012 R2---安装Hyper-V Server 2012 R2主机服务器
- centos Iptables学习笔记
- 11月更新M1芯片专用PS photoshop 2021/2022安装 PS2021/22 Mac版 附详细教程