第06課 個人中心設定及 Debug 日誌

2021-10-09 16:34:00 字數 1832 閱讀 9835

知識點:

這一篇內容我們寫乙個簡單的個人介面,由於介面不能用,這裡就使用假的介面去做資料請求。

舊的 header 預設有乙個返回按鈕,但是在個人中心是不需要的,我們要做乙個相容處理,將左側的按鈕隱藏掉,同時還新增了兩處自定義樣式的地方。

接下來在個人中心頁把這個元件引入並且設定好標題、右側的齒輪等。

整體是放入到乙個滾動元件中的,這樣在重新整理的時候也會把頂部的元件拉下來。

到目前為止,我們還沒有接入登入、註冊等服務,所以先寫乙個假的結果返回。

/**

* 獲取快取的使用者資訊(偽)

*/exports.userinfo =

後面會將這部分資料做成全域性的,一旦其他的地方有變動了就會更新引用的頁面,這裡先使用乙個固定的資料,後面會繼續講解到。

剩下的就是按照設計把功能慢慢做出來。

乙個簡單的個人資訊展示:

三個橫排的快捷入口:

我的訂單

我的金幣

我的代金券

在 src 下新建乙個 center 資料夾,在 center 下新建乙個 setting.js 檔案,我們在這檔案裡簡單的寫幾個設定,將需要的資訊顯示出來。

在 src/index.js 中新增設定頁的引用。

import setting from './center/setting'
'setting':
在個人頁新增乙個跳轉方法,讓頂部的齒輪可以跳轉到我們新建的設定頁。

/**

* 頁面跳轉方法

在 src 下建立乙個 debug 資料夾,在 debug 下新增乙個 index.js 檔案。

這裡使用 getlogs 的方法把所有日誌拿出來。

在 src/debug/ 下建立 log.js,將記錄的日誌顯示在這裡。

以後再需要的時候也可以把日誌放入本地儲存,甚至直接提交到伺服器。

評論列表顯示及排序,個人中心顯示

usercenter log defusercenter user id user user.query.filter user.id user id first context return render template usercenter.html context 完成個人中心 h4h4 b...

評論列表顯示及排序,個人中心顯示

完成個人中心 1.個人中心的頁面布局 html檔案及相應的樣式檔案 2.定義檢視函式def usercenter user id 3.向前端頁面傳遞引數 4.頁面顯示相應資料 發布的全部問答 個人資訊 5.各個頁面鏈結到個人中心 person loginfirst defusercenter use...

評論列表顯示及排序,個人中心顯示

完成個人中心 1.個人中心的頁面布局 html檔案及相應的樣式檔案 2.定義檢視函式def usercenter user id 3.向前端頁面傳遞引數 4.頁面顯示相應資料 發布的全部問答 個人資訊 5.各個頁面鏈結到個人中心 en class col md 6 column class page...