美食购物网站的设计与实现

[1 绪论](#1 绪论)

[1.1 课题背景](#1.1 课题背景)

[2 相关技术介绍](#2 相关技术介绍)

[2.1 关于HTML的介绍](#2.1 关于HTML的介绍)

[2.2 关于css的介绍](#2.2 关于css的介绍)

[2.3 关于JS的介绍](#2.3 关于JS的介绍)

[2.4 关于MySQL的介绍](#2.4 关于MySQL的介绍)

[2.5 关于架构的介绍](#2.5 关于架构的介绍)

[3 系统分析](#3 系统分析)

[3.1 可行性分析](#3.1 可行性分析)

[3.2 市场需求分析](#3.2 市场需求分析)

[3.3 系统流程分析](#3.3 系统流程分析)

[3.4 功能需求分析](#3.4 功能需求分析)

[4 系统总体设计](#4 系统总体设计)

[4.1 系统结构设计](#4.1 系统结构设计)

[4.2 数据库设计](#4.2 数据库设计)

[4.3 系统流程设计](#4.3 系统流程设计)

[4.4 系统模块设计](#4.4 系统模块设计)

[4.5 网站使用说明](#4.5 网站使用说明)

[5 软件测试](#5 软件测试)

[5.1 测试目的](#5.1 测试目的)

[5.2 测试方法](#5.2 测试方法)

[5.3 测试结论](#5.3 测试结论)

结论

[致 谢](#致 谢)

参考文献

1 绪论

1.1 课题背景

要说18年是互联网火热的开端,22年就是成熟的网上时代。自从疫情开始,人们生活在病毒边缘,每日都是新的危机,虽说一切都很平静,可平静的生活里暗藏着波涛汹涌。03年的非典都没能让人居家不出,可新冠,德尔塔,奥密克戎却在消耗我们的经济,病毒传播速度快,一不小心就会让周围的人都感染,恢复正常生活速度太慢了,我们承受不起多几次的伤害。仅仅19年过年期间,就有多少老板破产,人们为生计发愁,实体店比例还在减少,一些老人和常年工作不使用手机的人,也在慢慢适应网上购物,送服务到家等等,为了配合新型行业的发展,各种规则也在慢慢完善。现在就是一个空前盛大的大数据时代,有些工作被慢慢淘汰,还有一些在慢慢崛起

1.1.1 研究现状

由于我是学习计算机的学生,我接触计算机也算是很靠前的,很早就听说过互联网行业是目前比较赚钱和流行的行业,并且很好找工作,且在网络崛起以后,这股计算机潮流从未减少一丝一毫。未来也少不了计算机,计算机现在充斥在每个人的身边,可以说形影不离。几乎每个人都有一部手机,家里的电视,笔记本电脑,儿童手表等等,就在前些天我接触了另外一个新词汇,叫做智能家居,这种懒人式的科技实在是贫穷的我无法想象的(实在是知识相当的匮乏)。在我所处的环境来讲,这样服务于人的高科技也是第一次见到,这就是技术的堆积形成了质变,目前技术还在不断优化。所以我想说,你看智能家居的崛起,其中一部分就是与网站相关的技术,我们所看到的操控家居的界面,后台的数据,以及让人看到就会心情舒畅的外观,全部得益于现阶段发达的计算机技术。

1.1.2 研究意义

1.让更多人完成网上美食自由购买的愿望

2.节约门店装修产生的费用

3.在不断创新优化中寻找更加先进有趣的技术

4.引领健康,引领传统文化的传播

2 相关技术介绍

2 .1 关于 HTML 的介绍

HTML语言是本人接触的第一门编程语言,也是我入门的关键,编程语言中这门语言给了我最大的善意。它是一种标记语言,是设计web页面的基础,也是制作前端界面应用最广泛的语言。

在很多流行的行业里,HTML语言与业务如影随形,也许这起不到全部的作用,但却无法离开这门语言的支持。

开发网站有很多的工具可以解决这种问题,编写代码的软件是在不断更新的,从前的软件需要不断的手工编写,随着大数据的不断更新,现在的软件库里已经有了模板,方便所有的代码书写。

2 .2 关于css的介绍

CSS又称为层叠样式表。在网页网站制作的时候,在HTML基础上通常还会采用CSS技术,这里用到CSS设置页面的布局、字体、颜色、背景。将代码做一些简单的修改,就可以顺利书写前端界面。

CSS的特点:

(1)不挑浏览器,能在大多浏览器上使用。

(2)用CSS实现通过图片转换实现的功能,快速下载页面。

(3)提升用户观感。

(4)控制页面的布局。

2 .3 关于 JS 的介绍

JavaScript是一种高级脚本语言,用来添加动态功能, 为网页的样式增光添彩,也可以为用户提供更流畅美观的浏览效果。通常JavaScript脚本是在想要为网页或网站添加动态功能做设计的。

JavaScript的主要功能:

1.在HTML页面嵌入用JS功能书写的动态脚本

2.响应浏览器系统。

3.检测动态网站中的访客信息。控制、创建和修改等。

2 .4 关于MySQL的介绍

MySQL 是近年来计算机行业最流行的、关系型数据库管理系统,在网页设计应用方面 MySQL 是最好的关系数据库管理系统应用软件之一。

数据库: 数据库简单来说,就是表的集合,在数据库内有不可数的表格。

数据表: 表简单来说就是数据组成的表格。在数据库中,表格在外表看来是一个简单的电子表格,实际内部是由很多代码构成。

冗余:在数据库里冗余是一件很恐怖的事情,如果在数据处理的过程中,冗余数太大,内存将会爆炸,会影响到系统运行的流畅性,只有使冗余降低提高,数据性能,也提高了数据的安全性,才能使系统正常快速的运转。

2 .5 关于架构的介绍

网站运用的是springboot和MyBits,springboot是一个Java开发框架,主要是运用到框架的第三方库减轻配置负担。优点是开箱即用,提供默认配置来简化项目配置,可以很快入门,没有冗余代码生成。

3 系统分析

3.1 可行性分析

决策前有一个不能缺少的环节,一个项目是否能够成功离不开精准的分析,主要是对于经济条件,技术支持,具体实施操作等方面进行可行性分析,并且合成有效的可行性报告。

3.1.1 经济可行性

经济可行性分析是为了节约成本,为了有效规避投资开发的风险,达到项目本身期待的收益值。就目前大环境来讲,一个网站开发出来,能够实现太多好处的转换。

3.1.2 技术可行性

技术可行性分析也许对于这个项目来说,是不可以缺少的环节,技术是这个项目的硬件支撑,可以说没有与项目开发计划书对应的技术,就无法完成这个网站项目的开发。以HTML为框架,制作整个网站的结构,css技术用于对于网站字体的渲染,JS则是提供了网站动态支持。缺少期中一环都会对网站前端有影响,具体影响可能是界面不完整,文字颜色单一,网站无法实现动态。后端由MySQL进行数据支持,插入网站后期需要的数据即可。

3.1.3 操作可行性

设置的功能各项条件成立以后,用户和管理员就可以友好的网上互动,不需要用户去了解数据库里的相关知识。界面采用的是对于用户来说简单易懂的文字描述,用户只需要稍微理解就可以进行操作,并与管理员进行有效互动。

3.2 市场需求分析

怎么会有人不喜欢美食呢,怎么会有人拒绝简单的网上手指点击看美食活动呢!市场需求分析环节在设计时是很重要的,本阶段是对于网站设计系统的全面检查,用来确定系统承接的范围及目标。并对系统需要的数据进行分析,然后确定用户的需求,对用户来说,什么样的系统设计才是他们所需要的呢?我们从一些方面进行分析:

1.产品本身的质量,要让大众喜爱,必须要做到质量够好,毕竟众口难调,我们只有做好自己,才能伴随着一众同行,在默默奋斗中发展下去。

2.产品的价格,每个行业在发展中已经产生了自己的价格标准,并不是随心而定,过高不可以,过低也不行,所以更加需要去调查研究。这样既能符合市场的发展,又不会让我们亏损。

3.是否适合用户,毕竟用户才是这件产品的受众,用户就是上帝,用户的感觉是排在第一位的,不论是男用户女用户,大人小孩子还是老人,都需要一些数据来支撑我们的产品,就比如喜欢美食的百分比,是小孩子多一点还是年轻人多一点,是喜爱甜食还是辣的,这些每一年都会有人去记录,可想而知有多么的重要。

用户需求用以下方法调查:

1.分发更新过的业务调查表,对用户的喜爱好恶进行调查研究,可以使我们得到的数据更加清晰准确。

2.新老用户的及时回访。

3.3 系统流程分析

系统流程分析大概分为几个方面:

1.业务是否合理,数据流程是否合理。

2.业务过程与实现管理他们之间的联系。

3.系统更新管理的可行性。

具体实行方案还需要细化加以改正完善,在不断的更新改变中优化系统,让用户感觉系统较为人性化是我们现阶段的目标。

3.4 功能需求分析

关于功能需求这个问题,应该说要准确且合理,不能太少也不能太多。较少的功能会让软件失去应用价值和商业价值,过于多的功能又会使用户眼花缭乱,无法准确找到自己的需求。所以在功能方面需要做一到调查才好实施操作,可以采用调查问卷,发传单,查找借鉴大型网站的数据,去学习一些优秀的课程,做活动收取用户反馈等等方法。对于我在做的这个小型网站,我想赋予它比较简洁明了的功能,重要的这些方面:

用户功能界面:包括注册,登录,密码重置,用户浏览,商品详情页,购物车,付款页面,物流页面,评论页面等

管理员管理界面:包括了登录界面,密码重置页面,商品管理界面,订单处理界面,物流信息页,评价管理页,用户信息管理等基础操作设计。

4 系统总体设计

4.1 系统结构设计

系统设计主要分为总体结构设计和详细结构设计,总体设计解决子系统划分与确认,模块结构设计,网络设计和方案。详细结构设计主要是解决代码、输出、输入、处理过程、数据库设计、安全控制等。代码设计是指设计出的系统能够分工协作但互不影响。

4.2 数据库设计

数据库是指在已有环境及数据的基础上,构造最极致优越的数据库模式,建立起数据库的系统,接下来就能够搭建后台,搭建数据应用处理系统,能够实现有效的存储数据,能够不遗余力的满足用户不同的需求,这就非常的人性化,数据转接及时,信息能够同步,处理文件更加简单。数据库应用系统的复杂性,让一般人无法接触,只有专业人员才可以轻而易举的进入,数据库为了支撑整个网站的程序,数据库设计在后期会变得冗余复杂。

数据库设计的步骤

(1)需求分析:需求分析阶段有几个部分组成,分别是需求收集、需求分析,数据字典、数据流程图。

(2)概念结构设计: 是对需求归纳、抽象,形成概念模型,可用ER图表示。

(3)逻辑结构设计阶段:将概念结构转换成为数据逻辑模型,能够方便查看进程,提高查询速度。

(4)数据库的设计:把数据库制作成模型方便观看和后面的实践,逻辑数据模型需要选取一个合适的环境,制作应用环境的结构。

(5)数据库的实施:首先搭建自己网站需要的数据库系统,然后编写代码进行调试,把程序构建起来,之后再组织数据入库,最后把程序试着去运行。

(6)数据库运行:数据库系统能否正常进行,需要真正实施才能确定,所以在最初的设计阶段就会对此进行思考,数据还会进行反复实践。

(7)数据库维护阶段:数据库维护是属于整个程序的最后的一个阶段,对于整个设计环节也很重要,这关系到整个系统的运行寿命,也关系到系统最终能否物尽其用。

4.3 系统流程设计

由于是个人独立设计,所以在资源这部分略有不足,采取的方式只能是想一步设计一步,最后再给他联系起来,再进行整体测试,选用适合自己的瀑布模式,按阶段进行,或是按顺序进行都可以。

4.3.1 注册流程

在产品上注册信息成为用户才可以使用产品,注册流程为打开主页,输入手机号获取短信验证码(网络延迟可能造成验证码发送比较慢),输入验证码,输入昵称(昵称长度不能超过6位),输入6到16位的密码(密码太过简单会有提示),重新输入密码进行验证(密码重新输入错误会导致账户无法注册),点击注册,到此为止用户注册完成,如图4-1所示:

图4-1 用户注册流程图

4.3.2 登录流程

注册完成以后就可以登录用户账号了,登录时点击账户框,输入预留手机号,点击密码框,输入之前设置的密码,账号和密码必须输入正确,才能正常登录,账号或密码里有一位输入错误都无法进行用户登录,如图4-2所示:

图4-2 用户登录流程图

4.3.3 购物流程

登录完成后,用户来到产品主界面,在这里可以尝试商品浏览功能,看到心仪的商品,可以点击商品,进入商品界面,查看详情,想要的话就可以加入购物车,不喜欢的话就点击返回,还可以继续浏览其他商品,商品浏览结束后,想要购买商品,就点击选择商品,点击右下角的支付按钮,进入付款功能。可以选择不同的支付方式,支付完毕就可以等待接受了,在商品还没有发货的状态下,可以进行退款功能,如图4-3所示:

图4-3 购物流程图

4.4 系统模块设计

一个完整的系统是由多个细致、可自行运行的模块拼接而成的,不同的模块之间,各自负责不同的运行操作管理,但是每个模块之间都是有联系的,只有联系起来才能构成一个整体的数据系统。

4.4.1 用户主界面

用户进入系统后最先所见的页面,基本上就可以直观的了解网站的整个风格及功能需求,是否喜欢,是否需要浏览购买,又或者学习交流,都可以从一个舒适精致的主界面展开。

4.4.2 用户注册

用户注册界面是除了进入网站的封面,第一个进入用户视野的画面,用户注册界面的整体颜色、布局、规格、字体、功能都会影响到用户的体验,用户的喜欢与否在进入注册页面的那一刻或许已经板上钉钉。注册是每个使用产品的用户都是必填内容,如果有信息没有填到框框里,那么会有红色的提示星号键提醒用户,此处填写错误,请填写正确内容,该网站赋予每个人成为用户的权利,如图4-4所示:

图4-4 会员注册

部分代码如下:

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edg,chroe=1">

<meta charset="UTF-8">

<title>注册</title>

<link rel="stylesheet" type="text/css" href=" ">

<link rel="icon" href=" " type="image/x-icon">

</head>

<a class="li-entry" href=" " onclick=" " target="_blank">

4.4.3 购物车

该部分能是对选购商品的数量进行修改,顾客可随自己的心意进行增加删减。为了使操作方便还增加了一键清除功能键的使用。当用户还想继续买时可以直接按下继续购。在顾客确定好要买的商品后,就可以提交了,如图4-5所示:

图4-5 购物车图片

部分代码如图4-6:

图4-6 购物车代码

4.4.4 管理员登录页面

该模块不是面向所有人的,它只允许登录进行处理的那个人使用,也就是最开始的管理员。避免其他人对本网站数据的更改,防止数据混乱导致的多发问题,如图4-7所示:

图4-7 管理员登陆界面

部分代码如图4-8:

图4-8 登录界面代码

4.4.5 后台整体功能模块图

如图4-9所示:

图4-9 后台整体功能模块图

后台部分核心代码如图4-10:

图4-10 后台功能代码

4 .5 网站使用说明

优先声明:这个购物网站使用的是简体中文,适用于大部分受众,操作简单易学。所有用户的信息均由网站内部管理,不会泄露出去,相当的安全。

我们在选购过程中,会出现一些失误。比如注册时没输入验证码,无法成功注册。

验证码输入错误如图4-11:

图4-11 验证码输入错误图

正确的结果应该是出现注册成功的提示,如图4-12:

图4-12 注册成功图

进入主页后可以浏览加购想要的商品,浏览完毕就可以进入购物车,在购物车里选择结算商品进入结算页面开始结算,开始修改收货地址。

修改地址信息。如图4-17:

图4-17 修改地址图

订单提交成功,选择支付方式。如图4-18:

图4-18 付款方式选择图

如果不想要某产品,可在发货前取消订单。如图4-19:

图4-19 取消订单图

询问是否取消订单,如图4-20:

图4-20 询问是否取消订单图

5 软件测试

5 .1 测试目的

测试是为了正式施行时能够减少错误,让系统在客户手里能够随用户心意而运行,假如在测试时就能检测出一些缺陷,就可以防止日后出现无法弥补的漏洞,造成合作方的重大损失。当然测试的用例不能单一,这样会使数据太过匮乏无法支撑结论,我们也会进行多次测试,我决定就多花一些时间在测试中,用例尽可能的多一些,且要不重复的,测试内容多次核对,一旦发现bug,就去修复这些缺陷,并且在此基础上不断创新发展维护。在2021年,我有幸在大学期间,学习很多技能课。其中软件测试课中就有学习过,软件测试阶段分类有三大类,分为白盒测试、黑盒测试和灰盒测试。白盒测试还可以称作结构测试,可以理解为是从软件内部观察的测试观察的是内部的代码程序。黑盒测试也称为功能测试,他是通过测试来检测软件每个功能得到使用情况,观察的是软件外部的呈现效果,黑盒测试是站在用户角度上进行测试的。

5 .2 测试方法

首先,使用HTML将网站中的错误链接找出来,这也是最清晰明了的,操作过程中的文字、框架、尺寸、色彩、距离、是否对仗工整,内容是否存在合理性等等。

测试的顺序为:自顶向下、从左到右,我们先从头部抓起,一步步的排除bug,在排除bug的过程中,需要用表格记录下来操作的具体步骤,方便后期的校对和数据的查看;

具体操作:查看页面是否正确,这里的页面是指所有的展示出来的页面。观察图片能否正确显示,观察图片的各个级别是否已经连接到,观察连接的正确性,首页里的登录界面与注册界面可不可以进行完整的实现,首页中的左侧栏目能否实现操作、右侧栏目能否实现操作、中间栏目能否实现操作、文章标题能否实现操作、图片等链接能否实现操作。

最后就是相当重要的:查看文章详情页的内容。详情页不可以杂乱影响观感,我们要去查询详情页里有没有乱码存在,详情页的页面、样式是否统一;详情页内搜索每个页面的功能是否完全实现;观察前台与后端,他们数据交互的部分,所有数据的传递是否具有正确性。

以上的是前端代码的详细测试步骤,也叫作黑盒测试,是用来测试用户使用感受的测试,也就是问我们经常说的用户体验感。接下来还有后台数据及连接框架的用例测试,右面也就是和用户的使用感受和管理员的管理息息相关。

接下来是测试软件的内部代码和架构,其中主要是测试内部代码,因为架构就是为前端和后端的连接开发的,现阶段已经很流行了,所以我们只要测试到连接功能是否是我们想要的,操作是否使我们开发起来更加简单方便。

首先我们打开代码和数据库,用其他架构尝试连接,连接成功才可以继续使用用例测试。接下来就要观察连接后的代码是否和之前一样方便理解和使用,假设出现;了代码冗余或代码错误,则会被pass掉。

5 .3 测试结论

我们先来从起初对美食购物网站的整体构想,每一方面更加详细的分析至最后进行结构的搭建、扩展功能,基本上完成了对美食购物网站的设计。并且就该网站进行了详细的用例测试,并且增加了很多相似例子进行反复实验。但是因为对于网站开发这一方面的相关专业知识确实是有很多方面无法完全的理解,我们搞好后的网站也还存在一些技术性问题。就比如:导航栏上方的链接在鼠标指到的时候会发生浮动等等。但是庆幸的是在功能处理方面没有什么太大的问题。所以当用户使用的也不会出现过于严重的问题。

经过上面对系统和界面的分析与测试,美食购物网站符合基本的设想,功能上大致能够满足大众的需求,是值得推广的产品。

结论

经过这短时间本人对于系统的开发与设计,美食购物网站基本上初具形态。我建立这个系统的初心是想要建立一个收纳全国各地特产美食的网站,想要给每一个用户提供家乡的味道、美食的美妙,希望在这个物欲横流的世界,有一些勤劳的能给人甜美的梦。这个网站建立起来了,虽然只有短短几件商品,却也是不断学习造就的产品,都是创造者精心设计,很大程度上做到了网站的完整性,解决了消费者的需求。这一设计一经问世,还解决了当今社会人群失业的严重问题,以及想要做自主创业人,也可以解决他们的烦恼。网上购物系统解决了很多严重的问题,就比如:店铺的租金过于高昂,这也进而降低了销售的成本,成功促进了我国社会经济的发展,使得国民生产总值一日复一日,节节飙升,跨国电商使得国内外的交流拉近了,增进了各国家之间的情感。此网站的建立,也多亏了祖国这些先进的计算机网络技术,网站被赋予了多种多样的功能。另外就是一些不可预防的事情,和无法事先解决的问题;就比如:网络安全保护等,所以应当完善网络安全系统,进而确保消费者权益不受非法份子的侵害。

我们还会后期追踪,就在消费者感受这一块还需要进行收集与了解,方便以后的售出,还可以让产品进行及时更新。美食购物网站还会设置售后服务、让消费者感受更加人性化的服务,给与用户分享交流平台和意见提交平台,让用户能够各抒己见,使我们的平台更加的完善,希望可以给消费者带来好心情。以后的购物系统会更加符合大众的需求。

相关推荐
一 乐6 天前
美食推荐|基于springboot+vue的美食分享系统设计与实现(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·美食
冉冰学姐12 天前
SSM美食达人1175f(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面
毕业设计·美食·ssm 框架·美食达人系统·javaweb 开发
q_19132846951 个月前
基于SpringBoot+Vue2的美食菜谱美食分享平台
java·spring boot·后端·计算机·毕业设计·美食
ws540d1 个月前
舌尖上的山河:中国美食里的文化密码(第二季)
物联网·美食
毕设源码-朱学姐1 个月前
【开题答辩全过程】以 基于springboot美食分享网站为例,包含答辩的问题和答案
美食
麦麦大数据1 个月前
F039 python五种算法美食推荐可视化大数据系统vue+flask前后端分离架构
python·算法·vue·推荐算法·美食·五种算法
计算机毕业设计小帅2 个月前
【2026计算机毕业设计】基于Springboot的广西美食宣传系统
spring boot·毕业设计·课程设计·美食
汤姆yu2 个月前
2025版基于springboot的美食食品商城系统
spring boot·后端·美食
毕设源码-郭学长2 个月前
【开题答辩全过程】以 springboot+美食电子商城的设计与实现为例,包含答辩的问题和答案
java·eclipse·美食