我用40個commit完成整個迭代開發

全棧導航

全棧導航一個分享互聯網優秀資源的導航網站，專一分享產品運營、產品經理、UI設計師、前端開發工程師、後端開發工程師，爲互聯網職員收錄國內外優質網站。互聯網職員，找導航，就上全棧導航

爲何要作這個？

vipbic是一個專一前端開發、網址導航、社區討論、學習視頻下載、HTML五、CSS三、JavaScript、PHP的獨立分享導航綜合網站

它和 vipbic，有什麼區別，主要緣由是，我最開始的初衷作導航的，後來演變成作博客社區導航綜合體，詳細能夠看升級日誌，

vipbic目前是3.0的版本

目前收錄將近2000條網址導航，在使用上面的分類，並不能很好體現出來，以及總體網站版式的風格，並不能很好爲用戶很好的找到本身想要的，如今把網址單獨抽取出來，只作導航，專一互聯網職員，找導航，就上全棧導航

在線體驗

全棧導航一個分享互聯網優秀資源的導航網站，專一分享產品運營、產品經理、UI設計師、前端開發工程師、後端開發工程師，爲互聯網職員收錄國內外優質網站。互聯網職員，找導航，就上 全棧導航

在線體驗 www.itnavs.com

很早已經把倉庫建設好了，只不過一直在關心設計的問題如何排版，如何佈局等等，在此也參考了大量的網站借鑑，在他們的網站中都能找到相關的設計風格

致設計，匯藝設計，巧匠課堂，不死鳥，MacWk，VReadTech，AE視頻教程

用40個commit完成了重構

能夠看時間節點，基本都是在凌晨提交，白天須要工做，只有晚上回家纔有創做的機會，有時候不是睡過了就是鬧鐘鬧不醒，而後也發生了不少故事

全棧導航·先睹爲快

首頁

分類

網址詳情

文章詳情

文章搜索-新增

下載-新增

全棧導航·一路走來

開始創做

在開始很早的時候，我就想好了，要作導航，而且註冊了域名 wwww.itnavs.com，

itnavs的由來，it表明目前互聯網，取名爲全棧，navs就是導航，綜合就是全棧導航，是否是很簡單，哈哈哈哈😁😁😁

受經驗影響，不能用先後端分離的去作， 由於須要須要SEO，須要服務端去渲染出頁面元素，而後直接給出到客戶端，如是採用thinkphp5+vue2.0(部分使用到，操做簡單)，

2020年受疫情影響，在1月份，開始編寫了第一行代碼

總體技術

這是一個thinkphp5的標準目錄，整個渲染是依託於控制器渲染視圖層

服務端環境：nginx + Docker(感謝鬆鬆同窗搭建) + linux

後端：thinkphp5 + mysql

前端環境：編寫靜態html，利用模板語法渲染，沒有結構，由於都是頁面模板，部分頁面用到vue.js，操做dom方便

優勢：開發速度快，由於查詢數據不須要返回固定格式，直接賦值到頁面模板

缺點：對目前前端大環境趨勢不友好，目前前端部基本都是mvvm寫法，經過node.js編譯，生成html、css、js，js操做dom樹的增刪，npm更多現用的資源插件

就這樣花了將近2個月的時間，從設計、開發、數據庫、前端、後端、部署，完成了全棧導航1.0的開發

全棧導航·全新面貌

放上了公衆號二維碼，用戶號從300名用戶增加到700名

如是有了新的的想法升級，遇到難點就是1.0是html的寫法，通用性組件並不強，如是我又尋找的新的解決辦法，

nuxt.js 和 爬蟲

爬蟲

先說下，意思就是當用戶請求url的時候，服務端開啓一個chrome的無頭瀏覽器(相似)，先去把生成好的頁面爬下來，而後在把頁面返回到目標客戶端的電腦

這是github的一個倉庫的，他的原理就是這樣的 這是一個高性能的基於puppeteer的SSR方案, 他使用Headless Chrome從網頁中生成html,而後以http的方法返回html內容

讓 JavaScript站點 SEO變的更簡單，減輕 前端開發心智負擔

在線體驗

我並無採用上序這種辦法，不過這個大佬作的很好

nuxt.js

跟.vue寫同樣，只是多了點配置相關，瞭解配置規則便可上手

小插曲一下，在2020年的11月份左右，服務器遭到挖礦病毒的攻擊，如是整個服務端環境重裝了

總體技術

服務端環境：寶塔面板 + nginx + linux

後端：thinkphp6 + mysql + redis

前端：nuxt.js + node.js

這是前端和後端文件結構

在開發過程當中，發現thinkphp6的寫法大更改，徹底不一樣於thinkphp5，目錄結構大更改，變的更簡單，因此在操做數據的時候，也學到tp6的新規則，以及設計規範的優勢

nuxt.js 在開發過程當中須要注意代碼是在服務端運行仍是在客戶端運行，仍是同時運行，合理運用佈局以及中間件

nuxt.js SEO原理是先在服務端把數據接口請求到的數據，而後拼裝成DOM結構，在返回到客戶端，這樣在客戶端查看源碼不會出現只有只一個dom節點

寶塔真方便

新裝的寶塔面板，管理起來真方便，全可視化操做

只想得到更好的體驗