猿进化系列14——实战之一文搞懂需求设计

2020-07-28 16:46:47 浏览数 (1)

看完上一个章节,相信你已经对web开发的后端相关技术有一定的了解,也掌握了一个小框架的原理,是时候该实战了,今天猿人工厂君就带你开始做一个简单小项目的开发,熟练贯通过去几天学到的知识,也了解一下web开发的一些套路。

经过前10多个章节的高强度学习,大家其实已经掌握web开发的基本技能,接下来的几个章节,我们更多要做的是对基本技能的整合和灵活运用。从今天开始,我们一起完成网站的一些功能,学习怎么让技术转化为产品。我们先来看看需要做些什么吧。

下面是某旅游网站的页面截图,接下来我们要做的就是这个站点的部分功能。

作为一个web开发攻城狮,往往拿到活的时候就是这个样子啦,如果是全栈攻城狮呢,你需要从图片开始进行页面的构建。不过作为后端攻城狮,拿到的就是前端兄弟已经做好的静态页面了。猿进化系列主要是以后端为主,前端的页面构建,由于篇幅有限,html代码对编辑器也不友好,所以我们主要讲后端的一些事情。

完蛋了,美女产品扔下图片就跑路了,挖掘需求这种事情就只有交给你自己玩耍了。我们页充当下产品,挖掘下基本的需求。

我们先看看网站首页的头部。

这一部分内容呢,往往希望在每个页面都被看见,出现在网站的最顶部,这是我们找到的第一个功能:公共头部。

接下来我们发现出现了登录和注册两个按钮,上网的人都知道,访问一个网站的全部功能,一般都需要注册,成为网站的会员,然后需要登录访问,才能使用到网站的全部功能。我们好厉害,一下找到两个功能:登录和注册

经过仔细观察,发现图片上有一个搜索框,搜索框提示“请输入线路名称”,那么这是我们的一个功能:支持按名称搜索旅游线路。右边展示了客服的服务时间以及电话热线。

顺着图片继续观察。

上图就是网站的导航栏,每一个选项,代表着不同类别的产品,每一个子页面会展示各自特色的产品。这些分类往往是针对产品的,想在首页展示哪些分类,往往是希望动态展示的。那么我们需要做的又一个功能,已经找到了:动态导航栏

我们再看下面,“生活不止是眼前的苟且…”是滴,这是一个轮播的图片,我们要做的功能找到了:首页轮播图

我们继续发掘首页内容,我们再看第二第三张图片、胖子优选、国内游、境外游…这些是首页的内容

我们又发现了底部页面上有行货正品、极速达、以及备案信息,这些信息呢我们通常在网站的每个页面的底部能够看到。我们又发现新功能了——公共尾部

我们将首页的功能点汇总起来,大概有以下内容:公共头部首页轮播图

产品搜索,动态导航栏,首页内容,公共尾部。

我们再看第二幅图片,是一个分类的搜索结果,我们要做的一个事情就是,按分类展示列表,我们看右手边还有一个热门推荐的列表,在页面底部,还有一个翻页列表。点击查看详情后,通常需要跳转到线路详情页面

经过分析观察我们发现分类列表页的功能有以下几点:分类列表热门推荐列表翻页查看详情跳转功能。

我们再看详情页面图片,在详情页面,我们看到:首页->国内游->全国-曼谷…这样的信息,这类信息我们通常叫做“面包屑”。点击首页后,页面回到首页,点击国内游,页面回到国内游的分类列表页面。我们看到面包屑下方,展示了线路相关的图片,点击右边小图,图片会切换,在右边,展示了线路的名字,和线路的卖点以及线路的价格,还展示了商家的信息,点击收藏后(登录状态下),用户可以收藏自己喜欢的线路。在页面的下方是旅游须知,用于告知用户旅游的一些注意事项

经过对页面的观察,我们得出结论详情的功能有以下几点:面包屑功能,

线路图片展示,线路名字、卖点、价格展示,商家信息展示,旅游须知。

我们先看注册页面图片,注册页面要求填写用户的基本信息,输入验证码,点击注册按钮后,验证输入是否合法,完成用户注册的功能。还可以点击立即登录跳转到登录页面,在登录页面,要求用户输入账号密码以及验证码点击登录后跳转到首页,也可以勾选自动登录按钮,让浏览器记住账号和密码方便下次登录还可以点击立即注册跳转到注册页面

我们再看看登录页面图片,用户填写用户名和密码和验证码,点击登录,完成账号登录。

经过仔细分析,我们发现结论登录和注册页的功能有以下几点:注册信息填写页面,验证码功能,注册信息合法性校验,注册页跳转到登录页用户登录

登录页跳转到注册页。

经过需求挖掘,我们已经挖掘出来一些需求,下面我们对所有需求做一个汇总:公共头部、首页轮播图、产品搜索、动态导航栏、首页内容、公共尾部、分类列表、热门推荐、列表翻页、查看详情跳转功能、面包屑功能、线路图片展示、线路名字卖点价格展示、商家信息展示、旅游须知、注册信息填写页面、验证码功能、注册信息合法性校验、注册页跳转到登录页、用户登录、自动登录、登录页跳转到注册页。

