三天上手后台管理系统(附源码)----第二天：侧边栏个人中心模块

于 2024-04-02 17:27:09 发布
阅读量490 收藏 10
点赞数 5
分类专栏： 2024年程序员学习 文章标签： okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code8889/article/details/137278174
版权
  • 新建 /assets/css/user/user_info.css

html,

body {

margin: 0;

padding: 0;

}

body {

background-color: #f2f3f5;

padding: 15px;

}

2.2 绘制基本资料对应的表单

  • 利用 layui 中表单元素来搭建

  • 一共使用 三个 input 输入框的结构

  • 还需要一个 提交按钮 和 重置按钮

提交修改

重置

  • 在页面底部导入如下的脚本
  • 在 user_info.js 中校验表单数据

$(function() {

var form = layui.form

form.verify({

nickname: function(value) {

if (value.length > 6) {

return ‘昵称长度必须在 1 ~ 6 个字符之间！’

}

}

})

})

2.3 获取用户的基本信息

  • 导入 baseAPI

  • 在 user_info.js 中定义并调用 initUserInfo 函数

  • 在 initUserInfo 函数中 调用 $.ajax() 获取用户基本信息

  • 如果返回的 status 为0，那么代表成功，如果不等于，代表失败，利用 layer进行提示

initUserInfo()

// 初始化用户的基本信息

function initUserInfo() {

$.ajax({

method: ‘GET’,

url: ‘/my/userinfo’,

success: function(res) {

if (res.status !== 0) {

return layer.msg(‘获取用户信息失败！’)

}

console.log(res)

}

})

}

2.4 为表单快速赋值

利用 form.val() 进行快速赋值，赋值之前我们需要给 form 表单添加 一个 lay-filter 的属性

  • 为表单指定 lay-filter 属性
  • 调用 form.val() 方法为表单赋值

form.val(‘formUserInfo’, res.data)

  • 使用隐藏域保存用户的 id 值

2.5 实现表单的重置效果

用户点击了重置按钮后，表单里面的内容应该被重置

  • 阻止表单的默认重置行为

  • 重新调用 initUserInfo() 函数，重新获取用户信息

// 重置表单的数据

$(‘#btnReset’).on(‘click’, function(e) {

// 阻止表单的默认重置行为

e.preventDefault()

initUserInfo()

})

2.6 发起请求更新用户的信息

  • 监听表单提交事件，在事件处理函数里面取消默认行为

  • 查阅接口文档，利用 $.ajax()发起 post 请求

  • 利用 $(this).serialize() 获取表单数据

  • 如果返回的 status 不为0，说明更新失败，及逆行提示

  • 更新成功之后，调用父页面中的方法，重新渲染用户的头像和用户信息

// 监听表单的提交事件

$(‘.layui-form’).on(‘submit’, function(e) {

// 阻止表单的默认提交行为

e.preventDefault()

// 发起 ajax 数据请求

$.ajax({

method: ‘POST’,

url: ‘/my/userinfo’,

data: $(this).serialize(),

success: function(res) {

if (res.status !== 0) {

return layer.msg(‘更新用户信息失败！’)

}

layer.msg(‘更新用户信息成功！’)

// 调用父页面中的方法，重新渲染用户的头像和用户的信息

window.parent.getUserInfo()

}

})

})

🥇三. 重置密码(⭐⭐⭐)

=============================================================================

在这里插入图片描述

3.1 渲染重置密码的页面结构

  • 新建重置密码的页面，user_pwd.html，给侧边栏对应a标签设置 href的路径，以及target属性

  • 利用 layui 的卡片（页面元素 > 面板 > 卡片布局） 搭建结构

  • 利用 layui 的表单元素（页面元素 > 表单）来搭建里面内容

  • 修改下里面的文字内容

Document
修改密码

修改密码

重置

  • 在 /assets/css/user/user_pwd.css 中编写相关样式

html,

body {

margin: 0;

padding: 0;

}

body {

padding: 15px;

background-color: #f2f3f5;

}

.layui-form {

width: 500px;

}

