关于我的个人网站开发那些事

时间：2023-09-27 10:54:02 | 来源：网站运营

时间：2023-09-27 10:54:02 来源：网站运营

关于我的个人网站开发那些事：自从入了前端这个坑，就一直有一个做个人网站的梦想。

我喜欢的那些前后端大神都有自己的个人网站，张鑫旭，阮一峰，王垠，zhangwenli。

最开始做过一个html+css的最简单的个人网站，买了域名，部署到了服务器。

后来用angularJs写了纯静态的个人网站放到了http://github.io。

但我内心是不满足与纯静态的网站的，于是19年学了后端之后，终于正式开始了带有后端的个人网站的搭建之路。

当时做这个个人网站一方面是因为想做，另一方面是为了面试。技术方面，网站后端采用java+springboot+mysql，前端前台采用angular+material, 前端后台采用了angular +ngZorro（别问我为什么前后台采用不同的UI框架，问就是面向简历编程）。后来随着我找到工作（并没有找到使用angular的公司，而是一家使用vue的公司)，个人网站的开发也暂时告一段落，当时只完成了前后端框架搭建，前后端接口调通。

转折发生在2021年下半年，因为工作开始变得比较清闲，加上公司工位的调动，我隔壁工位变成了一个后端，我也又开始想做个人网站了，于是想着可能这就是天时地利人和吧，开始了个人网站的第二次开发。

后端从数据库查询从hibernate换成了mybaits（我做第一版的时候hibernate还挺流行的啊，怎么现在就不行了，不过mybatis-plus可真好用）。重新熟悉后端代码，开始写增删查改的接口；从新熟悉前端代码和UI框架（因为后面工作中一直用的vue,），继续用angular写界面，调接口。自己写前后端代码的好处就是，不用扯皮，觉得某些代码放在前端合适就前端做，觉得放在后端合适就后端做，因为反正都是我自己做。

说一下个人网站的开发的大致流程吧。因为是第一次做这样的个人网站，基本都是摸着石头过河。

首先是需要的是网站的设计，先作为PM（产品经理），理一下网站的大概功能点，有多少个页面，页面有那些功能，怎么排列，是否需要适配移动端等，基本上就是多找几个个人网站参考下。

然后就是作为UI（美工），设计一下网站的配色，各种菜单、按钮或者弹框之类的样式，当然基本上也可以找一些网站抄，也可以上dribble之类的网站找参考，因为是自己个人的网站，想怎么做就怎么做，所以dribble之类上面的各种飞机稿也是可以参考的。

这里需要注意的就是如果你要做移动端适配，将会大大拖慢网站的进度（我的个人网站前台是有移动端适配的，自从我看了我的B站视频播放设备90%都是来自于移动端之后，我深刻的认识到了未来是移动端的天下），不同大小的移动端，功能如何布局，界面样式如何设计，这些都是需要考虑。直接导致可以参考的网站和设计也会大大变少，编码样式很多时候要写两套，还很容易出bug。

接下来就是作为程序员编码了，前后端项目框架的搭建，数据库表的设计，接口的设计，总之就是一些比较偏体力劳动的工作。这部分基本就是看各种各样的文档，各种插件使用文档，UI框架使用文档，前后端框架文档，然后解决各种各样的bug，百度搜索不到就去google搜，或者直接stackoverflow搜，这里就要感谢我隔壁工位的后端了，帮我解决了很多问题（虽然他脾气不太好）。

然后网站大概就做完了，然后就是作为测试给自己的网站找bug或者提建议了。比如我的网站就有很多问题：

移动端适配，本来在我的浏览器上的模拟iphoneX上界面完全没问题，结果在我的Iphone12mini上布局惨不忍睹，又重新做iphone12mini的适配；

首页的动画本来是随机速度的，结果我反复切换菜单之后，动画速度居然越来越慢，后来发现原来是切换菜单定时器没销毁；

个人网站的图片页面的加载速度实在是慢的不行，4g网都表示压力大，于是又在后端做了图片的压缩，前端根据屏幕大小，加载不同大小的图片；

图片只能一张一张的点开看，然后再关闭，再点开下一张，用户体验太差，于是前端又加上了点击图片切换上一张和下一张的功能。这里顺便说一句，能用插件尽量用插件，我本来想自己做这个点击图片上一张下一张的功能，结果自己的代码写垃圾不说，兼容行还差，还浪费了很多时间，用别人的插件，分分钟搞定，兼容性还好，又没有bug，所以，能用插件就用插件。当然，如果你是大神，当我没说

至此，网站的大概开发就结束了，然后就是一个不断迭代的过程。比如我现在的网站来说，基本就只有图片和博客功能，剩下的其他设计好的功能，都需要留到以后再开发了。

2021/09/16 更新：

我的个人网站网址：