基于node vue的电商系统 mongodb express框架

小阿七Eason

已于 2023-02-27 20:02:15 修改

阅读量1.2k

点赞数 2

于 2023-02-23 10:33:44 首次发布

本文链接：https://blog.csdn.net/m0_46108627/article/details/129176446

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

基于node vue的电商系统 mongodb express框架

前言
一、运行截图？
二、使用步骤

前言

技术栈

本项目采用前后端分离的开发方式，使用的技术栈是:Vue+Node+MongoDB
前端：用vue-cli搭建，使用vue全家桶+element-ui
后端：express框架
数据库：mongodb

基本功能

普通用户

注册、登录
根据关键词对商品模糊搜索
根据分类查询商品
商品详情展示
加入购物车及创建订单
商品评论
用户个人中心（修改个人信息及查看订单）

管理员

登录
用户管理
权限管理
商品管理
订单管理
数据统计

提示：以下是本篇文章正文内容，下面案例可供参考

一、运行截图？

在这里插入图片描述

二、使用步骤

1.前端main.js

代码如下（示例）：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

//图片懒加载
import LazyLoad from 'vue-lazyload'
Vue.use(LazyLoad, {
  error:require('./assets/img/error.png'),
  // 占位图
  loading:require('./assets/img/loading.png')
})

//引入ElementUI库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

//省市区联动
import VueAreaLinkage from 'vue-area-linkage';
import 'vue-area-linkage/dist/index.css';
Vue.use(VueAreaLinkage);

//引入图标库
import 'assets/fonts/iconfont.css'

//引入全局样式
import 'assets/css/base.css'

//事件总线
Vue.prototype.$bus = new Vue();

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

//通过methods里的代码跳转路由需要写下面代码: (不然重复点击会报错)
import Router from 'vue-router'
const routerPush = Router.prototype.replace
Router.prototype.replace = function replace(location) {
  return routerPush.call(this, location).catch(error => error)
}

2.后端admin路由

代码如下（示例）：

import express from 'express'
import mongoose from 'mongoose'
import path from 'path'
import md5 from 'blueimp-md5'
import formidable from 'formidable'
import config from '../src/config.js'
import {
	Administrator,
	User,
	Category,
	Goods,
	Comment,
	Order
} from '../db/db'
const router = express.Router();

const S_KEY = 'leavehao@foxmail.com' //盐

//管理员登录
router.post('/login', async (req, res) => {
	let adminName = req.body.adminName;
	let adminPsw = md5(md5(req.body.adminPsw) + S_KEY);
	let result = await Administrator.findOne({
		adminName
	})
	if (result) {
		if (adminPsw === result.password) {
			req.session.admin = adminName;
			res.json({
				status_code: 200,
				message: '登录成功',
			})
		} else {
			res.json({
				status_code: 400,
				message: '密码错误'
			})
		}
	} else {
		res.json({
			status_code: 400,
			message: '用户名不存在'
		})
	}
})

//设置后台访问权限
router.use((req, res, next) => {
	if (!req.session.admin) {
		res.json({
			status_code: 400,
			message: '无权访问'
		})
	}
	next();
})

// 验证登录状态,若未被中间件拦截则为登录状态
router.get('/isadmin', async (req, res) => {
	console.log(req.session.admin)
	if(req.session.admin){
		let result = await Administrator.findOne({
			adminName: req.session.admin
		})
		console.log(result)
		res.json({
			status_code: 200,
			message: '进入管理员界面',
			adminName: req.session.admin,
			role: result.role
		})
	}

})

//退出登录
router.get('/logout', (req, res) => {
	req.session.admin = '';
	res.json({
		status_code: 200,
		message: '已退出登录'
	})
})


/**************************************** 用户管理 *******************************************/

//获取用户列表
router.get('/userlist', async (req, res) => {
	let result;
	if (req.query.userName) {
		result = await User.find({
			userName: {
				$regex: req.query.userName,
				$options: 'gi'
			}
		});
	} else {
		result = await User.find({});
	}
	res.json({
		status_code: 200,
		message: '获取用户列表成功',
		total: result.length,
		users: result
	})
})

