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

最新推荐文章于 2024-09-19 17:35:39 发布
最新推荐文章于 2024-09-19 17:35:39 发布
阅读量557 收藏 11
点赞数 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高级开源
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7110
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
iOS 强大第三方资源库
weixin_34237596的博客
03-08 1万+
Github用法 git-recipesGit recipes in Chinese. 高质量的Git中文教程. lark怎样在Github上面贡献代码 my-git有关 git 的学习资料 gitignore非常赞 有用的.gitignore模板集合(忽略上传的文件集合)，包含了各种语言. 完整App@ open-source-ios-apps- iOS开源App集合，分：swift与Objec...
后台管理系统2——登录、退出、注册功能、个人中心页面
qq_51357960的博客
12-05 4759
后台管理系统2——登录、退出、注册功能、个人中心页面
大事件后台管理系统——个人中心
weixin_45998300的博客
03-12 2343
1.创建验证规则函数 个人中心——基本资料：用来修改用户信息 针对表单不同类型的数据需要设定验证规则函数，只有输入正确才能提交表单 form.verify({ nickname: function(value) { if (value.length > 6) { return '昵称长度必须在 1 ~ 6 个字符之间！' } } }) 在input标签中添加该验证规则 ： <div class="layui-for
前端表单布局丨简洁大气的登录表单一(源码)
最新发布
我们好像在哪见过 私
09-19 207
前端表单布局丨简洁大气的登录表单一(源码)
【无标题】后台管理系统-个人中心
beeliang
05-28 1595
个人中心 一、获取用户信息 1.初始化路由模块 const express = require('express') const router = express.Router() // 验证数据的中间件 const expressjoi = require('@escook/express-joi') // 导入验证规则 const {update_userinfo_schema,update_password_schema,update_avatar_schema} = require('../
H5商城模版 带后台管理 登录 个人中心
10-27
H5 amaze UI 自适应 商城模版 带后台管理页 登录页 个人中心页
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
基于JSP实现的影视创作论坛系统
xiqsun0的博客
03-28 7799
源码下载 http://www.byamd.xyz/hui-zong-1/ 摘 要 随着时代的发展，互联网的出现，给传统影视行业带来的最大便利就是，方便了影视从业人员以及爱好者的交流和互动，而为用户提供一个书写影评，阅读影评以及回复影评的平台，以影评为载体来使用户感受影评、解读影评的是互联网在传统影视行业下应运而生的产物。 本文讲述了基于javaee的影视创作论坛的设计与实现，所谓的影视创作论坛指的是通过网站让喜欢影视作品的人进行交流，而作为一个好的影视论坛，应该围绕影视作品展开，包括相关的影视资讯，
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 7560
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
后台管理源码
08-13
php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！ php后台管理源码，供大家学习参考！
后台管理系统源代码
05-05
提供后台管理系统源代码:财务管理查询统计基础数据后台维护
后台管理系统源码
12-09
后台管理系统源码，静态页面，不用再开发后台管理了
java后台管理源码
12-07
自己写的博客管理后台源码，使用了springboot，mybatis，MySQL，页面使用的是layui框架，整体比较简单可拿来即用
用户后台管理系统源代码
12-18
用户后台管理 管理系统源代码 ，界面正式美观，用到了easyui，值得一学。适合有些少基础的初学者，学习PHP入门
蓝色的学员管理系统后台个人中心界面模板——后台
diaobang0776的博客
05-01 1437
链接：http://pan.baidu.com/s/1nuH2SXF密码：2rox 转载于:https://www.cnblogs.com/wordblog/p/6790869.html
Vue-后台管理项目001---侧边栏
初遇我ㄖ寸の热情呢？
05-28 2107
将这个真实的服务返回的数据赋值给res。// 跳转到login。// 清空token。
后台管理系统之侧边栏滑动打开
Heidi
06-26 3704
我相信我们在做后台管理系统的时候，一定会遇到打开关闭左侧或者右侧导航侧边栏的问题。那么今天我就来总结一下PC端和H5端打开关闭左侧导航栏的问题。 首先说一下PC的后台管理系统，当然不仅是js代码需要合理，html和css代码也需要合理才可以实现 那么我们先看一下效果： 正如我前面所说，合理的html,css和js配合在一起才能实现用最简单的方法实现这个展开收起侧边栏的功能。 代...
若依：基于Spring-Boot的易用后台管理系统源码下载
资源摘要信息: "java开发oa系统源码下载 - spring-boot:基于Spring-Boot的后台管理系统" 知识点: 1. Spring-Boot框架: Spring-Boot是Java开发的开源框架，它主要目的是简化新Spring应用的初始搭建以及开发过程。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值