大事件-02

fix一個bug

原因：

開始做注冊的時候，頁面中只有一個 name=password的input，所以 $(‘input[name=“password”]’) 可以準確的找到元素
后來做登錄的時候，頁面中多了一個name=password的input，所以$(‘input[name=“password”]’)找到的就不是注冊的密碼框了

解決辦法：

給注冊的密碼框加一個類 reg-password
表單驗證的時候，根據類名來獲取密碼框 let pwd = $('.reg-password').val().trim(); // 獲取密碼

合并login分支，創建index分支

# 先把login分支的內容全部提交# 切換分支到master
git checkout master# 合并分支login
git merge login# 創建并切換到index分支（在這個分支上，開發首頁）
git checkout -b index

后臺首頁布局

完成了基本的頁面布局

去layui官網，文檔 --> 頁面布局 --> 后臺布局，把html代碼全部復制，應用到我們自己的index.html中。

修改一下layui.css 和 layui.all.js的路徑

頭部區域處理

更換logo
刪除頭部的一個導航菜單
修改了右上角（比對線上做好的效果）

頭部字體頭像處理

新注冊的用戶，沒有圖片頭像。只能使用用戶名的首字母（大寫）當做頭像。

<!-- 在圖片前面，加一個span -->
<span class="text-avatar">A</span>

引入自己的 index.css

/*字體頭像*/
.text-avatar {width: 33px;height: 33px;margin-right: 10px;border-radius: 50%;display: inline-block;background-color: #419488;line-height: 33px;text-align: center;vertical-align: middle;color: #fff;font-size: 20px;
}/*默認先讓字體頭像隱藏*/
.text-avatar {display: none;
}

側邊欄菜單手風琴效果和默認選中狀態

自己調整出三個菜單（首頁、文章管理、個人中心）
實現手風琴效果
- 給 ul 添加一個屬性 lay-shrink="all"
默認讓首頁有選中狀態
- 給首頁 li 添加一個 layui-this 類
默認所有菜單都是收縮狀態
- 去掉文章管理 li 標簽的 layui-nav-itemed 類

側邊欄頂級菜單使用iconfont字體圖標

先看demo（/assets/fonts/demo_index.html），里面有使用方法
具體使用方法
- index.html 中加載css文件 <link rel="stylesheet" href="/assets/fonts/iconfont.css">
- 在首頁、文章管理、個人中心、退出之前，分別加入span標簽 <span class="iconfont icon-xxx"></span>
- 更換類名

注意，個人中心，是側邊欄的個人中心。不是頭部的

自定義樣式，調整圖標的位置

/*跳轉頂級菜單的圖標位置*/
.iconfont {margin-right: 8px;position: relative;top: 1px;
}

側邊欄子菜單使用layui字體圖標

使用layui的字體圖標，不用再次引入css文件了。因為前面引入過了
所以，直接在每個子菜單前面加 <i class="layui-icon layui-icon-app"></i>
自定義樣式，調整一下位置 margin: 0 5px 0 15px;

側邊欄頭像和歡迎語

分析：
- 側邊欄的頭像和歡迎語和頭部的效果差不多

具體做法

復制頭部“個人中心”的 a 標簽，放到側邊欄 ul 前面，并且把a換成了div

<div class="userinfo"><span class="text-avatar">A</span><img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span class="welcome">歡迎&nbsp;&nbsp;老湯</span>
</div>

樣式

/*側邊欄頭像和歡迎語*/
.userinfo {display: block;height: 60px;line-height: 60px;text-align: center;
}
.welcome {color: #fff;font-size: 12px;user-select: none;
}

iframe標簽原理

在這里插入圖片描述

把原來的內容區的div換成iframe標簽

<div class="layui-body"><!-- 內容主體區域 --><!-- <div style="padding: 15px;">內容主體區域</div> --><iframe src="/home/dashboard.html" name="fm"></iframe>
</div>

修改樣式

/*iframe*/
iframe {width: 100%;height: 100%;
}/*去掉iframe的滾動條  --   給父級的div加 overflow:hidden */
.layui-body {overflow: hidden;
}

可以自行創建兩個頁面，然后在側邊欄掛好超鏈接，指定target屬性，測試一下。

退出功能

刪除token
跳轉頁面到 /login.html

具體做法：

創建 assets/js/index.js文件
index.html 加載所需的js文件（jQuery、index.js）
在index.js 中，完成退出的功能

$(function () {// 加載layer模塊let layer = layui.layer;// ---------------------  退出 -------------------$('#logout').click(function () {// 1. 詢問是否要刪除layer.confirm('確定退出嗎？', { icon: 3, title: '提示' }, function (index) {//do something// 2. 清除tokenlocalStorage.removeItem('token');// 3. 跳轉到登錄頁面location.href = '/login.html';// 關閉窗口layer.close(index);});});
})

獲取用戶信息并渲染到頁面中

思路：

調用接口 /my/userinfo ，來獲取用戶的信息
那獲取到的信息渲染到頁面中

步驟：

定義全局函數 getUserInfo()
頁面加載完畢，調用 getUserInfo()
getUserInfo()內部，發送ajax請求，獲取用戶的信息
- 必須在請求頭中，攜帶token，否則請求失敗
設置歡迎語
- 優先使用昵稱，沒有昵稱（nickname），則使用賬號（username）
設置頭像
- 優先使用圖片
- 沒有圖片，則使用名字（設置文字頭像顯示，不要使用 show()，要設置css）

