首页 > 分享 > Nodejs+vue+mysql花卉鲜花商城销售系统

Nodejs+vue+mysql花卉鲜花商城销售系统

花匠小妙招
2024-11-12 08:11

文章目录项目介绍具体实现截图技术栈支持界面设计原则可行性分析开发工具和技术简介错误处理和异常处理nodejs类核心代码部分展示源码获取/联系我

项目介绍

首页：显示平台基本信息、特色鲜花展示、促销活动等。
登录注册：用户账号的创建、登录功能。
个人中心：用户可以查看和编辑个人信息，密码修改、地址管理等。
成为会员：用户可以通过支付成为会员，享受会员专属优惠。
鲜花信息：浏览各类鲜花的详细信息，包括图片、描述、价格等。
鲜花售卖：用户可以选购鲜花，并进行在线支付（支付宝模拟）。
物流查询：提供订单的物流跟踪信息。
鲜花套餐推荐：根据用户收藏推荐
我的订单：用户可以查看自己的订单历史和状态。
我的收藏：用户可以收藏喜欢的鲜花信息。
会员价格：展示会员专享的鲜花价格。
花卉信息：提供各种花卉的详细信息和购买选项。
交易信息：用户可以查看自己的交易记录和状态。
在线客服：提供在线咨询服务，解答用户疑问（自动回复）。
管理员端功能
首页数据可视化：显示平台的运营数据，销售额、访问量等。
用户管理：管理用户账号信息，包括注册信息、登录日志等。
会员管理：管理会员信息，包括会员等级、优惠政策等。
类别信息管理：管理鲜花的分类信息。
销售信息管理：管理鲜花的销售记录，包括销售额、热销产品等。
物流信息管理：管理订单的物流信息，确保物流流程的顺畅。
采购信息管理：管理鲜花的采购信息，包括供应商管理、采购记录等。
系统管理：管理系统基础设置，权限分配、系统日志等。
花卉信息管理：管理花卉的详细信息，包括图片、描述、分类等。
交易管理：管理用户的交易信息，包括订单处理、退款处理等。
财务管理：管理平台的财务信息，包括收入、支出、财务报表等。

具体实现截图

在这里插入图片描述

技术栈支持

该系统将采用B/S结构模式，开发软件有很多种可以用，本次开发用到的软件是vscode，用到的数据库是MySQL，为了更加便捷地使用数据库，用到了MySQL的可视化工具SQLyog/Navicat。
前端:vue.js+ElementUi
数据库：mysql
数据库工具：Navicat/SQLyog都可以
开发运行软件：VScode/webstorm/hbuiderx均可
express+Nodejs+Vue.js -vscode

界面设计原则

通常，大多数用户使用系统的目标主要是为了获取必要信息或享受系统提供的服务。因此，为了优化用户体验并增加系统的使用效率，在设计系统界面时，我们需要遵守以下准则：
简洁明了：界面设计应简洁明了，避免过多的装饰和复杂的布局，让用户能够快速找到需要的功能和信息，提高用户的使用效率。
一致性：界面设计应保持一致性，统一的风格和布局能够让用户更容易理解和操作，降低用户的学习成本和操作错误率。
易用性：界面设计应注重用户体验，考虑用户的习惯和心理需求，设计简单直观的操作流程和交互方式，让用户能够轻松上手并快速完成操作。

重点突出：界面设计应突出重点信息和功能，通过合适的排版和颜色搭配，将重要的内容和功能置于显眼的位置，减少用户的浏览和搜索时间。
反馈机制：界面设计应提供即时的反馈机制，让用户能够清晰地了解自己的操作结果和系统状态，减少用户的焦虑和困惑。

可行性分析

