有哪些做简历的好网站,网站页面怎么做,360云主机可以建设网站吗,门户网站建设存在的问题目录
1. 创建组件并配置路由
2. 页面布局
3. 展示用户信息
4. 修改昵称
5. 修改性别
6. 修改生日
7. 修改头像
7.1 图片上传预览
7.2 使用纯客户端的方式处理用户头像上传预览
7.3 头像裁切
7.4 纯客户端的图片裁切上传流程
7.5 Cropper.js 图片裁剪器的基本使用
…目录
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 langen
headmeta charsetUTF-8title客户端图片上传预览示例/titlestyle.img-wrap {width: 200px;height: 200px;border: 1px solid #ccc;}img {max-width: 100%;}/style
/head
bodyh1客户端图片上传预览示例/h1div classimg-wrapimg src alt idimg/divbrinput typefile idfile onchangeonFileChange()scriptconst 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 typefile 元素。 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 typefile 在 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.jsnpm install cropperjs导入 用块元素容器包裹图像或画布元素确保图像的大小完全适合容器 在 mounted 生命周期里获取图片对象实例化裁剪器并自行配置截图区域参数 ④ 提交裁剪之后的用户头像 getData方法得到了裁剪之后图片的对象参数让后将这个对象传递给服务端让服务端对原图进行裁切 客户端进行对图片进行裁切使用 getCroppedCanvas 方法该方法得到裁切之后的图片对象类似于URL.createObjectURL 方法得到的文件对象
