大事件-03
用戶信息
表單驗證
html中，直接使用layui提供的內置驗證規則 email
<input type="text" name="email" required lay-verify="required|email" placeholder="請輸入郵箱" autocomplete="off" class="layui-input">
重置表單
// ------------------ 重置表單 --------------------
// 重置的時候，并不是清空輸入框的值，而是恢復默認的樣子
$('button[type="reset"]').on('click', function (e) {e.preventDefault();renderForm(); // 調用函數，從新發送ajax請求，獲取用戶信息，從新為表單賦值
});
關于base64格式的圖片說明
- base64格式只是圖片的一種格式，用字符串表示圖片的格式
- base64格式的優點：減少http請求，加快小圖片的響應速度
- base64格式的缺點：體積比正常圖片大 30% 左右。
https://www.css-js.com/tools/base64.html
優化JS
新建 /assets/js/common.js。代碼如下：
$(function () {// 修改和配置ajax選項$.ajaxPrefilter(function (options) {console.log(options);// 修改url// options.url ==== /my/userinfooptions.url = 'http://www.liulongbin.top:3007' + options.url;// 以 /my 開頭的url需要設置headers// if (options.url.indexOf('/my') > -1) {if (options.url.includes('/my')) {options.headers = {Authorization: localStorage.getItem('token')}}/*** options = {* type: 'xxx',* url: xxxxx* .....* }*/});
})
-
其他HTML頁面，引入common.js文件
- 注意引入的位置（在jQuery之后，在自己的js之前）
-
修改原來的JS。
- 去掉 http://www.liulongbin.top:3007 （查找替換比較快、一個一個改也行）
- 去掉headers
沒有登錄不能訪問有權限的接口
在common.js 開頭的位置，加入一個判斷
如果沒有token，并且地址欄的url也不是login.html 。說明沒有登錄，還想看其他頁面，不允許，直接跳轉到登錄頁面。
// common.js
// 判斷。如果沒有token，直接退出到 /login.html
// 不要放到入口函數里面，需要代碼執行到common.js，馬上就執行代碼
// 請求的路徑不是login.html 并且 還沒有token，那么就跳轉到 /login.html
if (!localStorage.getItem('token') && !location.href.includes('/login.html')) {location.href = '/login.html';
}
測試的時候，注意看一下token有沒有。
上述判斷，對于大多數用戶，沒有問題。
如果，一個懂得編程的人，手動加了一個假token，則上述判斷就會失效。解決辦法是，ajax請求之后，根據接口返回的結果，再次判斷用戶是否是真的登錄了，如果沒有登錄，則跳轉到登錄頁面。
// $.ajaxPrefilter() 函數內部
// 配置complete函數。ajax請求完成（不管成功還是失敗）都會觸發的一個函數
options.complete = function (xhr) {// xhr.responseJSON 表示服務器返回的結果// console.log(xhr);if (xhr.responseJSON.status === 1 && xhr.responseJSON.message === '身份認證失敗！') {// 滿足條件，說明用戶沒有登錄，而且還訪問了需要驗證的接口// 清除假tokenlocalStorage.removeItem('token');// 跳轉到登錄頁面location.href = '/login.html';}
}更新密碼
準備工作
- 創建所需的HTML、css、js文件
- 首頁側邊欄和頭部區域掛好鏈接
- 加載好所需的css和js文件
頁面布局
-
html，去復制 userinfo.html
-
css，去復制 userinfo.css
-
HTML自行修改
- type類型
- 去掉readonly
表單驗證
let form = layui.form;
// --------------- 表單驗證 -----------------
form.verify({// key: value// 驗證規則: []// 驗證規則: function// 驗證長度 6~12位len: [/^\S{6,12}$/, '長度必須6到12位，不能有空格'], // {6,12}不能出現空格// 驗證新密碼不能和原密碼相同diff: function (value) {// value 表示新密碼// 獲取原密碼let oldPwd = $('.oldPwd').val();if (value === oldPwd) {return '新密碼不能和原密碼相同';}},// 驗證兩次新密碼必須相同same: function (value) {// value 表示確認密碼// 獲取新密碼let newPwd = $('.newPwd').val();if (newPwd !== value) {return '兩次密碼不一致';}}
});
- 三個密碼框，都使用len這個驗證規則
- 新密碼，使用diff，這個驗證規則
- 確認密碼，使用 same 驗證規則
自行給原密碼（oldPwd）和新密碼（newPwd）加一個 類
ajax請求，完成更新
// -------------- ajax請求，完成更新 ---------
$('form').on('submit', function (e) {e.preventDefault();// 獲取表單中的數據，ajax提交$.ajax({type: 'POST',url: '/my/updatepwd',data: $(this).serialize(), // 一定要檢查表單各項的name屬性；用layui的表單取值也可以success: function (res) {// console.log(res);layer.msg(res.message);if (res.status === 0) {// 重置輸入框$('button[type="reset"]').click();} }});
})
更換頭像
準備工作
-
創建 /user/avatar.html 、創建 /assets/css/user/avatar.css 創建/assets/js/user/avatar.js
-
側邊欄和頭部區域掛好超鏈接
-
html中引入所需的css和js文件
<!-- 加載layui.css -->
<link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
<!-- 加載cropper.css -->
<link rel="stylesheet" href="/assets/lib/cropper/cropper.css">
<!-- 加載自己的css -->
<link rel="stylesheet" href="/assets/css/user/avatar.css">
<!-- 加載jQuery -->
<script src="/assets/lib/jquery.js"></script>
<!-- 按順序 加載Cropper.js -->
<script src="/assets/lib/cropper/Cropper.js"></script>
<!-- 按順序 jquery-cropper.js -->
<script src="/assets/lib/cropper/jquery-cropper.js"></script>
<!-- 加載layui.all.js -->
<script src="/assets/lib/layui/layui.all.js"></script>
<!-- 加載common -->
<script src="/assets/js/common.js"></script>
<!-- 加載repwd -->
<script src="/assets/js/user/avatar.js"></script>
復制HTML和CSS（完成布局）
完成后的效果：
點擊按鈕，可選擇圖片
- html中加入一個隱藏的文件域
- 點擊上傳按鈕的時候，觸發文件域的單擊事件
<!-- 加一個隱藏的文件域 -->
<input type="file" id="file" style="display: none;" accept="image/*">
<button type="button" class="layui-btn" id="chooseImage">上傳</button>
// ------------- 點擊 上傳 ，可以選擇圖片 ------------
$('#chooseImage').click(function () {$('#file').click();
});
創建剪裁區
- 使用插件 cropper ，提供的方法，實現剪裁區的創建
- 具體做法：
- 找到剪裁區的圖片 （img#image）
- 設置配置項
- 調用cropper方法，創建剪裁區
// --------------- 創建剪裁區 ------------------
// - 找到剪裁區的圖片 （img#image）
let image = $('#image');
// - 設置配置項
let option = {// 縱橫比(寬高比)aspectRatio: 1, // 正方形// 指定預覽區域preview: '.img-preview' // 指定預覽區的類名（選擇器）
};
// - 調用cropper方法，創建剪裁區
image.cropper(option);
更換圖片，重置剪裁區
- 找到選擇的文件（文件對象）
- 為文件對象創建一個臨時的url
- 更換剪裁區的圖片
- 先銷毀原來的剪裁區
- 更改圖片的src屬性
- 重新生成剪裁區
// -------------- 更換剪裁區的圖片 ---------------
// 當文件域的內容改變的時候，更換圖片
$('#file').change(function () {// console.log(111);// 1. 找到選擇的圖片（文件對象）// console.dir(this);let fileObj = this.files[0]; // 我們選擇的圖片的文件對象// 2. 根據文件對象，生成一個臨時的url，用于訪問被選擇的圖片let url = URL.createObjectURL(fileObj);// console.log(url);// 3. 更換剪裁區的圖片的src屬性// - 銷毀原理的剪裁區// - 更換圖片// - 重新創建剪裁區image.cropper('destroy').attr('src', url).cropper(option);
});
點擊保存，實現剪裁并修改頭像
- 調用 cropper 方法，傳遞
getCroppedCanvas參數，得到一個canvas圖片（對象） - 調用canvas的toDataURL()方法，得到base64格式的圖片
- ajax提交即可
// --------------- 點擊 確定 的時候，剪裁圖片，轉成base64格式，提交字符串到接口 ----------
$('#sure').click(function () {// 剪裁得到一張圖片（canvas圖片）let i = image.cropper('getCroppedCanvas', { // 創建一個 Canvas 畫布width: 100,height: 100});// 把圖片轉成base64格式let str = i.toDataURL(); // 把canvas圖片轉成base64格式// console.log(str); // base64格式的字符串// ajax提交字符串給接口$.ajax({type: 'POST',url: '/my/update/avatar',data: {avatar: str},success: function (res) {layer.msg(res.message);if (res.status === 0) {// 更換成功，調用父頁面的 getUserInfo() ，重新渲染頭像window.parent.getUserInfo();}}});
});
合并user分支，創建article分支
# 提交當前 user 分支所有的代碼
# 切換到master
git checkout master# 合并 user 到 master
git merge user# 創建并切換到article 分支
git checkout -b article
類別列表
準備工作
- 創建文件
- /article/category.html
- /assets/css/article/category.css
- /assets/js/article/category.js
- 側邊欄掛超鏈接
- 加載所需的css和js
頁面布局
<body><div class="layui-card"><div class="layui-card-header">文章管理<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">添加類別</button></div><div class="layui-card-body"><!-- 內容區 --><table class="layui-table"><colgroup><col width="35%"><col width="35%"><col></colgroup><thead><tr><th>類別名稱</th><th>類別別名</th><th>操作</th></tr> </thead><tbody><!-- 模板引擎遍歷出來的內容 --></tbody></table></div></div><script type="text/html" id="list">{{each data val}}<tr><td>{{val.name}}</td><td>{{val.alias}}</td><td><button type="button" class="layui-btn layui-btn-xs">編輯</button><button type="button" class="layui-btn layui-btn layui-btn-danger layui-btn-xs">刪除</button></td></tr>{{/each}}</script>
</body>
模板引擎渲染頁面
$(function(){//------------------------ajax請求列表-----------------------renderHtml();function renderHtml(){$.ajax({url: '/my/article/cates',success:function(res){// console.log(res);// if(res.status === 0){let str = template('list',res);// console.log(str);//把最終的結果放在tbody中去$('tbody').html(str);// }},});}
})
基本用法)
