nuxt about頁面功能分析和頁面模組開發

2021-09-26 00:24:18 字數 1985 閱讀 9333

我們在上乙個章節中,我們完成了jokes頁面ui和介面功能模組的開發,我們緊接著來繼續開發剩下的整個about page好,我們來簡單分析下頁面的結構:

接下來,我們來使用bootstrapvue來快速編寫頁面的結構:

引入components目錄下面的 banner 元件,註冊

引入h1標題,設定對應的樣式

align

="center"

class

="about-title"

>

about jokes class

="badge badge-secondary"

>

apispan

>

h1>

使用card系列元件標籤,快速構建card列表

class

="mt-3 about-content"

>

deck

>

border-variant

="info"

text-variant

="#333"

header

="jokes api website"

class

="text-center"

>

>

url >

>

get all jokes api.b-card-text

>

b-card

>

border-variant

="info"

text-variant

="#333"

header

="fetch a random joke"

class

="text-center"

>

>

get >

>

fetch a random dad joke.b-card-text

>

b-card

>

border-variant

="info"

text-variant

="#333"

header

="fetch a joke"

class

="text-center"

>

>

get >

>

fetch a specific dad joke.b-card-text

>

b-card

>

border-variant

="info"

text-variant

="#333"

header

="search for jokes"

class

="text-center"

>

>

get >

>

- search for dad jokes.b-card-text

>

b-card

>

b-card-group

>

div>

設定對應的樣式

.about-title

.about-content

好,我們的about page頁面開發完成,我們接下來需要給每個頁面設定單獨的head內容,方便搜尋引擎的爬取

競品分析 VS 功能分析

前面的文中有寫過一篇競品部分功能分析的文章,今天來聊下一整個產品如何分析,並對二者進行簡單的比較。小夥伴們不要太在意概念,其實都是競品分析,可以這樣理解,乙個分析的是面,乙個分析的是點,主要還是以目的為導向,如果你只是為了優化某乙個功能模組而參考競品,那就沒必要做個大而全的產品分析,如果你 乙個產品...

學生選課系統功能分析

資料庫系統 學生資訊資料庫 一 學生資訊資料庫主要有如下功能 1 使用者能儲存學生個人情況的有關資訊。2 使用者能儲存學生學習情況的有關資訊。3 使用者能儲存學生老師情況的有關資訊。4 使用者能儲存學生班級情況的有關資訊。5 使用者能對上述資訊進行錄入 修改 刪除等操作。6 使用者能通過多種方式對上...

自動投票軟體功能分析

投票之前首先要分析投票的 以得到投票提交的 提交的資料,並判斷是否有ip位址限制,是否有投票間隔時間的限制,是否有cookie的限制等等。需要有一定的 知識的人的學習。2 捕獲提交頁面的時候所post的資訊。從網頁源 中可以分析出來,資料是post上去的,post的資料為 checkvalue 32...