//添加用户
router.post('/adduser', (req, res) => {
	const form = new formidable.IncomingForm();
	form.uploadDir = config.uploadsAvatarPath; // 上传图片放置的文件夹
	form.keepExtensions = true; // 保持文件的原始扩展名
	form.parse(req, (err, fields, files) => {
		let avatar;
		if (fields.userSex == '男') {
			avatar = 'http://localhost:' + config.port + '/boy_avatar.svg'
		} else {
			avatar = 'http://localhost:' + config.port + '/girl_avatar.svg'
		}
		if (files.userAvatar) {
			avatar = 'http://localhost:' + config.port + '/avatar_uploads/' + path.basename(files.userAvatar.path);
		}
		let userInfo = {
			userName: fields.userName,
			password: md5(md5(fields.userPsw) + S_KEY), //加密密码
			userEmail: fields.userEmail,
			userPhone: fields.userPhone,
			userSex: fields.userSex,
			userSign: fields.userSign,
			userAdress: fields.userAdress,
			nickName: fields.nickName,
			// userAdress:fields.userAdress.replace(/,/g,''),
			userAvatar: avatar
		}
		User.create(userInfo, (err, doc) => {
			console.log(err, doc)
			if (!err) {
				res.json({
					status_code: 200,
					message: '添加用户成功',
				})
			} else {
				res.json({
					status_code: 400,
					message: '内部错误,添加用户失败',
				})
			}
		})
	})
})

//编辑用户
router.post('/edituser', (req, res) => {
	const form = new formidable.IncomingForm();
	form.uploadDir = config.uploadsAvatarPath; // 上传图片放置的文件夹
	form.keepExtensions = true; // 保持文件的原始扩展名
	form.parse(req, (err, fields, files) => {
		let avatar;
		let userInfo = {
			userName: fields.userName,
			userEmail: fields.userEmail,
			userPhone: fields.userPhone,
			userSex: fields.userSex,
			userSign: fields.userSign,
			userAdress: fields.userAdress,
			nickName: fields.nickName
		}
		if (files.userAvatar) {
			avatar = 'http://localhost:' + config.port + '/avatar_uploads/' + path.basename(files.userAvatar.path);
			userInfo.userAvatar = avatar
		}
		if (fields.userPsw) {
			userInfo.password = md5(md5(fields.userPsw) + S_KEY); //加密密码
		}
		User.updateOne({
			userName: fields.userName
		}, userInfo).then((doc) => {
			res.json({
				status_code: 200,
				message: '修改用户成功',
			})
		}).catch((err) => {
			res.json({
				status_code: 400,
				message: '内部错误,修改用户信息失败',
			})
		})
	})
})

//删除用户
router.get('/deleteuser', (req, res) => {
	let userName = req.query.userName;
	User.findOneAndDelete({
		userName
	}).then((doc) => {
		res.json({
			status_code: 200,
			message: '删除用户成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,删除用户失败',
		})
	})
})

/**************************************** 权限管理 *******************************************/

//获取管理员列表
router.get('/adminlist', async (req, res) => {
	let result;
	if (req.query.adminName) {
		result = await Administrator.find({
			adminName: {
				$regex: req.query.adminName,
				$options: 'gi'
			}
		});
	} else {
		result = await Administrator.find({});
	}
	res.json({
		status_code: 200,
		message: '获取管理员列表成功',
		total: result.length,
		administrators: result
	})
})

//添加管理员
router.post('/addadmin', (req, res) => {
	let regFrom = req.body;
	console.log(regFrom)
	let adminInfo = {
		adminName: regFrom.adminName,
		password: md5(md5(regFrom.adminPsw) + S_KEY), //加密密码
		role: regFrom.adminRole
	}
	Administrator.create(adminInfo, (err, doc) => {
		console.log(err, doc)
		if (!err) {
			res.json({
				status_code: 200,
				message: '添加管理员成功',
			})
		} else {
			res.json({
				status_code: 400,
				message: '内部错误,添加管理员失败',
			})
		}
	})
})

//检查管理员名是否已注册
router.get('/checkname', async (req, res) => {
	let adminName = req.query.adminName;
	let isNameReg = await Administrator.findOne({
		adminName
	})
	if (isNameReg) {
		res.json({
			status_code: 400,
			message: '该名称已注册'
		})
	} else {
		res.json({
			status_code: 200,
			message: '该名称可以使用'
		})
	}
})