我们发现了很多功能,这些功能我们都需要实现,我们该怎么来做到?这些功能在要求上都有哪些不同?哪些是静态的?哪些是动态的?我们需要做一个区分,搞清楚功能的动静态属性,事情往往就简单了一半。

静态功能主要是一些静态页面,不需要后端程序做数据支持。我们思考功能汇总中的每一个功能,发现像公共的头部信息中的banner登录注册的按钮,客服热线,首页轮播图(没特殊要求可以看作静态)、公共尾部、查看详情跳转功能、旅游须知、注册信息页面、注册信息合法性校验(前端校验)、注册页跳转到登录页、登录页跳转到注册页、自动登录,这些功能不需要后端程序的参与,属于页面的静态功能

动态功能需要前后端程序的配合去实现,需要后端程序提供数据支持。我们思考功能汇总中的每一个功能,发现动态导航栏、首页内容、公共尾部、分类列表、热门推荐、列表翻页、面包屑功能、线路图片展示、线路名字卖点价格展示、商家信息展示、验证码功能、用户登录都需要后端程序的参与,需要前后端程序的配合去完成,这些功能属于动态功能

我们都知道,动态功能,往往需要使用数据库,动态的展示和存储信息。我们已经做完动态功能的识别了。接下来我们就来设计我们的数据库。不过在这之前,你得先找出有哪些实体。

所谓实体,可以简单的理解为我们需要哪些数据表。我们一起来看看吧:在首页,我们看到了分类导航,没一个分类会展示不同分类下的产品。所以我们第一个实体已经找到了——类目。我们看到我们每一个商品都有信息,表达的都是到哪里去游玩的线路信息,所以我们找到了第二个实体——线路。我们看到详情页面,展示了线路的详细信息,一条线路有多张图片,于是我们找到了第三个实体——线路图片。我们看到详情页面动态展示了商家信息,于是我们找到了第四个实体——商家

然后,我们需要用户注册和登录,我们找到了第五个实体——用户。我们再分析分析,看有没有遗漏?嗯,在详情页面用户还可以收藏喜欢的线路,于是我们找到第六个实体——用户收藏。

我们经过分析发现我们有六个实体,所以我们需要创建五张数据表:类目、线路、线路图片、商家、用户、用户收藏。

接下来,我们可以再看看图片,根据图片的信息,发现每一个实体都有哪些属性。

我们看看类目有哪些信息?我们发现每个类目的信息名字都不同,那么我们就找出来类目的信息包含:类目名称。然后,每一个类目我们希望程序能够唯一的识别出来——那么我们类目需要一个标识——类目ID

然后呢?暂时找不到了,好,我们类目就两个信息:类目ID、类目名称

我们再看看线路有哪些信息呢?线路有名称、有线路ID(唯一识别嘛)、有线路价格、有线路介绍。嗯,还有啥,得再想想了?比如,线路属于哪个分类的?线路是哪个商家的?想控制线路是否售卖(上架)?线路的上架时间?线路可以被收藏,收藏了多少次记录个数量吧?对了,之前还说了,线路有多张图片,线路图片是一个实体。嗯,终于暂时想不出来了,我们线路的信息如下:线路ID、线路名称、线路价格、线路介绍、线路分类ID(代表属于哪个分类)、线路是否售卖标识、线路上架时间、线路收藏数量、线路商家ID(代表属于哪个商家)。

我们在线路详情页看到了,有大图、有小图似乎没有别的信息了,但是线路图片页需要唯一标识、线路图片需要知道是哪条线路的图片,所以线路图片的信息如下:线路图片ID、线路ID(对应线路)、线路图片大图、线路图片小图。

商家信息我们一眼就看到了,商家名称、商家联系电话、商家地址,所以商家信息如下:商家ID(为啥要有,唯一标识,再问为什么,智商没救了)、商家名称、商家联系电话、商家地址

收藏信息关注什么?嗯,用户收藏的,嗯,它也需要ID,收藏时间也记录下吧,所以收藏信息如下:收藏ID、收藏时间、收藏用户ID

嗯,用户信息都在注册页面上了,这个好搞:用户ID、用户名、用户密码、用户email、用户真实姓名、用户手机号、性别,暂时就这么多了。

接下来的工作自然是设计数据库表了,不过在设计数据表之前我们先来梳理下之前信息的数据,我们发现,数据信息是不同的,有些是数字、有整数、小数,有些是时间、有些是图片、有些是文字信息。这些信息有大有小。我们需要分类。我们一起来看下吧。

类目信息:

类目ID,考虑到分类不是太多int就好,类目名称,属于文本,使用varchar吧。

线路信息:

线路ID,考虑到增长问题用bigInt,线路名称, 线路价格,线路介绍,都是文本varchar,线路分类ID,和分类ID保持一致,int,线路是否售卖标识,tinyInt、线路上架时间,varchar、线路收藏数量,int、线路商家ID(代表属于哪个商家),int。

线路图片信息:

