大事件-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);//    }},});}
})