首页 > 分享 > nodejs+vue.js+express宠物用品电子商务购物系统设计与实现

nodejs+vue.js+express宠物用品电子商务购物系统设计与实现

萌宠菠菠乐园
2024-09-19 19:50

目录功能介绍数据库设计创新点技术栈具体实现截图技术论证解决的思路论文目录核心代码风格源码获取/联系我

功能介绍

1）前台模块
1）注册登录
注册信息完成后，输入账号密码登录
2）商品浏览
商品分类展示，分页显示商品名称、商品价格、商品描述、商品图片，可以关键字搜索商品。
3）购物车
用户点击购买商品即可加入购物车，可以删除购物车里的内容，点击结算模拟支付生成订单。
4）订单管理
可以查询订单信息、查看是否发货、选择是否退货、进行确认收获
5）用户信息管理
修改用户名、修改密码、修改个人信息
6)留言功能
可以在商品页面发布留言
（2）后台界面
只有管理员能登录后台，对网站进行维护
1）用户管理
查看全部用户，修改和删除用户
2）商品管理
添加、修改、查询、删除商品信息
3）订单管理
查询订单信息包括订单号、用户信息、商品信息、总价及查看是否收货、是否退货、发货确认
4）留言管理
管理员可以回复用户的留言、删除留言、查询用户的留言

数据库设计

（1）用户表
记录所有注册用户信息，包括账号，密码，姓名，性别，年龄，地址，电话号码等
（2）商品表
记录商品信息，包括商品名称，商品价格，商品图片，商品内容等等
（3）订单表
记录所有订单信息，包括订单账号，真实姓名，地址，电话，付款时间，用户名等等
（4）管理员表
记录管理员（商家）信息，包括账号，密码
（5）商品类别表
记录商品所属的分类

创新点

此次开发的是一个小型B2C的电子商务类系统，是企业和消费者之间的电子商务，在设计系统时要根据企业和消费者双方的需求来制定功能。大体的思路是将系统分为前台和后台两个模块，前台模块主要负责验证登录，浏览商品处理订单等等，后台模块偏向企业需求，主要负责用户和商品信息的管理等。

技术栈

开发语言 node.js
框架：Express
前端:vue.js+ElementUi
数据库：mysql
数据库工具：Navicat/SQLyog都可以
开发运行软件：VScode/webstorm/hbuiderx均可
系统的开发框架使用Vue技术，数据库服务器使用MySQL，开发环境使用VScode。 MySQL体积较小运行十分便捷，执行命令迅速。

具体实现截图

在这里插入图片描述

。

技术论证

本课题拟采用主流的MVC架构、MySQL数据库技术、Vue.js技术和现代网络通讯技术来完成。

表现层：写多个vue页面，负责接收用户请求数据和处理后的结果显示控制器层：又多个控制器组成，这些控制器用于拦截用户请求，并调用业务逻辑组件的业务逻辑方法，并处理用户请求，根据不同的处理结果发送到相应的表现层组件业务逻辑层：由实现所需业务的各个业务对象组成，它们共同完成了整个所需业务的业务逻辑方法。
DAO层：由各种DAO组件构成，实现对数据库的增删改查等操作。
Vue：
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue特点：
（1）轻量级的框架：Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。
（2）双向数据绑定：声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。
（3）组件化：在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。

解决的思路

采用B/S模式架构系统，开发简单，只需要连接网络即可登录本系统，不需要安装任何客户端。开发工具采用VSCode，前端采用Vue+ElementUI，后端采用Node.js，数据库采用MySQL。
涉及的技术栈
1）前台页面：
页面结构布局采用Vue框架，可能会使用到第三方组件库Element-ui或View Design组件库、axios发送请求、html和less语法。
2）后台服务器：
服务器搭建采用基于node的Express框架快速搭建服务器，需要引入mysql模块进行对数据库的操作
3）数据库：
mysql数据库，Navicat可视化工具辅助操作数据库

论文目录

目录
1 概述 1
1.1 课题研究背景 1
1.2 课题研究意义 1
1.3 课题研究内容 2
2 系统开发环境及相关技术 3
2.1 系统开发环境 3
2.2 系统开发技术 3
2.1　nodejs简介 3
2.2 express框架 3
2.3　Vue技术 4
2.4　MySQL数据库 4
2.5 本章小结 4
3 系统需求分析 5
2.1 可行性分析 5
3.2 功能需求分析 5
3.3 系统流程分析 7
3.3.1 登录流程 7
3.3.2 添加信息流程 8
3.3.3 收藏信息流程 8
4 系统设计 9
4.1 功能模块设计 9
4.2 系统数据库设计 9
4.2.1 数据库系统 9
4.2.2 数据库概念设计 10
4.2.3 数据表设计 12
4.2.4 数据表的建立 12
5 系统实现 25
5.1系统功能实现 25
5.2后台管理员模块实现 29
5.3宠物店后台模块实现 35
6 系统测试 36
6.1软件测试过程 36
6.2测试用例 37
结论 38
致谢 39
参考文献 40

核心代码风格

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.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)}})// 用户登录接口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;}userinfo.dataValues.token = tokendelete userinfo.dataValues.passwordreq.session.userinfo = userinfotoRes.session(res, 0, '登录成功！', token)} catch(err) {toRes.session(res, 500, '服务器错误！', '', 500)}})

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647