關於一個完整項目的前端頁面規劃

前言

計劃:
打算做一個簡單的網站,擁有前端頁面,後臺數據,以及管理系統,然而這並不容易,所以打算先完成前端頁面。

我喜歡做什麼事情之前都做一個計劃,現在這個計劃可以說有這個想法很久了,但是一直沒有去做,現在開始把前端頁面分析下,方便之後開發

預計會用到的主要技術棧:

  • vue
  • nuxtjs
  • koa2

頁面統計

前端頁面打算只做三個頁面,首頁,詳情頁,搜索結果頁

模板設計

整個網頁分爲頭部,banner,內容,底部;每部分又可以細分如下

TIM截圖20190313121328.png

組件設計

可以將上面劃分出來的每部分,建一個目錄,目錄下包含一個對外的文件(index.vue),以及若干當前部分的小組件,對外的文件用來整合當前目錄組件,使其成爲一個完整的部分
TIM截圖20190313122417.png

數據結構設計

搜索框需要有熱門搜索的數據,banner需要有圖片的地址,內容需要動態更新
TIM截圖20190313184109.png

接口設計

加入版本號,使用 HTTP 動詞,加入版本號是爲了以後有不兼容和破壞性的更改,能更容易的發佈API,使用 GET POSt 是爲了方便理解這個接口是獲取數據還是新加數據

TIM截圖20190314111112.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章