大事件-03

用戶信息

表單驗證

html中，直接使用layui提供的內(nèi)置驗證規(guī)則 email

<input type="text" name="email" required lay-verify="required|email" placeholder="請輸入郵箱" autocomplete="off" class="layui-input">

重置表單

// ------------------ 重置表單 -------------------- // 重置的時候，并不是清空輸入框的值，而是恢復(fù)默認的樣子 $('button[type="reset"]').on('click', function (e) {e.preventDefault();renderForm(); // 調(diào)用函數(shù)，從新發(fā)送ajax請求，獲取用戶信息，從新為表單賦值 });

關(guān)于base64格式的圖片說明

• base64格式只是圖片的一種格式，用字符串表示圖片的格式
• base64格式的優(yōu)點：減少http請求，加快小圖片的響應(yīng)速度
• base64格式的缺點：體積比正常圖片大 30% 左右。

https://www.css-js.com/tools/base64.html

優(yōu)化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需要設(shè)置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

沒有登錄不能訪問有權(quán)限的接口

在common.js 開頭的位置，加入一個判斷

如果沒有token，并且地址欄的url也不是login.html 。說明沒有登錄，還想看其他頁面，不允許，直接跳轉(zhuǎn)到登錄頁面。

// common.js // 判斷。如果沒有token，直接退出到 /login.html // 不要放到入口函數(shù)里面，需要代碼執(zhí)行到common.js，馬上就執(zhí)行代碼 // 請求的路徑不是login.html 并且 還沒有token，那么就跳轉(zhuǎn)到 /login.html if (!localStorage.getItem('token') && !location.href.includes('/login.html')) {location.href = '/login.html'; }

測試的時候，注意看一下token有沒有。

上述判斷，對于大多數(shù)用戶，沒有問題。

如果，一個懂得編程的人，手動加了一個假token，則上述判斷就會失效。解決辦法是，ajax請求之后，根據(jù)接口返回的結(jié)果，再次判斷用戶是否是真的登錄了，如果沒有登錄，則跳轉(zhuǎn)到登錄頁面。

// $.ajaxPrefilter() 函數(shù)內(nèi)部 // 配置complete函數(shù)。ajax請求完成（不管成功還是失敗）都會觸發(fā)的一個函數(shù) options.complete = function (xhr) {// xhr.responseJSON 表示服務(wù)器返回的結(jié)果// console.log(xhr);if (xhr.responseJSON.status === 1 && xhr.responseJSON.message === '身份認證失敗！') {// 滿足條件，說明用戶沒有登錄，而且還訪問了需要驗證的接口// 清除假tokenlocalStorage.removeItem('token');// 跳轉(zhuǎn)到登錄頁面location.href = '/login.html';} }

更新密碼

準備工作

• 創(chuàng)建所需的HTML、css、js文件
• 首頁側(cè)邊欄和頭部區(qū)域掛好鏈接
• 加載好所需的css和js文件

頁面布局

• html，去復(fù)制 userinfo.html

• css，去復(fù)制 userinfo.css

• HTML自行修改

  • type類型
  • 去掉readonly

表單驗證

let form = layui.form; // --------------- 表單驗證 ----------------- form.verify({// key: value// 驗證規(guī)則: []// 驗證規(guī)則: function// 驗證長度 6~12位len: [/^\S{6,12}$/, '長度必須6到12位，不能有空格'], // {6,12}不能出現(xiàn)空格// 驗證新密碼不能和原密碼相同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這個驗證規(guī)則
• 新密碼，使用diff，這個驗證規(guī)則
• 確認密碼，使用 same 驗證規(guī)則

自行給原密碼（oldPwd）和新密碼（newPwd）加一個 類

ajax請求，完成更新

// -------------- ajax請求，完成更新 --------- $('form').on('submit', function (e) {e.preventDefault();// 獲取表單中的數(shù)據(jù)，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();} }}); })

更換頭像

準備工作

• 創(chuàng)建 /user/avatar.html 、創(chuàng)建 /assets/css/user/avatar.css 創(chuàng)建/assets/js/user/avatar.js

• 側(cè)邊欄和頭部區(qū)域掛好超鏈接

• 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>

復(fù)制HTML和CSS（完成布局）

完成后的效果：

