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

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

news 2025/9/20 2:23:02

目录

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

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

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

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

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

vue打包更新packge.json版本号

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

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

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

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

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

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

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

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

伊索寓言两则

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

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

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

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

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

设计模式 - 组合模式

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

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

打靶记录11——Billu_b0x

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

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

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

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

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

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

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

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

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

前提&#xff1a;环境搭建&#xff0c;参考博文springboot整合drools规则引擎 示例入门-CSDN博客案例1&#xff0c;商城系统消费赠送积分 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中的读书数据&#xff08;假设这里指的是一系列关于书籍阅读量或评分的数据&#xff09;&#xff0c;并计算这些数据的相关系数、方差以及均方根误差&#xff08;RMSE&#xff09;&#xff0c;我们首先需要明确数据的结构。这里&#xff0c;我将假设我们有一组关…...

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

垃圾收集器G1ZGC详解

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

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

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

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

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

gitlab修改默认访问端口

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

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

python——异常

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

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

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/8/26 6:51:02

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/9/18 12:53:54

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/9/2 17:47:54

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/9/2 16:54:05