当前位置：首页 > news >正文

黑马头条vue2.0项目实战（九）——编辑用户资料

news 2025/11/10 5:14:16

1. 创建组件并配置路由

2. 页面布局

3. 展示用户信息

4. 修改昵称

5. 修改性别

6. 修改生日

7. 修改头像

7.1 图片上传预览

7.2 使用纯客户端的方式处理用户头像上传预览

7.3 头像裁切

7.4 纯客户端的图片裁切上传流程

7.5 Cropper.js 图片裁剪器的基本使用

7.6 裁剪头像上传

1. 创建组件并配置路由

① 创建 views/user-profile/index.vue

② 将该页面配置到根路由

2. 页面布局

头部导航栏
- nav-bar组件

头像
- van-cell
  - is-link 是否展示右侧箭头并开启点击反馈
- van-image

昵称
- van-cell

性别
- van-cell

生日
- van-cell

3. 展示用户信息

思路：
- 找到数据接口
- 封装请求方法
- 请求获取数据
- 模板绑定

① 在 api/user.js 中添加封装数据接口

② 在 views/user-profile/index.vue 组件中请求获取数据

③ 模板绑定

4. 修改昵称

① 准备弹出层

弹出层是懒渲染，就是相当于元素的显示与隐藏，所以使用 v-if 条件渲染的方式绑定，使得弹出层组件实现条件渲染。

② 封装组件

③ 页面布局

④ 基本功能处理

封装更改用户个人资料接口

⑤ 更新完成

5. 修改性别

① 准备弹出层

② 封装组件

③ 页面布局

Vant 2 - Mobile UI Components built on VuePicker 选择器：Vant 2 - Mobile UI Components built on Vue
Picker 组件通过 columns 属性配置选项数据，columns 是一个包含字符串或对象的数组。
设置 show-toolbar 属性后会展示顶部操作栏，顶部栏包含标题、确认按钮和取消按钮，点击确认按钮触发 confirm 事件，点击取消按钮触发 cancel 事件。
单列选择时，可以通过 default-index 属性设置初始选中项的索引。
change 选项改变时触发
- 单列：Picker 实例，选中值，选中值对应的索引。
- 多列：所有列选中值，所有列选中值对应的索引

④ 基本功能处理

⑤ 更新完成

6. 修改生日

① 准备弹出层

② 封装组件

③ 页面布局

DatetimePicker 通过 type 属性来定义需要选择的时间类型， type 为 date 表示选择年月日。
通过 min-date 和 max-date 属性可以确定可选的时间范围。

④ 基本功能处理

⑤ 更新完成

dayjs的使用与配置参考黑马头条vue2.0项目实战（四）——首页—文章列表——4.5 处理相对时间

7. 修改头像

7.1 图片上传预览

方式一：结合服务器的图片上传预览

