CODING10 个人中心
47分钟
本系列是《CODING10开发全记录》的番外子系列,在本系列中咱们实现个人中心部分,核心聚焦头像的上传以及裁剪,我们会使用到 Laravel Livewire 以及 Alpine.js 协助我们完成这项工作,我们会看到完全不同以往的革新式工作方式,完全不同以往的前后端交互模式,这代表着未来的方向,也让开发人员从繁琐的前后端对接中解脱出来,专注业务的实现。
使用 Alpinejs、Cropperjs、Livewire 完成头像上传,裁剪功能演示
02:57
使用Livewire组件化的方式创建个人中心页面
05:40
使用 Livewire 完成用户头像上传以及头像绑定
09:05
引入 Alpine.js 和 Cropper.js, 在前端用全新方式获取截取信息
06:29
告别传统的传递模式,Alpine 直接将数据传递给后端 Livewire 组件
04:55
在后端完成上传图片的裁剪和尺寸大小限定
06:52
隐藏文件上传 input 框,点击“换头像”直接弹出图片选择器
06:28
删除临时上传的图片文件,节省服务器存储空间
05:13