Vue+Node.js+MySql宠物养护平台的设计与实现,用户端+后台管理系统

一、功能描述

宠物养护平台有用户和管理员两个角色,用户可在此平台进行账号注册,登录平台后可在社区模块进行交流,可对宠物能不能吃、宠物能不能做进行自查,可进行宠物识别、宠物疾病自查、个人信息修改、宠物信息管理等操作。
管理员可登录后台管理系统对社区模块进行管理,对每日贴士数据、能不能吃数据、能不能做数据、疾病信息进行管理,对用户使用平台状态进行管理,还可查看此平台统计数据。
本平台的系统总体结构模块如图1-1所示。
图1-1 系统总体结构模块图

二、主要技术

本平台服务端使用Node的Express框架进行开发,前端使用Vue3.0+Element-Plus。数据存储在关系型数据库Mysql中,为了简化数据库管理和降低管理成本开发时使用Navicat Premium 15来进行对数据库的操作,Vue前端使用Axios来请求后端服务器接口。应用程序的具体配置如下:
开发系统:window10
开发环境配置:node.js
开发工具:Visual Studio Code , Navicat Premium 15
数据库:MySQL
使用开发语言:html+css+js,Node.js(Express框架)
前端构建工具:vite
框架和插件:Vue 3.0、Element-Plus、Echarts、multer、jsonwebtoken、vuex

三、系统功能

3.1软件安装与配置

本平台前台、后台系统都在Visual Studio Code上进行开发,通过使用vue进行搭建项目于,打包工具是vite,同时需要安装node.js并配置环境变量,然后使用npm install安装下载项目所需依赖。
本平台后端使用Node.js的Express作为开发语言,在Visual Studio Code进行开发,也需要安装node.js并配置环境变量,之后在浏览器中访问http://localhost:3000即可进行访问相应接口。

3.2用户模块的使用方法

(1)用户进入平台后,首先进行登录操作,若没有账号可选择注册,注册成功后可直接跳转到登录页面。用户登录见图3-1,用户注册见图3-2。

图3-1 用户登录图3-1 用户登录
图3-2 用户注册
图3-2 用户注册
(2)登录成功后,直接跳转到首页,在首页可以看到轮播图、每日贴士以及联系方式。首页见图3-3。
图3-3 首页
图3-3 首页
(3)点击上方导航栏“宠友圈”,可进入社区模块,社区模块见图3-4,
可直接浏览用户发布的帖子,在1区域中可选择帖子的种类。在2区域中可选择要发表帖子的类别,从上到下依次为发说说、提问、种草笔记,选择要发表帖子种类后点击,会弹出如图3-5所示的弹出框,可在此区域进行帖子编写发布。
图3-4 社区模块
图3-4 社区模块
图3-5 帖子发布
图3-5 帖子发布
点击帖子左下角爱心可对帖子进行点赞,选中帖子点击后会弹出如3-6所示的弹出框,用户可在1区域进行评论;若此贴是本用户所发,则会显示2区域,可对本帖子进行删除;在3区域可进行帖子举报。
图3-6 帖子评论、举报、删除
图3-6 帖子评论、举报、删除
(4)点击上方导航栏“知识百科-能不能吃”,选择猫猫能不能吃或狗狗能不能吃后,可进入能不能吃自查模块,能不能吃自查模块见图3-7,在页面顶部可根据食物名称进行搜索。点击要查看的食物后,会在弹出框中显示食物信息,如图3-8所示。
图3-7 能不能吃自查
图3-7 能不能吃自查
图3-8 能不能吃食物详情图3-8 能不能吃食物详情
(5)点击上方导航栏“知识百科-能不能做”,选择猫猫能不能做或狗狗能不能做后,可进入能不能做自查模块,能不能做自查模块分类见图3-9,点击对应模块显示出能不能做数据,如图3-10和3-11。
图3-9 能不能做自查模块
图3-10能不能做详细数据展示
图3-11能不能做列表数据展示图3-11能不能做列表数据展示
(6)点击上方导航栏“宠物识别”,在左侧上传要识别的宠物图片,在右侧可得到识别结果。见图3-12。图3-12 宠物识别
(7)点击上方导航栏“疾病自查”,可选择猫猫医院或狗狗医院,根据提示完成疾病自查。疾病模块见图3-13和图3-14。
图3-13 疾病自查科室选择
图3-14 疾病自查诊断结果
(8)将鼠标悬浮在上方导航栏最右侧用户名位置,可选择个人信息修改、宠物信息管理、退出登录。见图3-15。
图3-15 疾病自查诊断结果

3.3管理员模块的使用方法

(1)管理员进入管理平台前需要先登录,管理员登录如图3-16。
图3-16 管理员登录(2)管理员可在每日贴士模块中进行对贴士的增加、删除、修改、查看,见图3-17。
图3-17 每日贴士管理
(3)登录后,管理员首先进入首页可查看数据统计,见图3-18。图3-18 数据统计
(4)管理员可在知识百科管理-能不能吃模块中进行对食物的增加、删除、修改、查看,见图3-19。
图3-19 能不能吃数据管理
(5)管理员可在知识百科管理-能不能做模块中进行对事情的增加、删除、修改、查看,见图3-20。
图3-20 能不能做数据管理(6)管理员可在用户管理模块中进行对用户的查看、状态修改,见图3-21。
图3-21 用户管理
(7)管理员可在疾病信息管理模块中进行对疾病信息的增加、删除、修改、查看,见图3-22。
图3-22 疾病信息管理(8)管理员可在社区管理-帖子管理模块中进行对帖子信息的删除、查看,见图3-23。
图3-23 帖子管理
(9)管理员可在社区管理-评论管理模块中进行对评论信息的删除、查看,见图3-24。
图3-24 评论管理

四、结束

本篇文章到此就结束啦,欢迎大家提出宝贵意见!!

猜你喜欢

转载自blog.csdn.net/m0_46695182/article/details/131374141