黑马头条vue2.0项目实战（九）—

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

news2024/9/23 15:25:51

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 生命周期里
- 实例化裁剪器
  - 配置参数