线路图片ID, 考虑到增长问题用bigInt,线路ID(对应线路),bigint、线路图片大图、线路图片小图,图片的一般处理方式,文件单独保存,数据库里存链接就好,varchar。

商家信息:

商家ID,int,商家名称、商家联系电话、商家地址都是文本varchar。

收藏信息:

收藏ID,int、收藏时间,date、收藏用户ID,int

用户信息:

用户ID, int,用户名、用户密码、用户email、用户真实姓名、用户手机号都是文本,varchar性别,tinyInt。

我们在建立数据库和数据表的时候,需要让信息有明确的含义,最好在名称上能够一眼识别含义,一般使用英文名称,如果是单词拼接,单词间使用下划线。我们将之前识别的信息转化为mysql能够识别的语句,建库建表的语句如下:

建立数据库:

CREATEDATABASE route DEFAULT CHARACTER SET utf8 COLLATE utf8_bin ;

建立数据表:

CREATETABLE `travel_category` (

`travel_cid` int(11) NOT NULL AUTO_INCREMENT,

`travel_cname` varchar(100) COLLATE utf8_binNOT NULL,

PRIMARY KEY (`travel_cid`),

UNIQUE KEY `AK_nq_categoryname`(`travel_cname`)

)ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATETABLE `travel_favorite` (

`travel_route_id` int(11) NOT NULL,

`travel_create_date` date NOT NULL,

`travel_user_id` int(11) NOT NULL,

PRIMARY KEY(`travel_route_id`,`travel_user_id`),

KEY `FK_user_favorite` (`travel_user_id`)

)ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATETABLE `travel_route` (

`travel_route_id` int(11) NOT NULLAUTO_INCREMENT,

`travel_route_name` varchar(500) COLLATEutf8_bin NOT NULL,

`travel_route_price` double NOT NULL,

`travel_route_introduce` varchar(1000)COLLATE utf8_bin DEFAULT NULL,

`travel_route_flag` tinyint(1) NOT NULL,

`travel_route_date` varchar(19) COLLATEutf8_bin DEFAULT NULL,

`isThemeTour` tinyint(1) NOT NULL,

`travel_route_count` int(11) DEFAULT '0',

`travel_route_cid` int(11) NOT NULL,

`travel_route_image` varchar(200) COLLATEutf8_bin DEFAULT NULL,

`travel_route_seller_id` int(11) DEFAULTNULL,

PRIMARY KEY (`travel_route_id`),

UNIQUE KEY `AK_nq_sourceId`(`travel_route_sourceId`),

KEY `FK_category_route` (`travel_route_cid`),

KEY `FK_seller_route`(`travel_route_seller_id`)

)ENGINE=InnoDB AUTO_INCREMENT=514 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATETABLE `travel_route_img` (

`travel_route_img_id` int(11) NOT NULLAUTO_INCREMENT,

`travel_route_id` int(11) NOT NULL,

`travel_route_img_big_pic` varchar(200)COLLATE utf8_bin NOT NULL,

`travel_route_img_small_pic` varchar(200)COLLATE utf8_bin DEFAULT NULL,

PRIMARY KEY (`travel_route_img_id`),

KEY `FK_route_routeimg` (`travel_route_id`)

)ENGINE=InnoDB AUTO_INCREMENT=2091 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATETABLE `travel_seller` (

`travel_seller_id` int(11) NOT NULLAUTO_INCREMENT,

`travel_seller_name` varchar(200) COLLATEutf8_bin NOT NULL,

`travel_seller_consphone` varchar(20) COLLATEutf8_bin NOT NULL,

`travel_seller_address` varchar(200) COLLATEutf8_bin DEFAULT NULL,

PRIMARY KEY (`travel_seller_id`),

UNIQUE KEY `AK_Key_2` (`travel_seller_name`)

)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATETABLE `travel_user` (

`travel_user_id` int(11) NOT NULLAUTO_INCREMENT,

`travel_user_name` varchar(100) COLLATEutf8_bin NOT NULL,

`travel_user_password` varchar(32) COLLATEutf8_bin NOT NULL,

`travel_user_rel_name` varchar(100) COLLATEutf8_bin DEFAULT NULL,

`travel_user_birthday` date DEFAULT NULL,

`travel_user_sex` tinyint(1) DEFAULT NULL,

`travel_user_telephone` varchar(11) COLLATE utf8_binDEFAULT NULL,

`travel_user_email` varchar(100) COLLATEutf8_bin DEFAULT NULL,

`travel_user_status` tinyint(1) DEFAULT NULL,

`travel_user_code` varchar(50) COLLATEutf8_bin DEFAULT NULL,

PRIMARY KEY (`travel_user_id`),

UNIQUE KEY `AK_nq_username`(`travel_user_name`),

UNIQUE KEY `AK_nq_code` (`travel_user_code`)

)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

是时候确定要用什么技术来实现需求了,鉴于你还会得不多,能做的技术选型也自然就很少了,以下就是你的所有武器了:

页面设计:HTML、CSS、Javascript。

动态web技术:servlet

数据库操作:JDBC、JdbcTemplate

数据库连接池技术:Druid

数据库技术:MYSQL

0 人点赞