3.2 为密码框定义校验规则

  • 导入相关js脚本 （layui的js > jQuery的js > baseAPI.js > 导入自己的js）

  • 导入 form 模块

  • 利用 form.verify() 来定义规则

  • 长度必须是6到12位

  • 不能与旧密码一致

  • 两次密码是否相同

  • 在对应的表单元素中，利用 lay-verify 来设置自定义校验规则

$(function() {

var form = layui.form

form.verify({

pwd: [/1{6,12}$/, ‘密码必须6到12位，且不能出现空格’],

samePwd: function(value) {

if (value === $(‘[name=oldPwd]’).val()) {

return ‘新旧密码不能相同！’

}

},

rePwd: function(value) {

if (value !== $(‘[name=newPwd]’).val()) {

return ‘两次密码不一致！’

}

}

})

})

  • 为密码框分别添加对应的校验规则

修改密码

重置

3.3 发起请求实现重置密码的功能

  • 给form表单绑定 submit 事件，在事件处理函数里面取消默认行为

  • 查阅接口文档，利用 $.ajax() 来发送 post 请求

  • 利用 $(this).serialize() 来设置提交的数据

  • 如果 服务器返回的 status 不等于0，说明失败，利用 layui.layer.msg 来进行提示

  • 如果更新成功，重置一下表单内容

$(‘.layui-form’).on(‘submit’, function(e) {

e.preventDefault()

$.ajax({

method: ‘POST’,

url: ‘/my/updatepwd’,

data: $(this).serialize(),

success: function(res) {

if (res.status !== 0) {

return layui.layer.msg(‘更新密码失败！’)

}

layui.layer.msg(‘更新密码成功！’)

// 重置表单

$(‘.layui-form’)[0].reset()

}

})

})

🥇四. 更换头像

========================================================================

在这里插入图片描述

4.1 初步渲染更换头像页面的结构

  • 创建 /user/user_avatar.html 页面

  • 放入卡片区域 (页面元素 > 面板 > 卡片)，修改对应文字信息

  • 在侧边栏对应的 a 标签设置 href 属性 和 target 属性

Document
更换头像

卡片式面板面板通常用于非白色背景色的主体内

从而映衬出边框投影

  • 修改一下对应样式

html,

body {

margin: 0;

padding: 0;

}

body {

padding: 15px;

background-color: #f2f3f5;

}

  • 修改 index.html 中对应链接的属性

更换头像

4.2 实现裁剪区域图片的替换(⭐⭐⭐)

4.2.1 cropper 图片裁剪

  • 在 <head> 中导入 cropper.css 样式表：
  • 在<body>的结束标签之前，按顺序导入如下的 js 脚本
  • 在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构

100 x 100

50 x 50

上传

确定

  • 美化的样式

/* 设置卡片主体区域的宽度 */

.layui-card-body {

width: 500px;

}

/* 设置按钮行的样式 */

.row2 {

display: flex;

justify-content: flex-end;

margin-top: 20px;

}

/* 设置裁剪区域的样式 */

.cropper-box {

width: 350px;

height: 350px;

background-color: cyan;

overflow: hidden;

}

/* 设置第一个预览区域的样式 */

.w100 {

width: 100px;

height: 100px;

background-color: gray;

}

/* 设置第二个预览区域的样式 */

.w50 {

width: 50px;

height: 50px;

background-color: gray;

margin-top: 50px;

}

/* 设置预览区域下方文本的样式 */

.size {

font-size: 12px;

color: gray;

text-align: center;

}

/* 设置图片行的样式 */

.row1 {

display: flex;

}

/* 设置 preview-box 区域的的样式 */

.preview-box {

display: flex;

flex-direction: column;

flex: 1;

align-items: center;

}

/* 设置 img-preview 区域的样式 */

.img-preview {

overflow: hidden;

border-radius: 50%;

}

  • 实现基本裁剪效果

  • 获取裁剪区域的 DOM 元素

  • 配置选项: 纵横比、指定预览区域

  • 创建裁剪区域

// 1.1 获取裁剪区域的 DOM 元素

