SpringBoot+Vue宠物店管理系统

前台功能实现

系统首页页面

当人们打开系统的网址后，首先看到的就是首页界面。在这里，人们能够看到系统的导航条，通过导航条导航进入各功能展示页面进行操作。系统首页界面如图5-1所示：

图5-1 系统首页界面

在注册流程中，用户在Vue前端填写必要信息（如用户名、密码等）并提交。系统注册页面如图5-2所示：

图5-2系统注册页面

宠物信息：在宠物信息页面的输入栏中输入宠物名称进行查询，可以查看到宠物的详细信息，并根据需要进行购买、赞、踩或收藏操作；宠物信息页面如图5-3所示：

图5-3宠物信息详细页面

玩具信息：在玩具信息页面的输入栏中输入商品名称进行查询，可以查看到玩具的详细信息，并根据需要进行购买操作；玩具信息页面如图5-4所示：

图5-4玩具信息详细页面

个人中心

个人中心：在个人中心页面可以对个人中心、修改密码、宠物订单、用品订单、预约信息、就诊订单、我的收藏进行详细操作；如图5-5所示：

图5-5个人中心界面

后台功能模块实现

在登录流程中，用户首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证用户凭证。后台登录界面图5-6所示。

图5-6 后台登录界面

管理员功能模块实现

管理员进入主页面，主要功能包括对首页、用户、员工、宠物种类、宠物信息、宠物订单、玩具信息、食品信息、日用品信息、服饰信息、用品订单、医生信息、预约信息、就诊订单、考勤信息、工资信息、药品信息、入库信息、出库信息、系统管理、用户信息等功能进行操作。管理员主页面如图5-7所示：

图5-7管理员主界面

员工功能在视图层（view层）进行交互，比如点击“查看、新增或删除”按钮或填写员工信息表单。对用户功能也可进行相似操作。员工界面如图5-8所示：

图5-8员工界面

宠物信息管理功能在视图层（view层）进行交互，比如点击“查询、新增或删除”按钮或填写宠物信息表单。宠物信息管理界面如图5-9所示：

图5-9宠物信息管理界面

玩具信息功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写玩具信息表单。玩具信息管理界面请参见图5-10：

图5-10玩具信息界面

医生信息管理功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写医生信息表单。医生信息界面如图5-11所示：

图5-11医生信息管理界面

药品信息管理功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写药品信息表单。药品信息界面如图5-12所示：

图5-12药品信息管理界面

系统管理功能在视图层（view层）进行交互，比如点击“查询、添加或删除”按钮或填写公告信息表单。系统管理界面如图5-13所示：

图5-13系统管理界面

员工功能模块实现

员工进入主页面，主要功能包括对首页、宠物信息、宠物订单、玩具信息、食品信息、日用品信息、服饰信息、用品订单、预约信息、就诊订单、考勤信息、工资信息、药品信息、入库信息、出库信息、用户信息等功能进行操作。员工主页面如图5-14所示：

图5-14员工主界面