用easyui 做的网站,济宁君天建设公司网站,唐山哪里有建设网站,模板网站哪家好大事件-02
fix一个bug
原因#xff1a;
开始做注册的时候#xff0c;页面中只有一个 namepassword的input#xff0c;所以 $(‘input[name“password”]’) 可以准确的找到元素后来做登录的时候#xff0c;页面中多了一个namepassword的input#xff0c;所以$(‘input[…大事件-02
fix一个bug
原因
开始做注册的时候页面中只有一个 namepassword的input所以 $(‘input[name“password”]’) 可以准确的找到元素后来做登录的时候页面中多了一个namepassword的input所以$(‘input[name“password”]’)找到的就不是注册的密码框了
解决办法
给注册的密码框加一个 类 reg-password表单验证的时候根据类名来获取密码框 let pwd $(.reg-password).val().trim(); // 获取密码
合并login分支创建index分支
# 先把login分支的内容全部提交# 切换分支到master
git checkout master# 合并分支login
git merge login# 创建并切换到index分支在这个分支上开发首页
git checkout -b index后台首页布局
完成了基本的页面布局
去layui官网文档 -- 页面布局 -- 后台布局把html代码全部复制应用到我们自己的index.html中。
修改一下layui.css 和 layui.all.js的路径
头部区域处理
更换logo删除头部的一个导航菜单修改了右上角比对线上做好的效果
头部字体头像处理
新注册的用户没有图片头像。只能使用用户名的首字母大写当做头像。
!-- 在图片前面加一个span --
span classtext-avatarA/span引入自己的 index.css
/*字体头像*/
.text-avatar {width: 33px;height: 33px;margin-right: 10px;border-radius: 50%;display: inline-block;background-color: #419488;line-height: 33px;text-align: center;vertical-align: middle;color: #fff;font-size: 20px;
}/*默认先让字体头像隐藏*/
.text-avatar {display: none;
}侧边栏菜单手风琴效果和默认选中状态
自己调整出三个菜单首页、文章管理、个人中心实现手风琴效果 给 ul 添加一个属性 lay-shrinkall 默认让首页有选中状态 给 首页 li 添加一个 layui-this 类 默认所有菜单都是收缩状态 去掉 文章管理 li 标签的 layui-nav-itemed 类
侧边栏顶级菜单使用iconfont字体图标
先看demo/assets/fonts/demo_index.html里面有使用方法具体使用方法 index.html 中加载css文件 link relstylesheet href/assets/fonts/iconfont.css在首页、文章管理、个人中心、退出之前分别加入span标签 span classiconfont icon-xxx/span更换类名 注意个人中心是侧边栏的个人中心。不是头部的 自定义样式调整图标的位置
/*跳转顶级菜单的图标位置*/
.iconfont {margin-right: 8px;position: relative;top: 1px;
}侧边栏子菜单使用layui字体图标 使用layui的字体图标不用再次引入css文件了。因为前面引入过了 所以直接在每个子菜单前面加 i classlayui-icon layui-icon-app/i 自定义样式调整一下位置 margin: 0 5px 0 15px;
侧边栏头像和欢迎语 分析 侧边栏的头像和欢迎语和头部的效果差不多 具体做法 复制头部“个人中心”的 a 标签放到侧边栏 ul 前面并且把a换成了div div classuserinfospan classtext-avatarA/spanimg srchttp://t.cn/RCzsdCq classlayui-nav-imgspan classwelcome欢迎nbsp;nbsp;老汤/span
/div样式 /*侧边栏头像和欢迎语*/
.userinfo {display: block;height: 60px;line-height: 60px;text-align: center;
}
.welcome {color: #fff;font-size: 12px;user-select: none;
}iframe标签原理 把原来的内容区的div换成iframe标签 div classlayui-body!-- 内容主体区域 --!-- div stylepadding: 15px;内容主体区域/div --iframe src/home/dashboard.html namefm/iframe
/div修改样式 /*iframe*/
iframe {width: 100%;height: 100%;
}/*去掉iframe的滚动条 -- 给父级的div加 overflow:hidden */
.layui-body {overflow: hidden;
}可以自行创建两个页面然后在侧边栏挂好超链接指定target属性测试一下。
退出功能
删除token跳转页面到 /login.html
具体做法
创建 assets/js/index.js文件index.html 加载 所需的js文件jQuery、index.js在index.js 中完成退出的功能
$(function () {// 加载layer模块let layer layui.layer;// --------------------- 退出 -------------------$(#logout).click(function () {// 1. 询问是否要删除layer.confirm(确定退出吗, { icon: 3, title: 提示 }, function (index) {//do something// 2. 清除tokenlocalStorage.removeItem(token);// 3. 跳转到登录页面location.href /login.html;// 关闭窗口layer.close(index);});});
})获取用户信息并渲染到页面中
思路
调用接口 /my/userinfo 来获取用户的信息那获取到的信息渲染到页面中
步骤
定义全局函数 getUserInfo()页面加载完毕调用 getUserInfo()getUserInfo()内部发送ajax请求获取用户的信息 必须在请求头中携带token否则 请求失败 设置欢迎语 优先使用昵称没有昵称nickname则使用账号username 设置头像 优先使用图片没有图片则使用 名字设置文字头像显示不要使用 show()要设置css
// 定义获取用户信息的函数定义一个全局函数
function getUserInfo () {$.ajax({url: http://www.liulongbin.top:3007/my/userinfo,success: function (res) {// console.log(res);if (res.status 0) {// 渲染页面// 1. 欢迎你 用户名优先使用nickname、没有的话使用usernamelet name res.data.nickname || res.data.username;$(.welcome).html(欢迎nbsp;nbsp; name); // 必须使用html不能使用text因为 nbsp; 也是HTML// 2. 头像优先使用图片、没有图片使用nameif (res.data.user_pic) {$(.layui-nav-img).attr(src, res.data.user_pic);// 让图片显示、让文字隐藏$(.layui-nav-img).show();$(.text-avatar).hide();} else {let w name.substr(0, 1).toUpperCase();// 让文字头像显示不要用show因为show方法会让盒子display: block$(.text-avatar).text(w).css(display, inline-block);$(.layui-nav-img).hide();}}},headers: {Authorization: localStorage.getItem(token)}});
}合并index分支创建user分支
# 先把index分支的代码全部提交
# 切换到master
git checkout master# 合并index到master
git merge index# 创建新分支user并且切换 (用于开发个人中心)
git checkout -b user用户基本信息
准备工作
创建HTML文件、css文件、js文件 创建 /user/userinfo.html创建 /assets/css/user/userinfo.css创建 /assets/js/user/userinfo.js userinfo.html 中加载所需的css和js文件layui.css/自己的css、jQuery、layui.all.js、自己的jsindex.html 头部和侧边栏挂超链接链接到 /user/userinfo.html
页面布局
使用layui的卡片面板来布局
layui文档 -- 页面元素 -- 面板 -- 卡片面板内容区里面放表单
div classlayui-card!-- 卡片面板的标题区 --div classlayui-card-header修改用户信息/div!-- 卡片面板的内容区 --div classlayui-card-body!-- 表单区 --form classlayui-form action!-- 第一行登录名称 --div classlayui-form-itemlabel classlayui-form-label登录名称/labeldiv classlayui-input-blockinput typetext nametitle required lay-verifyrequiredautocompleteoff classlayui-input/div/div!-- 第二行用户昵称 --div classlayui-form-itemlabel classlayui-form-label用户昵称/labeldiv classlayui-input-blockinput typetext nametitle required lay-verifyrequired placeholder请输入昵称autocompleteoff classlayui-input/div/div!-- 第三行用户邮箱 --div classlayui-form-itemlabel classlayui-form-label用户邮箱/labeldiv classlayui-input-blockinput typetext nametitle required lay-verifyrequired placeholder请输入邮箱autocompleteoff classlayui-input/div/div!-- 第四行按钮 --div classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn lay-submit lay-filterformDemo提交修改/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/div/divCSS样式
.layui-card {margin: 20px 20px 0 20px;
}.layui-form {width: 500px;
}我们需要把 index.css 里面的 iframe 加一个灰色的背景色。 为表单赋值
思路
发送ajax请求获取用户信息设置表单各项每个输入框的value值。
具体步骤 先设置表单各项的name属性 发送ajax请求 根据表单各项的name属性找到每个input分别设置value值
细节问题
加一个隐藏域 id input typehidden nameid /放到表单里面的任意位置一会提交表单的时候用设置账号readonly表示该项不能修改
// ------------------ 获取用户信息为表单赋值设置表单各项的默认值 ---------
$.ajax({url: http://www.liulongbin.top:3007/my/userinfo,success: function (res) {console.log(res);// 设置表单的四项值id/username/nickname/email$(input[nameid]).val(res.data.id);$(input[namenickname]).val(res.data.nickname);$(input[nameusername]).val(res.data.username);$(input[nameemail]).val(res.data.email);},headers: {Authorization: localStorage.getItem(token)}
});HTML代码
!--form中加一个隐藏域--
input typehidden nameid!-- 设置每个input的name --
id / username / nickname / email!-- 设置登录账号的readonly属性 --
input readonly typetext nameusername required lay-verifyrequired autocompleteoff classlayui-input使用layui的from模块快速为表单赋值 为表单设置 lay-filteruser 值随便定义我这里使用的是user JS代码中一行代码为表单赋值 let form layui.form;
form.val(user, res.data);要求res.data 这个对象的属性key要和表单各项的name属性值相同才能赋值
完成更新用户信息的功能
注册表单的提交事件阻止默认行为收集表单数据form.val(‘user’) 或者 使用 $(‘form’).serialize() 都行发送ajax请求完成更新更新成功之后提示并且调用父页面的 getUserInfo() 从新渲染用户的头像
// ------------------ 表单提交的时候完成用户信息的更新 -----------------// 1. 注册表单的提交事件$(form).on(submit, function (e) {// 2. 阻止默认行为e.preventDefault();// 3. 收集表单数据let data form.val(user);// console.log(data); // {id: 900, username: abcdabcd, nickname: 你好123, email: 232323qq.comadsf}// 删除掉username因为接口不需要这个参数。不过这个接口测试过传过去也没事// 4. ajax提交数据给接口$.ajax({type: POST,url: http://www.liulongbin.top:3007/my/userinfo,data: data,headers: {Authorization: localStorage.getItem(token)},success: function (res) {// console.log(res);if (res.status 0) {// 5. 修改成功给出提示调用父页面的getUserInfo函数从新渲染index.html layer.msg(res.message);// 调用父页面的getUserInfo函数从新渲染index.html window.parent.getUserInfo();}}});});
表单验证
优化Ajax请求
