大事件專案使用者基本資料修改

2022-07-10 09:12:09 字數 3104 閱讀 3440

大事件專案day02

注意:一、後台主頁

1、渲染使用者頭像和名稱

2、統一為有許可權的介面設定headers請求頭

(1)在 baseapi的 ajaxprefilter 中新增如下**

(2)判斷url 裡面是否攜帶 /my/

(3)如果攜帶,那麼我們就設定 options.headers

3、實現退出功能

(1)給退出按鈕繫結點選事件,取消a標籤的預設行為

(2)使用者點選後,彈出提示框(layui中有彈出層的相關**),如果使用者點選確認

(3)移除本地快取的 token,並且跳轉到登入頁面

4、 控制使用者的訪問許可權

(1)在呼叫有許可權介面的時候,指定complete**函式,這個**函式不管成功還是失敗都會呼叫

(2)在**裡面判斷 伺服器返回的的狀態是否等於 1,並且錯誤的資訊是 "身份認證失敗",如果成立,那麼就強制使用者跳轉到登入頁

二、基本資料

1、獲取使用者的基本資訊

(1)匯入 baseapi

(2)在 user_info.js 中定義並呼叫 inituserinfo 函式

(3)在 inituserinfo 函式中 呼叫 $.ajax() 獲取使用者基本資訊

(4)如果返回的 status 為0,那麼代表成功,如果不等於,代表失敗,利用 layer進行提示

2、為表單快速賦值

利用 form.val() 進行快速賦值,賦值之前我們需要給 form 表單新增 乙個 lay-filter 的屬性

(1)為表單指定 lay-filter 屬性

(2)呼叫 form.val() 方法為表單賦值

(3)使用隱藏域儲存使用者的 id 值

注:readonly 唯讀屬性

autocomplete 屬性規定表單是否應該啟用自動完成功能

3、發起請求更新使用者的資訊

(1)監聽表單提交事件,在事件處理函式裡面取消預設行為

(2)查閱介面文件,利用 $.ajax()發起 post 請求

(3)利用 $(this).serialize() 獲取表單資料

(4)如果返回的 status 不為0,說明更新失敗,及逆行提示

(5)更新成功之後,呼叫父頁面中的方法,重新渲染使用者的頭像和使用者資訊

三、重置密碼

1、為密碼框定義校驗規則

(1)匯入 form 模組

(2)利用 form.verify() 來定義規則

①長度必須是6到12位

②不能與舊密碼一致

③兩次密碼是否相同

(3)在對應的表單元素中,利用 lay-verify 來設定自定義校驗規則

2、發起請求實現重置密碼的功能

(1)給form表單繫結 submit 事件,在事件處理函式裡面取消預設行為

(2)查閱介面文件,利用 $.ajax() 來傳送 post 請求

(3)利用 $(this).serialize() 來設定提交的資料

(4)如果 伺服器返回的 status 不等於0,說明失敗,利用layui.layer.msg 來進行提示

(5)如果更新成功,重置一下表單內容

四、更換頭像

1、實現裁剪區域的替換

(1)cropper 裁剪

(2)點選彈出檔案選擇框

①預設的檔案選擇框樣式比較醜,所以我們定義這個結構,讓其隱藏,給檔案選擇框指定可以上傳的檔案型別

注:通過 accept 屬性,可以指定,允許使用者選擇什麼型別的檔案

input type="file" id="file" accept="image/png,image/jpeg"

②下面定義乙個按鈕,文字是 上傳,一旦使用者點選按鈕,我們手動觸發 檔案選擇框的點選事件

(3)換裁剪區域的

①給檔案選擇框繫結 change 事件

②使用者選擇了檔案就會觸發這個事件,通過e.target.files 獲取使用者選擇檔案列表

通過索引0拿到使用者選擇的檔案

④將檔案轉化為路徑

⑤利用 $image 重新初始化裁剪區域

(4)將裁剪後的頭像上傳到伺服器

①為確定按鈕,繫結點選事件

②要拿到使用者裁剪之後的頭像

建立乙個 canvas 畫布,將 canvas 畫布上的內容,轉化為 base64 格式的字串

③呼叫介面,把頭像上傳到伺服器

④了解base64格式的

base64格式你會發現是一段字串,其實base64格式的,就是利用一段字串來描述這張

好處:能夠避免一些額外的請求

缺點:體積會比原來要大 30% 左右

使用場景:不適用大,一些小比較適合使用

有關大事件專案中layui的使用a=href""

Python之繼承大事件

繼承語法 將多個父類放在子類之後的圓括號裡。例如 class subclass superclass1,superclass2,類定義部分 從子類的角度來看,子類擴充套件 extend 子父類 但從父類的角度來看,父類派生 derive 出子類。繼承 復用 子類繼承父類,即可獲得父類的方法,這樣對子...

大事件 Red Hat 宣布併購JBoss!

據外電報道,美國時間4月10日,開源軟體開發商red hat 宣布簽訂了併購jboss的最終協議,以3.5億美元 加現金方式收購軟體製造商jboss。此次收購支付的現金比例為40 餘下的60 以red hat 普通股支付。預計,此次收購將於五月完成。除最初支付的3.5億美元外,red hat可能還要...

中秋快樂 重大事件預告

活動預告 積極參與社群活動與一線技術專家交流一直是愛可生堅持在做的事情,2018年截止9月,愛可生已在北京 廣州 上海 成都4 個城市參與 6 次社群活動並進行技術主題分享 在深圳 北京 上海已舉辦過3 場甲骨文官方支援的mysql技術交流大會,共吸引 500 技術愛好者到場參會 2018年愛可生還...