Banner 的用途
Banner 主要体现中心意旨,形象鲜明地表达最主要的情感思想或宣传中心。
它的特点是:醒目,容易引起关注。
在WEB中的应用主要有两种:
- 广告
- “热点”推荐
其实这两类应用的目的是相同的,或者说他们本就是一类。
Banner 包含的内容
说到Banner包含的内容,就不得不提Banner的展现形式。
Paste_Image.png上图是简书网站上首页中的四个Banner位,以及它们里面的内容。从这个截图上我们不难看出Banner展示过程中最主要的两部分内容:
- 图片:是Banner最主要的部分,也是Banner最主要的表现形式。
- 文字:标题或一段说明性的文字,对推荐的内容做简单的介绍。
除了以上一眼就能看出来的两部分内容之外,Banner还有一个必不可少的组成部分:URL;URL指向推荐内容的地址。
如此Banner必须包含的三部分内容就得到了:
- 图片:是Banner最主要的部分,也是Banner最主要的表现形式。
- 文字:标题或一段说明性的文字,对推荐的内容做简单的介绍。
- URL:推荐内容的地址,点击Banner跳转到的网页
Banner 管理设计
“数据项”提取
要对Banner进行“数据项”提取,不仅要考虑Banner所共有的信息,还需要考虑不同Banner之间的差异。
在上一小节中已经分析得到所有Banner的共同点;继续以简书网站首页的四处(其实是三处)Banner做分析,他们的不同之处就是展示的形式。即外观样式不同。
还有一个不同之处因为太过明显所以大家也最容易忽略,那就是这四个Banner的所在的位置不同。哈哈……
如此,加上之前分析得到的数据,可总结得到以下Banner所必须包括的属性:
- 图片:是Banner最主要的部分,也是Banner最主要的表现形式。
- 文字:标题或一段说明性的文字,对推荐的内容做简单的介绍。
- URL:推荐内容的地址,点击Banner跳转到的网页
- 类型:规定Banner以什么样的方式显示
- 位置:规定Banner显示在什么地方
ok,至此,所有关于Banner管理过程中需要用到的“数据项”都已经得到。
数据库-表设计
- 数据表中必须要存储Banner的所有“数据项”;
- 每个Banner还必须要有一个自己的唯一标识,那就用id吧(整数,自增)。
- 出于数据安全考虑,我们想要一个回收站的机制,避免Banner被误删;我们需要在表中加一个字段标识此Banner是否是已经删除的状态。is_deleted
综上,可得到如下表结构:
id:整数,自增,主键,唯一标识
imageUrl: 字符串,长度200,存储图片的URL
text:字符串,长度200,存储Banner的文字信息
url:字符串,长度200,存储点击Banner跳转到的网页
type:字符串,长度20,存储Banner的类型信息
position:字符串,长度20,存储Banner的位置信息
isDeleted:整数,0表示未删除,非0表示已删除
接口程序设计
Banner管理中的列表,添加,修改,删除等功能不做赘述。下面说一下Banner显示时的接口程序如果实现。
接口接收两个参数:
- position:字符串,长度20,存储Banner的位置信息(必选参数)
- type:字符串,长度20,存储Banner的类型信息(可选参数)
接口程序根据接收到的参数,从数据中执行精确查询,得到对应position/type的所有Banner列表,不做分页一次性返回。
如果 传了type参数,就对type进行过滤,如果没有传type参数,则不对其进行过滤。
前端逻辑
前端可以单独为每种 type 写一套代码来支持每种类型Banner的显示,也可以写一套代码处理不同type的Banner显示成不同的样式。
网友评论