var $image = $(‘#image’)

// 1.2 配置选项

const options = {

// 纵横比

aspectRatio: 1,

// 指定预览区域

preview: ‘.img-preview’

}

// 1.3 创建裁剪区域

$image.cropper(options)

4.2.2 点击弹出文件选择框

  • 默认的文件选择框样式比较丑，所以我们定义这个结构，让其隐藏，给文件选择框指定可以上传的文件类型
  • 下面定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件

$(‘#btnChooseImage’).on(‘click’, function() {

$(‘#file’).click()

})

4.2.3 更换裁剪区域的图片

  • 给文件选择框绑定 change 事件

  • 用户选择了文件就会触发这个事件，通过 e.target.files 获取用户选择文件列表

  • 通过索引0拿到用户选择的文件

  • 将文件转化为路径

  • 利用 $image 重新初始化裁剪区域

// 为文件选择框绑定 change 事件

$(‘#file’).on(‘change’, function(e) {

// 获取用户选择的文件

var filelist = e.target.files

if (filelist.length === 0) {

return layer.msg(‘请选择照片！’)

}

// 1. 拿到用户选择的文件

var file = e.target.files[0]

// 2. 将文件，转化为路径

var imgURL = URL.createObjectURL(file)

// 3. 重新初始化裁剪区域

$image

.cropper(‘destroy’) // 销毁旧的裁剪区域

.attr(‘src’, imgURL) // 重新设置图片路径

.cropper(options) // 重新初始化裁剪区域

})

4.3 将裁剪后的头像上传到服务器

  • 为确定按钮，绑定点击事件

  • 要拿到用户裁剪之后的头像

  • 创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 base64 格式的字符串

var dataURL = $image

.cropper(‘getCroppedCanvas’, {

// 创建一个 Canvas 画布

width: 100,

height: 100

})

.toDataURL(‘image/png’)

  • 调用接口，把头像上传到服务器

$.ajax({

method: ‘POST’,

url: ‘/my/update/avatar’,

data: {

avatar: dataURL

},

success: function(res) {

if (res.status !== 0) {

return layer.msg(‘更换头像失败！’)

}

layer.msg(‘更换头像成功！’)

window.parent.getUserInfo()

}

})

4.3.1 了解base64格式的图片

base64格式你会发现是一段字符串，其实base64格式的图片，就是利用一段字符串来描述这张图片

**好处：**能够避免一些额外的图片请求

**缺点：**体积会比原来图片要大 30% 左右

**使用场景：**不适用大图片，一些小图片比较适合使用

4.4 设置头部区域的快捷方式

  • 打开 index.html，修改头部 个人中心 下的三个快捷方式如下
基本资料
更换头像
重置密码

4.5 本地代码推送到 github

  • git branch 查看一下分支

  • git add . 添加到暂存区

  • git commit -m 进行提交到本地仓库

  • git push -u origin user 推送到远程仓库的user分支

  • git checkout master 切换到主分支

  • git merge user 合并分支

  • git push 推送到远程仓库的主分支

🥇 五. 文章分类

=========================================================================

在这里插入图片描述

5.1 创建并显示文章分类页面

  • 创建 /article/art_cate.html 页面，并初始化如下的UI结构
Document

文章类别管理

添加类别

分类名称 分类别名 操作 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
  • 定义 /assets/css/article/art_cate.css 美化样式

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
img

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

tml>

  • 定义 /assets/css/article/art_cate.css 美化样式

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-FvQRNKCa-1712050017323)]
[外链图片转存中…(img-JNbR9eoS-1712050017323)]
[外链图片转存中…(img-dl7kdjKg-1712050017323)]
[外链图片转存中…(img-dd6utRa3-1712050017324)]
[外链图片转存中…(img-VnDuV3jo-1712050017324)]
[外链图片转存中…(img-aPIMwQbp-1712050017324)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-nwObJCyY-1712050017325)]

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

[外链图片转存中…(img-MmnAvMIt-1712050017325)]

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-NCPNtyME-1712050017325)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

  1. \S ↩︎