//编辑管理员
router.post('/editadmin', async (req, res) => {
	let regFrom = req.body;
	console.log(regFrom);
	let adminInfo = {
		adminName: regFrom.adminName,
		role: regFrom.adminRole
	}
	if (regFrom.adminPsw) {
		adminInfo.password = md5(md5(regFrom.adminPsw) + S_KEY); //加密密码
	}
	Administrator.updateOne({
		adminName: regFrom.adminName
	}, adminInfo).then((doc) => {
		res.json({
			status_code: 200,
			message: '修改管理员信息成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,修改管理员信息失败',
		})
	})
})

//删除管理员
router.get('/deleteadmin', (req, res) => {
	let adminName = req.query.adminName;
	Administrator.findOneAndDelete({
		adminName
	}).then((doc) => {
		res.json({
			status_code: 200,
			message: '删除管理员成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,删除管理员失败',
		})
	})
})

/**************************************** 商品管理 *******************************************/

//获取分类列表
router.get('/catelist', async (req, res) => {
	let result;
	if (req.query.cateId) {
		result = await Category.find({
			cateId: req.query.cateId
		}).sort('cateId');
	} else {
		result = await Category.find({}).sort('cateId');
	}
	res.json({
		status_code: 200,
		message: '获取分类列表成功',
		total: result.length,
		categories: result
	})
})

//检查分类ID是否已存在
router.get('/checkcateid', async (req, res) => {
	let cateId = req.query.cateId;
	let isIdReg = await Category.findOne({
		cateId
	})
	if (isIdReg) {
		res.json({
			status_code: 400,
			message: '此ID已被使用'
		})
	} else {
		res.json({
			status_code: 200,
			message: '此ID可以使用'
		})
	}
})

//检查分类名称是否已存在
router.get('/checkcatename', async (req, res) => {
	let cateName = req.query.cateName;
	let isIdReg = await Category.findOne({
		cateName
	})
	if (isIdReg) {
		res.json({
			status_code: 400,
			message: '此名称已被使用'
		})
	} else {
		res.json({
			status_code: 200,
			message: '此名称可以使用'
		})
	}
})

//添加分类
router.post('/addcate', (req, res) => {
	let regFrom = req.body;
	console.log(regFrom)
	let cateInfo = {
		cateId: regFrom.cateId,
		cateName: regFrom.cateName,
		cateCounts: 0,
		cateSales: 0
	}
	Category.create(cateInfo, (err, doc) => {
		console.log(err, doc)
		if (!err) {
			res.json({
				status_code: 200,
				message: '添加分类成功',
			})
		} else {
			res.json({
				status_code: 400,
				message: '内部错误,添加分类失败',
			})
		}
	})
})

//编辑分类
router.post('/editcate', async (req, res) => {
	let editFrom = req.body;
	Category.updateOne({cateId: editFrom.cateId}, editFrom).then((doc) => {
		res.json({status_code: 200,message: '修改分类信息成功',})
	}).catch((err) => {
		res.json({status_code: 400,message: '内部错误,修改分类信息失败',})
	})
})

//删除分类
router.get('/deletecate', (req, res) => {
	let cateId = req.query.cateId;
	Category.findOneAndDelete({
		cateId
	}).then(async (doc) => {
		//删除商品下评论
		let result = await Goods.find({
			goodsCategory: cateId
		})
		console.log('result', result)
		for (let i = 0; i < result.length; i++) {
			await Comment.deleteMany({
				goodsId: result[i].goodsId
			})
		}
		//删除分类下所有商品
		await Goods.deleteMany({
			goodsCategory: cateId
		})
		res.json({
			status_code: 200,
			message: '删除分类成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,删除分类失败',
		})
	})
})

