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

Ajax — 大事件项目（第三天）相关推荐

Ajax — 大事件项目（第二天）
大事件-02 fix一个bug 原因: 开始做注册的时候,页面中只有一个 name=password的input,所以 $('input[name="password"]') 可以 ...
Ajax — 大事件项目（第四天）
分类管理添加分类初步使用弹出层给 "添加分类" 绑定一个单击事件单击事件中,使用 layer.open() 实现一个弹出层 type: 1, 弹层的类型是页面层 title ...
Ajax — 大事件项目（第一天）
应用的前端技术 Ajax (重要) - jQuery方式接口请求 Layui 框架使用 HTML + CSS + JS 项目说明和演示线上 DEMO 项目地址:http://www.liulongb ...
45 大事件项目 =＞ [01] 后台管理项目ajax练习
目标利用Git管理大事件项目代码安装并且使用 Live Server插件学会查阅layui文档绘制出登录注册页面结构添加表单元素自定义验证规则查阅接口文档完成登录注册功能知道iframe ...
黑马-大事件项目（总结+BUG修复）
前言最近把Nodejs和Ajax学习了一下,找到一个很不错的练手项目:黑马刘龙彬老师主讲的大事件项目,整体看完,给刘老师点个赞,讲的非常细致,开发流程清晰,涉及的知识点也很精准.另外黑马还为这个项目 ...
Node — 第七天（大事件项目接口实现一）
关于JS错误处理 node中和mysql中的错误处理 node和MySQL提供的方法,已经对错误信息进行了封装,只需要使用 err.message 即可获取到错误信息. 比如: const fs = ...
大数据项目（三）————电商项目介绍（一）
1.项目介绍本项目主要用于互联网电商企业中,使用Spark技术开发的大数据统计分析平台,对电商网站的各种用户行为(访问行为.购物行为.广告点击行为等)进行复杂的分析.用统计分析出来的数据,辅助公司中 ...
Node — 第九天（大事件项目接口实现三）
文章管理接口设计数据表添加文章接口编写接口,使用postman模拟提交formdata类型的数据在article.js 中,加入 /add 路由 postman模拟提交formdata类型的数 ...
Node — 第八天（大事件项目接口实现二）
如何处理MySQL的错误 MySQL的错误信息,可以通过err来获取.这是没有问题的. 但是,我们加入了Promise,Promise中的错误,在外部是获取不到的,只能使用Promise相关方法来获取 ...

Ajax — 大事件项目（第三天）

大事件-03

用户信息

表单验证

重置表单

关于base64格式的图片说明

优化JS

没有登录不能访问有权限的接口

更新密码

准备工作

页面布局

表单验证

ajax请求，完成更新

更换头像

准备工作

复制HTML和CSS（完成布局）

点击按钮，可选择图片

创建剪裁区

更换图片，重置剪裁区

点击保存，实现剪裁并修改头像

合并user分支，创建article分支

类别列表

准备工作

页面布局

模板引擎渲染页面

Ajax — 大事件项目（第三天）相关推荐

最新文章

热门文章