2023年七牛云第二届1024创作节-校园黑客马拉松

        还记得那是 2023年10月8日,一个适合打游戏而不适合学习的日子,那一天,在经历了排位连跪的打击后,我带着激动的心情报名了七牛云第二届1024创作节的比赛(主要是不收报名费🤣)。

        本以为在本次比赛中我们组能够大展身手大杀四方大显神通大......,但最终出结果的那一刻,我才发现:"这是什么情况😣,大家怎么都这么强"。

        本以为是个简单的Web应用开发赛,随便用个Go的框架就顶大天了,没有什么微服务、各种黑科技啥的,结果大家的作品里都是AI、深度学习、算法(明明在参赛群里大家都说什么都不会的,各种放弃,各种游戏,原来都是烟雾弹,原来只有我当真了😭😭😭),下面带着悲壮的心情分享下我们组的作品和参赛经历。

赛题:网页短视频应用

要求:使用七牛云存储、七牛视频相关产品(如视频截帧等)开发一款Web端短视频应用

基础功能(必须实现)

  1. 视频播放:播放、暂停、进度条拖拽;
  2. 内容分类:视频内容分类页,如热门视频、体育频道;
  3. ­视频切换:可通过上下键翻看视频;

高级功能(可选实现)

  1. 账户系统:用户可登录,收藏视频;
  2. 可参考常见短视频应用自由增加功能,提升完善度,如点赞、分享、关注、搜索等;

看到赛题的要求,我嘴角微微上扬,就这???七牛云看不起老子???

项目名称 - 牛小音

于是经过的十多天的不断敲代码、内卷、改Bug和熬夜,一个集合了抖音、抖音和抖音的网站初步完成

抖音有的我们没有,抖音没有的我们也没有;(别问,问就是抖音抄袭我们的

Gitee地址:https://gitee.com/liuhuiying/qiniu.git

作品展示

http://wxapp.qiniu.ijemy.com/lixianhe/docs/%E7%89%9B%E5%B0%8F%E9%9F%B3.mp4

项目技术栈

是不是看起来简单易懂,但是这点东西差点干的我吐血,也可能是我太菜了(┭┮﹏┭┮)

作品实现功能

基本功能

  1. 视频播放:支持功能如下:
    1. 播放、暂停、进度条拖拽;
    2. 播放倍速调整(0.5倍、0.75倍、1倍、1.5倍、2倍、5倍);
    3. 画中画播放;
    4. 全屏播放、声音调节;
  2. 内容分类:将视频分为12个类别,可以按照类别查看对应类别视频;
  3. 视频切换:支持 上下键切换视频鼠标上下滚动切换视频

高级功能

  1. 登录、注册(注册使用邮箱验证码)、退出登录
  2. 推荐机制:登录后为用户弹出推荐视频类别,用户勾选类别后,刷视频时,出现该类视频的权重上升
    • 可基于用户级别在个人中心关闭登录推荐
    • 用户勾选类别后,以后不会再弹出推荐框

image-20231102202749971

  1. 互动功能:收藏、点赞、分享、搜索视频;

其他功能

  1. 视频上传:登录后可以进行上传视频(使用Go SDK上传到Kodo存储,上传时通过上传策略操作进行转码和截帧,同时对视频进行审核)

  2. 个人中心

    1. 查看用户点赞的所有视频;
    2. 查看用户收藏的所有视频;
    3. 查看用户上传的所有视频;
    4. 修改用户的关注的视频类别;
    5. 设置登录时不弹出类别推荐框;

到此为止,要求中的所有功能已经完成,还附加了不少功能;此刻的我嘴角微微一笑🤭;

心得体会

  1. 虽然本次只获得了创作奖,但是以后会继续努力;
  2. 虽然我已经大四了,明年参加不了;
  3. 虽然....,😭虽然不下去了,都是泪啊;

不悲观了,从本次竞赛中,学到的很多东西,无论是编程知识上,还是团队协作上,结果也是不错的,创作奖(400块奖金,嘿嘿嘿,都买学习资料去,卷死你们)。

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
ava实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),可运行高分资源 Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现
el-upload是一个用于上传图片的组件,而七牛云是一种云存储服务。你可以通过将这两者结合使用,实现将图片上传到七牛云的功能。 具体的步骤如下: 1. 首先,你需要从后台获取七牛云的token,这个token将用于上传图片到七牛云。你可以通过调用后端提供的接口,传入AccessKey、SecretKey和Bucket等信息来获取token。 2. 在el-upload组件中,你需要配置action属性为https://upload.qiniup.com,这是七牛云存储区域的上传地址。不同的七牛云存储区域可能会有不同的地址,请根据自己使用的七牛云服务器存储区域来确定具体的地址。 3. 配置el-upload组件的其他参数,如class、list-type、file-list等。这些参数可以根据自己的需求进行设置。 4. 在el-upload组件中,你可以监听onChange事件,以便在图片上传完成后执行相应的操作。比如,你可以在该事件中获取返回的图片路径,并将其放入el-upload组件中进行显示。 5. 当图片上传成功后,你可以在el-upload组件中使用on-success事件来回显上传的图片。你需要将回显地址配置为你在七牛云上配置的回显地址,具体地址可以参考七牛云的官方文档。 6. 最后,你可以根据需要配置其他的el-upload组件参数,如before-upload、on-remove等。 总结起来,通过el-upload组件和七牛云的配合,你可以实现在前端上传图片到七牛云,并在上传成功后进行回显操作。详情可以参考提供的引用内容中的代码和注意点。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中el-upload上传图片到七牛的示例代码](https://download.csdn.net/download/weixin_38675465/13977470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [elementUI el-upload组件直接上传到七牛云(亲测可用)](https://blog.csdn.net/DLGDark/article/details/126763197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-upload上传文件到七牛云](https://blog.csdn.net/qq_42157868/article/details/107286616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龙域、白泽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值