//获取商品列表
router.get('/goodslist', async (req, res) => {
	let result;
	if (req.query.goodsCategory) {
		if (req.query.goodsId) {
			let resultId = await Goods.find({
				goodsId: req.query.goodsId,
				goodsCategory: req.query.goodsCategory
			}).sort('goodsCategory');
			let resultName = await Goods.find({
				goodsName: {
					$regex: req.query.goodsId,
					$options: 'gi'
				},
				goodsCategory: req.query.goodsCategory
			}).sort('goodsCategory');
			if (resultId.length != 0) {
				result = resultId
			} else {
				result = resultName
			}
		} else {
			result = await Goods.find({
				goodsCategory: req.query.goodsCategory
			}).sort('goodsCategory');
		}
	} else {
		if (req.query.goodsId) {
			let resultId = await Goods.find({
				goodsId: req.query.goodsId
			}).sort('goodsCategory');
			let resultName = await Goods.find({
				goodsName: {
					$regex: req.query.goodsId,
					$options: 'gi'
				}
			}).sort('goodsCategory');
			if (resultId.length != 0) {
				result = resultId
			} else {
				result = resultName
			}
		} else {
			result = await Goods.find({}).sort('goodsCategory');
		}
	}
	res.json({
		status_code: 200,
		message: '获取分类列表成功',
		total: result.length,
		goods: result
	})
})

//获取商品的分类
router.get('/goodscate', async (req, res) => {
	let result = await Category.findOne({cateId: req.query.cateId});
	res.json({
		status_code: 200,
		message: '获取分类信息成功',
		goodsCate: result.cateName
	})
})

//检查商品ID是否已存在
router.get('/checkgoodsid', async (req, res) => {
	let goodsId = req.query.goodsId;
	let isIdReg = await Goods.findOne({
		goodsId
	})
	console.log(isIdReg)
	if (isIdReg) {
		res.json({
			status_code: 400,
			message: '此ID已被使用'
		})
	} else {
		res.json({
			status_code: 200,
			message: '此ID可以使用'
		})
	}
})

//添加商品
router.post('/addgoods', (req, res) => {
	const form = new formidable.IncomingForm();
	form.uploadDir = config.uploadsGoodsPath; // 上传图片放置的文件夹
	form.keepExtensions = true; // 保持文件的原始扩展名
	form.parse(req, (err, fields, files) => {
		let goodsInfo = {
			goodsId: fields.goodsId,
			shortName: fields.shortName,
			goodsName: fields.goodsName,
			goodsPrice: fields.goodsPrice,
			normalPrice: fields.normalPrice,
			salesTips: fields.salesTips,
			goodsCategory: fields.goodsCategory,
			goodsCounts: Number(fields.goodsCounts),
			goodsImg: 'http://localhost:' + config.port + '/uploads/' + path.basename(files.goodsImg.path),
			goodsComments: 0
		}
		Goods.create(goodsInfo, async (err, doc) => {
			//更新商品分类里的商品数量
			let result = await Goods.find({
				goodsCategory: fields.goodsCategory
			});
			Category.updateOne({
				cateId: fields.goodsCategory
			}, {
				cateCounts: result.length
			}).then(doc => console.log('doc', doc)).catch(err => console.log('err', err))

			if (!err) {
				res.json({
					status_code: 200,
					message: '添加商品成功',
				})
			} else {
				res.json({
					status_code: 400,
					message: '内部错误,添加商品失败',
				})
			}
		})
	})
})

//编辑商品
router.post('/editgoods', (req, res) => {
	const form = new formidable.IncomingForm();
	form.uploadDir = config.uploadsGoodsPath; // 上传图片放置的文件夹
	form.keepExtensions = true; // 保持文件的原始扩展名
	form.parse(req, (err, fields, files) => {
		console.log(fields, files)
		let goodsInfo = {
			goodsId: fields.goodsId,
			shortName: fields.shortName,
			goodsName: fields.goodsName,
			goodsPrice: fields.goodsPrice,
			normalPrice: fields.normalPrice,
			salesTips: fields.salesTips,
			goodsCategory: fields.goodsCategory,
			goodsCounts: Number(fields.goodsCounts),
		}
		if (files.goodsImg) {
			goodsInfo.userAvatar = 'http://localhost:' + config.port + '/uploads/' + path.basename(files.goodsImg.path);
		}
		Goods.updateOne({
			goodsId: fields.goodsId
		}, goodsInfo).then(async (doc) => {
			//更新编辑前商品分类里的商品数量
			let resultOld = await Goods.find({
				goodsCategory: fields.goodsOldCate
			});
			Category.updateOne({
				cateId: fields.goodsOldCate
			}, {
				cateCounts: resultOld.length
			}).then(doc => console.log('doc', doc)).catch(err => console.log('err', err));
			//更新编辑后商品分类里的商品数量
			let result = await Goods.find({
				goodsCategory: fields.goodsCategory
			});
			Category.updateOne({
				cateId: fields.goodsCategory
			}, {
				cateCounts: result.length
			}).then(doc => console.log('doc', doc)).catch(err => console.log('err', err));
			res.json({
				status_code: 200,
				message: '修改商品成功',
			})
		}).catch((err) => {
			console.log(err)
			res.json({
				status_code: 400,
				message: '内部错误,修改商品信息失败',
			})
		})
	})
})