// 定義獲取用戶信息的函數，定義一個全局函數
function getUserInfo () {$.ajax({url: 'http://www.liulongbin.top:3007/my/userinfo',success: function (res) {// console.log(res);if (res.status === 0) {// 渲染頁面// 1. 歡迎你 用戶名（優先使用nickname、沒有的話，使用username）let name = res.data.nickname || res.data.username;$('.welcome').html('歡迎&nbsp;&nbsp;' + name); // 必須使用html，不能使用text，因為 &nbsp; 也是HTML// 2. 頭像（優先使用圖片、沒有圖片使用name）if (res.data.user_pic) {$('.layui-nav-img').attr('src', res.data.user_pic);// 讓圖片顯示、讓文字隱藏$('.layui-nav-img').show();$('.text-avatar').hide();} else {let w = name.substr(0, 1).toUpperCase();// 讓文字頭像顯示，不要用show，因為show方法會讓盒子display: block$('.text-avatar').text(w).css('display', 'inline-block');$('.layui-nav-img').hide();}}},headers: {Authorization: localStorage.getItem('token')}});
}

合并index分支，創建user分支

# 先把index分支的代碼全部提交
# 切換到master
git checkout master# 合并index到master
git merge index# 創建新分支user，并且切換 (用于開發個人中心)
git checkout -b user

用戶基本信息

準備工作

創建HTML文件、css文件、js文件
- 創建 /user/userinfo.html
- 創建 /assets/css/user/userinfo.css
- 創建 /assets/js/user/userinfo.js
userinfo.html 中加載所需的css和js文件（layui.css/自己的css、jQuery、layui.all.js、自己的js）
index.html 頭部和側邊欄，掛超鏈接，鏈接到 /user/userinfo.html

頁面布局

使用layui的卡片面板來布局

layui文檔 --> 頁面元素 --> 面板 --> 卡片面板
內容區里面放表單

<div class="layui-card"><!-- 卡片面板的標題區 --><div class="layui-card-header">修改用戶信息</div><!-- 卡片面板的內容區 --><div class="layui-card-body"><!-- 表單區 --><form class="layui-form" action=""><!-- 第一行：登錄名稱 --><div class="layui-form-item"><label class="layui-form-label">登錄名稱</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required"autocomplete="off" class="layui-input"></div></div><!-- 第二行：用戶昵稱 --><div class="layui-form-item"><label class="layui-form-label">用戶昵稱</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required" placeholder="請輸入昵稱"autocomplete="off" class="layui-input"></div></div><!-- 第三行：用戶郵箱 --><div class="layui-form-item"><label class="layui-form-label">用戶郵箱</label><div class="layui-input-block"><input type="text" name="title" required lay-verify="required" placeholder="請輸入郵箱"autocomplete="off" class="layui-input"></div></div><!-- 第四行：按鈕 --><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">提交修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div></div>

CSS樣式：

.layui-card {margin: 20px 20px 0 20px;
}.layui-form {width: 500px;
}

我們需要把 index.css 里面的 iframe 加一個灰色的背景色。

為表單賦值

思路：

發送ajax請求，獲取用戶信息
設置表單各項（每個輸入框）的value值。

具體步驟：

先設置表單各項的name屬性
發送ajax請求
根據表單各項的name屬性，找到每個input，分別設置value值

細節問題：

加一個隱藏域 id <input type="hidden" name="id" />，放到表單里面的任意位置，一會提交表單的時候用
設置賬號readonly，表示該項不能修改

// ------------------   獲取用戶信息，為表單賦值（設置表單各項的默認值） ---------
$.ajax({url: 'http://www.liulongbin.top:3007/my/userinfo',success: function (res) {console.log(res);// 設置表單的四項值（id/username/nickname/email）$('input[name="id"]').val(res.data.id);$('input[name="nickname"]').val(res.data.nickname);$('input[name="username"]').val(res.data.username);$('input[name="email"]').val(res.data.email);},headers: {Authorization: localStorage.getItem('token')}
});

HTML代碼：

<!--form中加一個隱藏域-->
<input type="hidden" name="id"><!-- 設置每個input的name -->
id / username / nickname / email<!-- 設置登錄賬號的readonly屬性 -->
<input readonly type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input">

使用layui的from模塊快速為表單賦值

為表單設置 lay-filter="user" ，值隨便定義，我這里使用的是user
JS代碼中，一行代碼為表單賦值
```
let form = layui.form;
form.val('user', res.data);
```
- 要求，res.data 這個對象的屬性（key）要和表單各項的name屬性值相同，才能賦值

完成更新用戶信息的功能

注冊表單的提交事件
阻止默認行為
收集表單數據（form.val(‘user’) 或者使用 $(‘form’).serialize() 都行）
發送ajax請求，完成更新
更新成功之后，提示，并且調用父頁面的 getUserInfo() 從新渲染用戶的頭像

// ------------------   表單提交的時候，完成用戶信息的更新 -----------------// 1. 注冊表單的提交事件$('form').on('submit', function (e) {// 2. 阻止默認行為e.preventDefault();// 3. 收集表單數據let data = form.val('user');// console.log(data); // {id: "900", username: "abcdabcd", nickname: "你好123", email: "232323@qq.comadsf"}// 刪除掉username，因為接口不需要這個參數。不過這個接口測試過，傳過去也沒事// 4. ajax提交數據給接口$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/my/userinfo',data: data,headers: {Authorization: localStorage.getItem('token')},success: function (res) {// console.log(res);if (res.status === 0) {// 5. 修改成功，給出提示，調用父頁面的getUserInfo函數，從新渲染index.html layer.msg(res.message);// 調用父頁面的getUserInfo函數，從新渲染index.html window.parent.getUserInfo();}}});});