...三种语言实现了腾讯国漫评分系统(二):vue前端开发篇

发布网友 发布时间：2024-10-04 01:30

我来回答

共1个回答

热心网友 时间：2024-10-19 19:26

前言

"仙路尽头谁为峰，一见无始道成空。"

2013年初读《遮天》，十年后《遮天》的动漫正式上线。当年的经典小说如今改成了动漫，不知口碑如何。于是，我打开腾讯视频查看评分，每个视频都要点开才能看到评分和介绍。这激发了我整合国漫评分内容的想法。一周后，一个简单的评分展示系统诞生了。

上一篇文章讲述了腾讯国漫数据获取的过程，本文将着重介绍使用Vue生态构建前端的部分。

静态展示：

动态展示：

前端采用Webpack + Vue + ElementPlus + TypeScript + scss，使用Vue脚手架创建项目，导入至IDE。

页面采用ElementPlus的container进行布局，分为Aside和Main左右两部分。

Aside显示轮播组件，轮播使用ElementPlus的carousel组件，直接从官网复制代码到组件中。

访问页面，基础布局完成。接下来对轮播图优化、Main区域设计和css细节优化。

轮播图使用ElementPlus的el-carousel组件。动漫封面长图，像素770 * 1080，进行50%缩放设置轮播框宽高。

下载封面图，使用img标签放置el-carousel-item中，进行css设置。调整img和el-carousel__item组件细节，el-carousel__mask需设置important为透明颜色。

实现如下效果。

定义一个title.vue，使用ElementPlus的el-rate实现评分星号，el-tag显示评分。

进行一些css微调。

定义score组件，设计评分推荐页面。使用ElementPlus的el-card组件，仅定义长宽、颜色。

评分两侧的svg图标，下载wheat svg，Adobe Illustrator制作水平镜像。定义Icon组件引用svg图标。

使用svg-sprite-loader加载器，完成图标引用。

实现如下图标。

采用flex弹性布局，定义评分和推荐区域。评分区域采用column垂直分布，推荐区域使用el-card组件。

定义html部分，设置评分和span文字的css。

定义description组件，展示动漫简介、title、热度、剧集等信息。

动漫简介和热度、title使用el-card卡片展示，实现文本限制显示。

本文使用Vue、Element Plus构建前端页面，详细介绍了Vue生态中的技术应用。完成了一个腾讯国漫评分展示系统的初版。

下一篇文章将开发后端API接口，实现从后台获取国漫数据实时渲染轮播，实时更新评分等信息。