方式二：纯客户端实现上传图片预览
- const file = fileInput.files[0] // 获取文文件对象
- img.src = window.URL.createObjectURL(file) // 设置图片的 src

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>客户端图片上传预览示例</title><style>.img-wrap {width: 200px;height: 200px;border: 1px solid #ccc;}img {max-width: 100%;}</style>
</head>
<body><h1>客户端图片上传预览示例</h1><div class="img-wrap"><img src="" alt="" id="img"></div><br><input type="file" id="file" onchange="onFileChange()"><script>const img = document.querySelector('#img')const file = document.querySelector('#file')function onFileChange() {// 得到 file-input 的文件对象const fileObj = file.files[0]const data = window.URL.createObjectURL(fileObj)img.src = data}</script>
</body>
</html>

接下来就是在项目中使用纯客户端的方式处理用户头像上传预览。

7.2 使用纯客户端的方式处理用户头像上传预览

在组件中：views/user-profile/index.vue

① 增加图片上传输入框，input 输入框自带的隐藏元素的方式，hidden 类似于 display: none。

② 点击头像单元格时，触发文件提交输入框。

给头像单元格注册点击事件，点击头像单元格的时候，相当于点击了文件输入框。
具体做法在单元格点击事件里拿到文件输入框的 dom，并且注册点击事件。（$refs.file.click()）

③ 给文件输入框注册 change 事件，拿到输入框输入的文件。

this.$refs.file：通过 Vue.js 的 $refs 获取到页面上定义的 <input type="file"> 元素。
this.$refs.file.files：返回一个 FileList 对象，包含了用户在文件输入框中选择的所有文件。
即使只选择一个文件，它也是一个数组形式的对象。
file 变量就是这个文件对象，它包含了文件的各种属性和信息，如文件名、类型、大小等。

④ 为选中的文件创建一个临时的、本地的 URL，以便在页面上可以直接预览或访问这个文件，而不需要立即上传到服务器。

window.URL.createObjectURL(file)：使用浏览器的 URL.createObjectURL() 方法，为传入的 file 对象（即用户选择的文件）生成一个本地的临时 URL。
这个 URL 是一个字符串，指向本地的文件资源。
例如：blob:http://localhost:8080/4e97a5f3-8a16-4a13-8d08-7e0c5571f1d8。
blob: URL 可以直接用作 HTML 标签（如 <img>、<video>、<audio> 等）的 src 属性，无需进一步处理。
blob: URL 是由 window.URL.createObjectURL() 生成的本地 URL，它能够指向内存中的文件或二进制数据，因此可以直接用于展示文件内容。

⑤ file-input 如果两次同时选了同一个文件，那么就不会触发 change 事件。

解决方法：每次输入完毕之后，把文件输入框的 value 值清空

参考文档：

<input type="file">

在 web 应用程序中使用文件

7.3 头像裁切

方案一：结合服务端的图片裁切上传流程

方案二：纯客户端的图片裁切上传流程

接下来就是在项目中使用纯客户端的方式裁剪上传头像。

7.4 纯客户端的图片裁切上传流程

① 准备修改用户头像弹出层

② 封装组件

③ 页面布局

7.5 Cropper.js 图片裁剪器的基本使用

① Cropper.js——JavaScript 图像裁剪器的使用

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数。
如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

官方文档

安装： npm install cropperjs
用法：
- 用块元素（容器）包裹图像或画布元素
- 确保图像的大小完全适合容器
- 导入
```
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
```
- 获取图片对象
  - 在 mounted 生命周期里
- 实例化裁剪器
  - 配置参数

③ 将裁剪后的图像上传到服务器

7.6 裁剪头像上传

步骤：
- 封装接口
- 请求提交
- 更新视图

① 在 api/user.js 中添加封装数据接口

② 请求头参数问题

如果接口要求的请求头 Header 为 Content-Type: multipart/form-data 则必须传递一个 FormData 对象
如果接口要求的请求头 Header 为 Content-Type: application/json 则传递的是一个普通 js 对象（默认方式）

③ 裁剪头像配置

下载安装 croppe.js：npm install cropperjs
导入

用块元素（容器）包裹图像或画布元素，确保图像的大小完全适合容器

在 mounted 生命周期里获取图片对象，实例化裁剪器并自行配置截图区域参数

④ 提交裁剪之后的用户头像

getData方法得到了裁剪之后图片的对象参数，让后将这个对象传递给服务端，让服务端对原图进行裁切
客户端进行对图片进行裁切，使用 getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）

黑马头条vue2.0项目实战（九）——编辑用户资料

目录 1. 创建组件并配置路由 2. 页面布局 3. 展示用户信息 4. 修改昵称 5. 修改性别 6. 修改生日 7. 修改头像 7.1 图片上传预览 7.2 使用纯客户端的方式处理用户头像上传预览 7.3 头像裁切 7.4 纯客户端的图片裁切上传流程 7.5 Cropper.js 图片裁剪器的基本使用 …...

编程日记 2024/8/16 9:50:09

43.【C语言】指针（重难点）（F)

目录 15.二级指针 *定义 *演示 16.三级以及多级指针 *三级指针的定义 *多级指针的定义 17.指针数组 *定义 *代码 18.指针数组模拟二维数组往期推荐 15.二级指针 *定义之前讲的指针全是一级指针 int a 1; int *pa &a;//一级指针如果写成 int a 1; int *pa &a…...

编程日记 2024/8/16 9:48:07

【STM32+HAL】杆球控制系统

一、前言 2017年电赛出了道板球控制系统题目，现写一个简化版本——杆球控制系统，以此记录电赛集训生活。二、题目分析最终采取的方案是：OpenMV读取小球的当前位置，并将坐标值传给STM32端，再由32通过电机改变杆的位置…...

编程日记 2024/8/16 9:45:03

用Python实现9大回归算法详解——04. 多项式回归算法

多项式回归是线性回归的一种扩展，它通过将输入特征的多项式项（如平方、立方等）引入模型中，以捕捉数据中非线性的关系。虽然多项式回归属于线性模型的范畴，但它通过增加特征的多项式形式，使得模型能够拟合非…...

编程日记 2024/8/16 9:43:01

vue打包更新packge.json版本号

VUE项目打包自动更新版本号此方法只针对 Vue 如果使用其他框架，可以此参照作为参考一、先看效果二、创建 buildVersion.js 文件文件内容目前只针对3位版本号递增规则是每次更新加一次小版本，10次小版本向前递增一个版本。如：1.0.9 递…...

编程日记 2024/8/16 9:42:00

计算机视觉技术解析：从基础到前沿

第一部分：计算机视觉基础与基本原理计算机视觉是人工智能领域的一个重要分支，旨在使计算机能够理解和处理图像和视频数据。随着深度学习技术的飞速发展，计算机视觉已经在许多实际应用场景中取得了显著的成果，如图像识别、目标检…...

编程日记 2024/8/16 9:38:56

unity游戏开发003：深入理解Unity中的坐标系

Unity游戏开发 “好读书，不求甚解；每有会意，便欣然忘食。” 本文目录： Unity游戏开发 Unity游戏开发深入理解Unity中的坐标系前言1. 坐标轴2. 左手坐标系3. 世界坐标系 vs. 局部坐标系4. 坐标变换5. 注意事项总结深入理解Unity中…...

编程日记 2024/8/16 9:36:53

伊索寓言两则

马和驴马为自己精美的马具感到骄傲，在大马路上遇见了驴子子正驮着重担挪着步子，挡了路，马儿没法过去，就不耐烦叫道：真想踢你两脚，好让你走快点。驴子沉默不语，但没忘马儿的傲慢。不久后马儿患…...

编程日记 2024/8/16 9:33:48

嵌入式硬件产品开发：编码文件规则

目录简介文件内容的一般规则文件名命名的规则简介一个工程是往往由多个文件组成。这些文件怎么管理、怎么命名都是非常重要的。文件内容的一般规则【规则1】每个头文件和源文件的头部必须包含文件头部说明和修改记录。源文件和头文件的头部说明必须包含的内容和次…...

编程日记 2024/8/16 9:31:47

设计模式 - 组合模式

💝💝💝首先，欢迎各位来到我的博客！本文深入理解设计模式原理、应用技巧、强调实战操作，提供代码示例和解决方案，适合有一定编程基础并希望提升设计能力的开发者，帮助读者快速掌握并灵活运用设计模式。 💝💝💝如有需要请大家订阅我的专栏【设计模式】哟！我会定…...

编程日记 2024/8/16 9:29:45

打靶记录11——Billu_b0x

靶机： https://download.vulnhub.com/billu/Billu_b0x.zip难度： 中（两种攻击路线） 目标： 取得root权限涉及的攻击方法： 主机发现端口扫描Web信息收集SQL注入（Sqlmap跑不出来）…...

编程日记 2024/8/16 9:28:43

一、在cubemx上配置sd和fatfs示例演示

一、sd和fatfs的配置流程界面 1、选择sd4bits 根据自己的sd卡的硬件插槽进行选择。 2、fatfs配置由于使用的是sd卡所以直接选择sd选项 3、程序中对sd卡的初始化需要进行改动，直接使用默认的参数sd卡是挂载不上的。 4、在sd卡挂载好后，就可以使用文件系统…...

编程日记 2024/8/16 9:27:42

C++ 语言特性02 - 命名空间

一：概述现代C中的命名空间是什么？ C中的命名空间允许用户在命名空间范围内对类、方法、变量和函数等实体进行分组，而不是在全局范围内使用。这可以防止大型项目中的类、方法、函数和变量之间发生命名冲突。命名空间将开发人员编写的代码组织…...

编程日记 2024/8/16 9:26:40

drools规则引擎规则配置文件drl语法使用案例

前提：环境搭建，参考博文springboot整合drools规则引擎示例入门-CSDN博客案例1，商城系统消费赠送积分 100元以下, 不加分 100元-500元加100分 500元-1000元加500分 1000元以上加1000分订单pojo编写 package cn.beijing.model;import lom…...

编程日记 2024/8/16 9:25:39

C++编程：高性能通信组件Capnproto与Protobuf的对比分析

文章目录 0. 概要1. 测试环境2. 测试方法3. 测试结果及分析3.1 延迟测试3.2 吞吐量测试3.3 稳定性测试3.4 一对二测试记录3.5 二对一测试记录3.6 Inter-process 单个点开销分析 4. CapnProto 与 Protobuf 的对比测试总结 0. 概要本文主要探讨了两种高性能通信组件&#xff1a…...

编程日记 2024/8/16 9:19:31

【Python读书数据，并计算数据的相关系数、方差，均方根误差】

为了处理Python中的读书数据（假设这里指的是一系列关于书籍阅读量或评分的数据），并计算这些数据的相关系数、方差以及均方根误差（RMSE），我们首先需要明确数据的结构。这里，我将假设我们有一组关…...

编程日记 2024/8/16 9:18:29

垃圾收集器G1ZGC详解

G1收集器(-XX:UseG1GC) G1 (Garbage-First)是一款面向服务器的垃圾收集器,主要针对配备多颗处理器及大容量内存的机器. 以极高概率满足GC停顿时间要求的同时,还具备高吞吐量性能特征. G1将Java堆划分为多个大小相等的独立区域（Region），JVM目…...

编程日记 2024/8/16 9:15:25

AI芯片：高性能卷积计算中的数据复用

随着深度学习的飞速发展，对处理器的性能要求也变得越来越高，随之涌现出了很多针对神经网络加速设计的AI芯片。卷积计算是神经网络中最重要的一类计算，本文分析了高性能卷积计算中的数据复用，这是AI芯片设计中需要优化的重点之一&a…...

编程日记 2024/8/16 9:13:23

gitlab修改默认访问端口

GitLab 自带了一个 Nginx 服务器实例，用于处理 HTTP 和 HTTPS 请求。这个内置的 Nginx 服务器被配置为与 GitLab 应用程序实例一起工作，并且它负责处理所有前端的网络通信。通过yum或者apt安装Gitlab时，nginx通常是被自带安装并配置好的。 …...

编程日记 2024/8/16 9:11:20

python——异常

Python 中的异常及继承关系在 Python 中，异常用于表示程序在运行过程中遇到的错误，所有异常类最终都继承自 BaseException。通过异常处理，我们可以捕获和处理这些错误，避免程序崩溃。 Python 异常继承关系图 BaseException-- …...

编程日记 2024/8/16 9:07:15

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/8 15:55:51

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2025/11/7 10:44:22

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/11/7 14:08:03

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/11/7 20:25:41