code高级开源
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后台管理源码
08-13
php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！
后台管理系统源代码
05-05
提供后台管理系统源代码:财务管理查询统计基础数据后台维护
漂亮好看的个人中心后台html页面来了
weixin_49669081的博客
03-11 2275
你是否常常找不到好看的个人中心页面 就现在这里有你需要的。
大事件后台管理系统——个人中心
weixin_45998300的博客
03-12 2266
1.创建验证规则函数 个人中心——基本资料：用来修改用户信息 针对表单不同类型的数据需要设定验证规则函数，只有输入正确才能提交表单 form.verify({ nickname: function(value) { if (value.length > 6) { return '昵称长度必须在 1 ~ 6 个字符之间！' } } }) 在input标签中添加该验证规则 ： <div class="layui-for
后台管理系统源码
12-09
后台管理系统源码，静态页面，不用再开发后台管理了
H5商城模版 带后台管理 登录 个人中心
10-27
H5 amaze UI 自适应 商城模版 带后台管理页 登录页 个人中心页
简洁侧边栏管理后台网页模板-HTML网站源码.zip
最新发布
03-31
此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。...总之，这套HTML源代码文件是一个高效、实用且易于上手的工具，无论您是专业的网页设计师，还是业余的编程爱好者，都值得一试。
商业源码-编程源码-Csharp宾馆酒店管理系统.zip
06-14
Csharp宾馆酒店管理系统是一款基于C#编程语言开发的商业源码，主要针对宾馆和酒店行业的信息化管理需求。这个系统的设计和实现涵盖了酒店管理的核心功能，包括客房管理、预订管理、入住退房处理、账单计算、会员管理...
java开发oa系统源码下载-YueZi:月子中心管理后台
06-05
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA...
若依后台管理系统 v4.2-源码.zip
02-26
"若依后台管理系统 v4.2-源码.zip" 是一个包含了若依(RuoYi)后台管理系统v4.2版本的源代码压缩包。若依是一个基于Java开发的开源项目，旨在为开发者提供快速构建企业级Web应用的解决方案。这个压缩包的主要内容是...
java后台管理源码
12-07
自己写的博客管理后台源码，使用了springboot，mybatis，MySQL，页面使用的是layui框架，整体比较简单可拿来即用
用户后台管理系统源代码
12-18
用户后台管理 管理系统源代码 ，界面正式美观，用到了easyui，值得一学。适合有些少基础的初学者，学习PHP入门
网站后台管理界面 源代码
11-18
网站后台管理界面 源代码；网站后台管理界面 源代码；网站后台管理界面 源代码；直接可以使用 完整版
非常经典的后台管理系统框架（HTML、JS源码）
12-02
非常经典的后台管理系统框架（HTML、JS源码）
后台管理系统代码
08-09
NULL 博文链接：https://ukao.iteye.com/blog/2174757
java开发oa系统源码下载-spring-boot:基于Spring-Boot的后台管理系统
06-05
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA...
后台管理系统之侧边栏滑动打开
Heidi
06-26 3679
我相信我们在做后台管理系统的时候，一定会遇到打开关闭左侧或者右侧导航侧边栏的问题。那么今天我就来总结一下PC端和H5端打开关闭左侧导航栏的问题。 首先说一下PC的后台管理系统，当然不仅是js代码需要合理，html和css代码也需要合理才可以实现 那么我们先看一下效果： 正如我前面所说，合理的html,css和js配合在一起才能实现用最简单的方法实现这个展开收起侧边栏的功能。 代...
[零基础][完结]vue后台管理系统开发流程全记录(四)_侧边栏实现原理及配置 | 路由配置
技术圈
04-21 1169
项目本身带有一个侧边栏，点击可以跳转到预制好的默认页面，但这不是我们需要的，我们首先的任务是更改侧边栏内容，再让它指向我们自己的页面。
uCOS-ii中文教程：快速上手µC/OS-II操作系统
* 第3章：任务管理 - 讲解uCOS-ii的任务管理机制，包括任务创建、任务切换、任务同步等。 * 第4章：信号量和互斥锁 - 讲解uCOS-ii的信号量和互斥锁机制，用于实现任务之间的同步和互斥。 * 第5章：消息队列 - 讲解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值