關(guān)于我的個(gè)人網(wǎng)站開發(fā)那些事

時(shí)間：2023-09-27 10:54:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-27 10:54:02 來源：網(wǎng)站運(yùn)營

關(guān)于我的個(gè)人網(wǎng)站開發(fā)那些事：自從入了前端這個(gè)坑，就一直有一個(gè)做個(gè)人網(wǎng)站的夢想。

我喜歡的那些前后端大神都有自己的個(gè)人網(wǎng)站，張鑫旭，阮一峰，王垠，zhangwenli。

最開始做過一個(gè)html+css的最簡單的個(gè)人網(wǎng)站，買了域名，部署到了服務(wù)器。

后來用angularJs寫了純靜態(tài)的個(gè)人網(wǎng)站放到了http://github.io。

但我內(nèi)心是不滿足與純靜態(tài)的網(wǎng)站的，于是19年學(xué)了后端之后，終于正式開始了帶有后端的個(gè)人網(wǎng)站的搭建之路。

當(dāng)時(shí)做這個(gè)個(gè)人網(wǎng)站一方面是因?yàn)橄胱觯硪环矫媸菫榱嗣嬖?。技術(shù)方面，網(wǎng)站后端采用java+springboot+mysql，前端前臺采用angular+material, 前端后臺采用了angular +ngZorro（別問我為什么前后臺采用不同的UI框架，問就是面向簡歷編程）。后來隨著我找到工作（并沒有找到使用angular的公司，而是一家使用vue的公司)，個(gè)人網(wǎng)站的開發(fā)也暫時(shí)告一段落，當(dāng)時(shí)只完成了前后端框架搭建，前后端接口調(diào)通。

轉(zhuǎn)折發(fā)生在2021年下半年，因?yàn)楣ぷ鏖_始變得比較清閑，加上公司工位的調(diào)動，我隔壁工位變成了一個(gè)后端，我也又開始想做個(gè)人網(wǎng)站了，于是想著可能這就是天時(shí)地利人和吧，開始了個(gè)人網(wǎng)站的第二次開發(fā)。

后端從數(shù)據(jù)庫查詢從hibernate換成了mybaits（我做第一版的時(shí)候hibernate還挺流行的啊，怎么現(xiàn)在就不行了，不過mybatis-plus可真好用）。重新熟悉后端代碼，開始寫增刪查改的接口；從新熟悉前端代碼和UI框架（因?yàn)楹竺婀ぷ髦幸恢庇玫膙ue,），繼續(xù)用angular寫界面，調(diào)接口。自己寫前后端代碼的好處就是，不用扯皮，覺得某些代碼放在前端合適就前端做，覺得放在后端合適就后端做，因?yàn)榉凑际俏易约鹤觥?br>
說一下個(gè)人網(wǎng)站的開發(fā)的大致流程吧。因?yàn)槭堑谝淮巫鲞@樣的個(gè)人網(wǎng)站，基本都是摸著石頭過河。

首先是需要的是網(wǎng)站的設(shè)計(jì)，先作為PM（產(chǎn)品經(jīng)理），理一下網(wǎng)站的大概功能點(diǎn)，有多少個(gè)頁面，頁面有那些功能，怎么排列，是否需要適配移動端等，基本上就是多找?guī)讉€(gè)個(gè)人網(wǎng)站參考下。

然后就是作為UI（美工），設(shè)計(jì)一下網(wǎng)站的配色，各種菜單、按鈕或者彈框之類的樣式，當(dāng)然基本上也可以找一些網(wǎng)站抄，也可以上dribble之類的網(wǎng)站找參考，因?yàn)槭亲约簜€(gè)人的網(wǎng)站，想怎么做就怎么做，所以dribble之類上面的各種飛機(jī)稿也是可以參考的。

這里需要注意的就是如果你要做移動端適配，將會大大拖慢網(wǎng)站的進(jìn)度（我的個(gè)人網(wǎng)站前臺是有移動端適配的，自從我看了我的B站視頻播放設(shè)備90%都是來自于移動端之后，我深刻的認(rèn)識到了未來是移動端的天下），不同大小的移動端，功能如何布局，界面樣式如何設(shè)計(jì)，這些都是需要考慮。直接導(dǎo)致可以參考的網(wǎng)站和設(shè)計(jì)也會大大變少，編碼樣式很多時(shí)候要寫兩套，還很容易出bug。

接下來就是作為程序員編碼了，前后端項(xiàng)目框架的搭建，數(shù)據(jù)庫表的設(shè)計(jì)，接口的設(shè)計(jì)，總之就是一些比較偏體力勞動的工作。這部分基本就是看各種各樣的文檔，各種插件使用文檔，UI框架使用文檔，前后端框架文檔，然后解決各種各樣的bug，百度搜索不到就去google搜，或者直接stackoverflow搜，這里就要感謝我隔壁工位的后端了，幫我解決了很多問題（雖然他脾氣不太好）。

然后網(wǎng)站大概就做完了，然后就是作為測試給自己的網(wǎng)站找bug或者提建議了。比如我的網(wǎng)站就有很多問題：

移動端適配，本來在我的瀏覽器上的模擬iphoneX上界面完全沒問題，結(jié)果在我的Iphone12mini上布局慘不忍睹，又重新做iphone12mini的適配；

首頁的動畫本來是隨機(jī)速度的，結(jié)果我反復(fù)切換菜單之后，動畫速度居然越來越慢，后來發(fā)現(xiàn)原來是切換菜單定時(shí)器沒銷毀；

個(gè)人網(wǎng)站的圖片頁面的加載速度實(shí)在是慢的不行，4g網(wǎng)都表示壓力大，于是又在后端做了圖片的壓縮，前端根據(jù)屏幕大小，加載不同大小的圖片；

圖片只能一張一張的點(diǎn)開看，然后再關(guān)閉，再點(diǎn)開下一張，用戶體驗(yàn)太差，于是前端又加上了點(diǎn)擊圖片切換上一張和下一張的功能。這里順便說一句，能用插件盡量用插件，我本來想自己做這個(gè)點(diǎn)擊圖片上一張下一張的功能，結(jié)果自己的代碼寫垃圾不說，兼容行還差，還浪費(fèi)了很多時(shí)間，用別人的插件，分分鐘搞定，兼容性還好，又沒有bug，所以，能用插件就用插件。當(dāng)然，如果你是大神，當(dāng)我沒說

至此，網(wǎng)站的大概開發(fā)就結(jié)束了，然后就是一個(gè)不斷迭代的過程。比如我現(xiàn)在的網(wǎng)站來說，基本就只有圖片和博客功能，剩下的其他設(shè)計(jì)好的功能，都需要留到以后再開發(fā)了。

2021/09/16 更新：

我的個(gè)人網(wǎng)站網(wǎng)址：