//删除商品
router.get('/deletegoods', (req, res) => {
	let goodsId = req.query.goodsId;
	let goodsCategory = req.query.goodsCategory;
	Goods.findOneAndDelete({
		goodsId
	}).then(async (doc) => {
		//删除该商品下所有评论
		Comment.deleteMany({
			goodsId
		}).then(doc => console.log(doc))
		//更新删除后商品分类里的商品数量
		let result = await Goods.find({
			goodsCategory
		});
		Category.updateOne({
			cateId: goodsCategory
		}, {
			cateCounts: result.length
		}).then(doc => console.log('doc', doc)).catch(err => console.log('err', err));
		res.json({
			status_code: 200,
			message: '删除商品成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,删除商品失败',
		})
	})
})

/**************************************** 订单管理 *******************************************/

//获取订单列表
router.get('/orderlist', async (req, res) => {
	let result;
	if (req.query.userName) {
		let resultId = [];
		if (req.query.userName.length == 24) {
			resultId = await Order.find({
				_id: mongoose.Types.ObjectId(req.query.userName)
			}).sort('-orderTime');
		}
		let resultName = await Order.find({
			userName: {
				$regex: req.query.userName,
				$options: 'gi'
			}
		}).sort('-orderTime');
		if (resultId.length != 0) {
			result = resultId
		} else {
			result = resultName
		}
	} else {
		result = await Order.find({}).sort('-orderTime');
	}
	res.json({
		status_code: 200,
		message: '获取订单列表成功',
		total: result.length,
		orders: result
	})
})

//编辑订单信息
router.post('/editorder', async (req, res) => {
	let editFrom = req.body;
	console.log(editFrom);
	Order.updateOne({
		_id: mongoose.Types.ObjectId(editFrom._id)
	}, editFrom).then((doc) => {
		res.json({
			status_code: 200,
			message: '修改订单信息成功',
		})
	}).catch((err) => {
		console.log(err)
		res.json({
			status_code: 400,
			message: '内部错误,修改订单信息失败',
		})
	})
})

//删除订单
router.get('/deleteorder', (req, res) => {
	Order.findOneAndDelete({
		_id: mongoose.Types.ObjectId(req.query._id)
	}).then((doc) => {
		res.json({
			status_code: 200,
			message: '删除订单成功',
		})
	}).catch((err) => {
		res.json({
			status_code: 400,
			message: '内部错误,删除订单失败',
		})
	})
})

/**************************************** 数据统计 *******************************************/

//获取数据统计数据
router.get('/datalist', async (req, res) => {
	let result = await Category.find({}).sort('cateId');
	let xAxisData =[];
	let seriesData = [];
	for (let i = 0; i < result.length; i++) {
		xAxisData.push(result[i].cateName);
		seriesData.push(result[i].cateSales);
	}
	let option = {
		title: {
			text: '各分类月销量'
		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: xAxisData
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: seriesData
		}]
	};
	console.log(xAxisData,seriesData,option)
	res.json({
		status_code: 200,
		message: '获取数据统计信息成功',
		option: option
	})
})


export default router;

源码

https://pan.baidu.com/s/1ADfDdHbOYui8vwOTzwCbUA?pwd=8767

小阿七Eason

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
基于node vue的电商系统 mongodb express框架

本项目采用前后端分离的开发方式，使用的技术栈是:Vue+Node+MongoDB前端：用vue-cli搭建，使用vue全家桶+element-ui后端：express框架数据库：mongodb。
复制链接

扫一扫