明确了这个项目是一款实用程序后，便开始按照步骤实施其设计及解析过程。此研究涉及利用数据库作为数据处理工具和存储介质，因此挑选合适的关系型数据库成为关键阶段。由于可供选择的不多，它们的功能并无显著差别，都能够满足应用需求。因此，除了基于上述因素外，还需要进一步评估哪些数据库最符合我们的实际需求。对于计算机设备而言，这是我在大一学年购买的，当时没有足够的资金去选购更好的机器，仅用于学习目的。随着时间的推移，该设备逐渐磨损且性能有所降低，同时还需保存大量的教学资源[4]。此外，考虑到即将毕业的我无法长期依赖学校的实验室，所以我决定寻找一款适应我的旧式笔记本电脑以支持现有的应用程序开发工作。最后，根据全面权衡后的结果，选择了MySQL 作为应用数据库，原因在于它的体积较小，占用的内存也少，不会对其它正在运行的软件产生干扰;另外，无需因安装或更新MySQL数据库而重新启动操作系统。

开发工具和技术简介

Nodejs语言
只有拥有了一款解析器才能使得脚本语言顺利运行，JavaScript语言是一种脚本语言，各种各样的解析器位于系统中的不同部位，Node.js是一个完整的解析器，而且OS允许js来定义多种多样种类繁多的数据结构，从而处理各种运算，还准许js使用系统环境所提供的多种内置对象和方式做各类计算。当处在浏览器运行环境下时，js技术的用途是进行DOM相关的运算，在这个情况下，该环境便提供一个document类别的内置操作对象。而在node.js运行环境下的js的用途是对磁盘文件进行操作或者是对http服务器进行搭建，此时，node.js就相应提供了fs,http等系统内置对象。

vue前端框架
前端方面，采用近几年比较火的Vue前端框架。Vue是一套用于构建用户界面的渐进式前端框架，使用其可以简化前端页面的开发。同时本系统采用前后端分离开发模式，前端只需要专注于页面的开发，以及接收后端传过来的数据，而后端只需要专注于业务的处理，提供获取JSON格式数据的接口。Express不对node.js已有的特性进行二次抽象，只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单。Express是Web开发人员最欢迎的Node.js框架之一,提供一系列强大特性帮助创建各种Web应用。

VScode是我们最常用的网页编辑器，通过日常学习，我们基本熟练运用，在完成项目的过程中，我们可以更加节省时间。而且VScode包含很多插件并且免费，下载更加快捷方便，可以给我们提供很多便捷条件。运行的便捷给我提供很大帮助。

错误处理和异常处理

在系统中，设计了一个健壮的错误处理和异常处理策略。系统会捕获可能发生的错误和异常情况，并提供相应的处理和反馈机制。
系统将采用适宜的异常类别来描述各种类型的错误和异常状况，并通过异常处理策略去捕获和应对这些异常。在处理异常时，系统会提供相关的错误数据和日志记录，以协助开发者和管理者进行问题诊断和解决。此外，系统还会向用户提供友好的错误提示，以确保用户能够理解问题并采取适当的行动。

nodejs类核心代码部分展示

import { version } from '../../package.json' import { Router } from 'express' import { Op } from 'sequelize' import toRes from '../lib/toRes' import UsersModel from '../models/UsersModel' import jwt from 'jsonwebtoken' export default ({ config, db }) => {let api = Router()// 用户登录接口api.post('/login', async (req, res) => {try {let userinfo = await UsersModel.findOne({ where: { username: req.query.username, password: req.query.password } })if (userinfo === null) {toRes.session(res, -1, '用户名或密码错误！')return;}const token = jwt.sign({id: userinfo.dataValues.id,username: userinfo.dataValues.username,role: userinfo.dataValues.role},config.jwtSecret,{expiresIn: 60 * 60 * 24 * 1})userinfo.dataValues.token = tokendelete userinfo.dataValues.passwordreq.session.userinfo = userinfotoRes.session(res, 0, '登录成功！', token)} catch(err) {toRes.session(res, 500, '服务器错误！', '', 500)}})// 用户退出接口api.all('/logout', (req, res) => {if (!toRes.auth(req, res, '管理员')) returnreq.session.destroy(err => {toRes.session(res, 0, '退出成功！')})})// 注册接口api.post('/register', async (req, res) => {try {const userinfo = await UsersModel.create(req.body)if (userinfo === null) {toRes.session(res, -1, '注册失败！')} else {toRes.session(res, 0, '注册成功！')}} catch(err) {toRes.session(res, 500, '服务器错误！', '', 500)}})

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475