點擊按鈕，可選擇圖片

• html中加入一個隱藏的文件域
• 點擊上傳按鈕的時候，觸發(fā)文件域的單擊事件

<!-- 加一個隱藏的文件域 --> <input type="file" id="file" style="display: none;" accept="image/*"> <button type="button" class="layui-btn" id="chooseImage">上傳</button> // ------------- 點擊 上傳 ，可以選擇圖片 ------------ $('#chooseImage').click(function () {$('#file').click(); });

創(chuàng)建剪裁區(qū)

• 使用插件 cropper ，提供的方法，實現(xiàn)剪裁區(qū)的創(chuàng)建
• 具體做法：
  • 找到剪裁區(qū)的圖片 （img#image）
  • 設(shè)置配置項
  • 調(diào)用cropper方法，創(chuàng)建剪裁區(qū)

// --------------- 創(chuàng)建剪裁區(qū) ------------------ // - 找到剪裁區(qū)的圖片 （img#image） let image = $('#image'); // - 設(shè)置配置項 let option = {// 縱橫比(寬高比)aspectRatio: 1, // 正方形// 指定預(yù)覽區(qū)域preview: '.img-preview' // 指定預(yù)覽區(qū)的類名（選擇器） }; // - 調(diào)用cropper方法，創(chuàng)建剪裁區(qū) image.cropper(option);

更換圖片，重置剪裁區(qū)

• 找到選擇的文件（文件對象）
• 為文件對象創(chuàng)建一個臨時的url
• 更換剪裁區(qū)的圖片
  • 先銷毀原來的剪裁區(qū)
  • 更改圖片的src屬性
  • 重新生成剪裁區(qū)

// -------------- 更換剪裁區(qū)的圖片 --------------- // 當文件域的內(nèi)容改變的時候，更換圖片 $('#file').change(function () {// console.log(111);// 1. 找到選擇的圖片（文件對象）// console.dir(this);let fileObj = this.files[0]; // 我們選擇的圖片的文件對象// 2. 根據(jù)文件對象，生成一個臨時的url，用于訪問被選擇的圖片let url = URL.createObjectURL(fileObj);// console.log(url);// 3. 更換剪裁區(qū)的圖片的src屬性// - 銷毀原理的剪裁區(qū)// - 更換圖片// - 重新創(chuàng)建剪裁區(qū)image.cropper('destroy').attr('src', url).cropper(option); });

點擊保存，實現(xiàn)剪裁并修改頭像

• 調(diào)用 cropper 方法，傳遞 getCroppedCanvas 參數(shù)，得到一個canvas圖片（對象）
• 調(diào)用canvas的toDataURL()方法，得到base64格式的圖片
• ajax提交即可

// --------------- 點擊 確定 的時候，剪裁圖片，轉(zhuǎn)成base64格式，提交字符串到接口 ---------- $('#sure').click(function () {// 剪裁得到一張圖片（canvas圖片）let i = image.cropper('getCroppedCanvas', { // 創(chuàng)建一個 Canvas 畫布width: 100,height: 100});// 把圖片轉(zhuǎn)成base64格式let str = i.toDataURL(); // 把canvas圖片轉(zhuǎn)成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) {// 更換成功，調(diào)用父頁面的 getUserInfo() ，重新渲染頭像window.parent.getUserInfo();}}}); });

合并user分支，創(chuàng)建article分支

# 提交當前 user 分支所有的代碼 # 切換到master git checkout master# 合并 user 到 master git merge user# 創(chuàng)建并切換到article 分支 git checkout -b article

類別列表

準備工作

• 創(chuàng)建文件
  • /article/category.html
  • /assets/css/article/category.css
  • /assets/js/article/category.js
• 側(cè)邊欄掛超鏈接
• 加載所需的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"><!-- 內(nèi)容區(qū) --><table class="layui-table"><colgroup><col width="35%"><col width="35%"><col></colgroup><thead><tr><th>類別名稱</th><th>類別別名</th><th>操作</th></tr> </thead><tbody><!-- 模板引擎遍歷出來的內(nèi)容 --></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);//把最終的結(jié)果放在tbody中去$('tbody').html(str);// }},});} })

總結(jié)

以上是生活随笔為你收集整理的Ajax — 大事件项目（第三天）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。