在线商城和商城后台管理系统

article/2025/8/26 14:34:32

在线商城和商城后台管理系统

1、商城使用了vue2+elementUI

实现了登录注册、浏览商品、购买商品、收藏商品、商品搜索、加入购物车、查看订单、添加收货地址、在线客服、分类查看商品的等功能
在这里插入图片描述
没什么难的地方，都很基本。随便写下功能实现。
查看商品详情把商品id传过去

  // 去商品详情页async getGoodsDetails (id) {this.$router.push(`/goodsDetails?id=${id}`)},

详情页使用id获取数据

  // 获取商品数据async getGoodsInfo () {const id = this.$route.query.idconst res = await this.$http.get(`/goods/${id}`)this.goodsInfo = res.data[0]this.goodsImg = res.data[0].goods_pic1.length !== 0 ? res.data[0].goods_pic1 : [res.data[0].goods_pic]},

导航栏购物车内商品数的显示使用了event-bus

  <!-- 购物车 --><div class="shopCar" @click="toShopCar"><div>购物车</div><div class="shopCar-num">{{cartNum}}</div></div>// 获取购物车数量async getCart () {const userId = window.sessionStorage.getItem('userId')const res = await this.$http.get('getCart', {params: {user_id: userId}})let total = 0for (let i = 0; i < res.data.length; i++) {total += res.data[i].buy_num}this.cartNum = total}

 // 加入购物车async addShopCar (id) {const token = window.sessionStorage.getItem('token')const userId = window.sessionStorage.getItem('userId')if (token == null) {this.dialogVisible = truereturn}// 加入购物车const res = await this.$http.post('addCart', {user_id: userId,goods_id: id,buy_num: 1})// 传值到header组件Bus.$emit('getCartNum')this.$message.success(res.data.message)},

客服功能：之前写过，点此跳转
商品不重复推荐：之前写过，点此跳转

2、商城后台管理系统使用了react+antd

实现了注册登录、商城整体数据的查看，用户管理、商品管理、订单管理、财务管理、客服服务的功能，其下还分各种小功能对用户商品订单等详细功能进行增删改查的操作
在这里插入图片描述
这个也没什么难的
主页代码

import React, { Component } from 'react'
import './main.css'
import * as echarts from "echarts";
import { $http } from '../../request'
import { SmileTwoTone, TagsTwoTone, ProfileTwoTone, MoneyCollectTwoTone } from '@ant-design/icons';
import 'antd/dist/antd.css'
import { Layout } from 'antd';
const { Content } = Layoutclass Main extends Component {constructor(props) {super(props)this.state = {usersNum: 0,moneyNum: 0,orderNum: 0,goodsNum: 0,option: {},optionGoods: {},optionBuyCount: {},}}componentDidMount() {this.getInfo()setTimeout(() => {this.getOption();this.getOptionTwo();this.getOptionThree();}, 100)}getInfo = async () => {const { data: res } = await $http.get('getUser')const { data: res1 } = await $http.get('order')const { data: res2 } = await $http.get('goods')const { data: res3 } = await $http.get('goodsBuyCounts')let goodsNameArr = []let goodsBuyCountsArr = []for (let i = 0; i < res3.data.length; i++) {goodsNameArr.push(res3.data[i].goods_name)goodsBuyCountsArr.push(res3.data[i].goods_buyCount)}// 各商品数量let a = 0let b = 0let c = 0let d = 0let e = 0let f = 0let g = 0let h = 0let i = 0res2.map((k, index) => {switch (k.cat_id) {case 1:a++break;case 2:b++break;case 3:c++break;case 4:d++break;case 5:e++break;case 6:f++break;case 7:g++break;case 8:h++break;default:i++}return null})// 商城营业额和订单数量let totalPrice = 0// 所有的订单编号var arr = []// console.log(res1);for (let i = 0; i < res1.length; i++) {arr.push(res1[i].order_id)totalPrice = totalPrice + (res1[i].goods_price * res1[i].buy_num)}arr = [...new Set(arr)]// 商城概览饼图let option2 = {title: {text: '商城概览',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '商城概览',type: 'pie',radius: '50%',data: [{ value: res.length, name: '用户总数' },{ value: res2.length, name: '商品总数' },{ value: arr.length, name: '订单总数' },{ value: totalPrice, name: '总销售额' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}// 分类商品数量环形图let optionGoods = {tooltip: {trigger: 'item'},title: {text: '分类商品数量',left: 'center'},legend: {orient: 'vertical',left: 'left',},series: [{name: '商品总数',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: a, name: '手机' },{ value: b, name: '电视' },{ value: c, name: '空调' },{ value: d, name: '洗衣机' },{ value: e, name: '手机壳' },{ value: f, name: '手机膜' },{ value: g, name: '充电器' },{ value: h, name: '充电宝' },{ value: i, name: '耳机' },]}]}// 各商品卖出数量柱状图let option = {title: {text: '各商品卖出数量',},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},xAxis: {type: 'category',data: goodsNameArr,axisTick: {alignWithLabel: false}},yAxis: {type: 'value'},series: [{name: "卖出总数量",data: goodsBuyCountsArr,type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.7)'},color: '#ee6666'}]};this.setState({usersNum: res.length,orderNum: arr.length,goodsNum: res2.length,moneyNum: totalPrice,optionBuyCount: option,option: option2,optionGoods: optionGoods})}// 商城概览getOption = () => {let myChart = echarts.init(document.getElementById("main"));myChart.setOption(this.state.option);// echarts 大小随页面改变window.onresize = function () {myChart.resize();};};// 商品分类数量getOptionTwo = () => {let myChart1 = echarts.init(document.getElementById("main-goods"));myChart1.setOption(this.state.optionGoods);// echarts 大小随页面改变window.onresize = function () {myChart1.resize();};};// 商品卖出数量getOptionThree = () => {let myChart2 = echarts.init(document.getElementById("main-buyCount"));myChart2.setOption(this.state.optionBuyCount);// echarts 大小随页面改变window.onresize = function () {myChart2.resize();};};render() {return (<ContentclassName="site-layout-background"style={{paddingLeft: 24,marginTop: 80,marginLeft: 230,marginRight: 20,minHeight: 280,}}><div className="main-top"><div className="main-top-card"><div className="card-one"><SmileTwoTonetwoToneColor="#52c41a"style={{ fontSize: "60px" }} /></div><div className="card-two"><div style={{ fontSize: "25px", color: "red" }}>{this.state.usersNum}</div><div style={{ fontSize: "15px", color: "black" }}>用户总数</div></div></div><div className="main-top-card"><div className="card-one"><TagsTwoTonetwoToneColor="red"style={{ fontSize: "60px" }} /></div><div className="card-two"><div style={{ fontSize: "25px", color: "red" }}>{this.state.goodsNum}</div><div style={{ fontSize: "15px", color: "black" }}>商品总数</div></div></div><div className="main-top-card"><div className="card-one"><ProfileTwoTonetwoToneColor="hotpink"style={{ fontSize: "60px" }} /></div><div className="card-two"><div style={{ fontSize: "25px", color: "red" }}>{this.state.orderNum}</div><div style={{ fontSize: "15px", color: "black" }}>订单总数</div></div></div><div className="main-top-card"><div className="card-one"><MoneyCollectTwoTonetwoToneColor="#57c8f2"style={{ fontSize: "60px" }} /></div><div className="card-two"><div style={{ fontSize: "25px", color: "red" }}>{this.state.moneyNum}</div><div style={{ fontSize: "15px", color: "black" }}>总销售额</div></div></div></div><div className="main-bottom"><div id='main'style={{ height: "380px", width: "45%", backgroundColor: "#fff" }}></div><div id='main-goods'style={{ height: "380px", width: "45%", backgroundColor: "#fff" }}></div></div><div id='main-buyCount'style={{ height: "350px", width: "100%", backgroundColor: "#fff" }}></div></Content >)}
}export default Main

2、商城的后端使用了express+mongoDB

使用了node.js的express和mongoDB数据库来写接口和存储数据、有用户表、商品表、商品分类表、用户收藏表、订单表、轮播图表、后台用户表等
登录注册用了密码散列，客服通讯用了websocket，文件上传用formidable模块等

数据量少，所以存在js当中直接引用
初始化创建集合导入数据

const { hashSync } = require('bcrypt')
const mongoose = require('mongoose')// 连接数据库
mongoose.connect('mongodb://localhost:27017/storedb', {useNewUrlParser: true,useCreateIndex: true,useUnifiedTopology: true
})// 表的初始数据
const { goods, cats, banners, expressInfo } = require('./insert')// 用户表
// 随机userID
const userId = parseInt(Math.random() * 1458)
const UserSchema = new mongoose.Schema({user_id: { type: String, default: userId, unique: true },username: { type: String, unique: true, required: true, trim: true },nickname: { type: String, },password: {type: String,required: true,set(val) {// 密码加密 散列密码return hashSync(val, 8)}}
})// 商品
const GoodsSchema = new mongoose.Schema({goods_id: { type: Number },goods_name: { type: String, required: true },cat_id: { type: Number },goods_title: { type: String, required: true },goods_price: { type: String, required: true },goods_price1: { type: String },goods_subtitle: { type: String, required: true },goods_pic: { type: String },goods_pic1: { type: Array },goods_num: { type: Number, required: true }})// 分类表
const CateSchema = new mongoose.Schema({cat_id: { type: Number },cat_name: { type: String, required: true }
})// 轮播图
const BannerSchema = new mongoose.Schema({id: { type: String },banner_pic: {type: String}})// 订单表
const OrderSchema = new mongoose.Schema({order_id: { type: String },order_time: { type: String },goods_id: { type: Number, ref: "goods" },goods_name: { type: String },goods_pic: { type: String },goods_price: { type: String },buy_num: { type: Number },user_id: { type: String, required: true, ref: "user" }
})// 热门商品表
const HotGoodsSchema = new mongoose.Schema({id: { type: String },hot_name: { type: String },hot_goods: { type: Array }
})// 用户收藏表
const UserStarsSchema = new mongoose.Schema({user_id: { type: String, required: true, ref: "user" },goods_id: { type: Number, ref: "goods" },goods_name: { type: String },goods_pic: { type: String },goods_price: { type: String },goods_num: { type: Number, required: true }
})// 购物车表
const shopCartSchema = new mongoose.Schema({user_id: { type: String, required: true, ref: "user" },goods_id: { type: Number, ref: "goods" },goods_name: { type: String },goods_pic: { type: String },goods_price: { type: String },buy_num: { type: Number }
})// 用户地址表
const addressSchema = new mongoose.Schema({user_id: { type: String, required: true, ref: "user" },add_id: { type: String },user_name: { type: String },user_phone: { type: String },user_address: { type: String }
})// 后台管理用户表
const adminId = parseInt(Math.random() * 1266)
const adminUserSchema = new mongoose.Schema({admin_id: { type: String, default: adminId, unique: true },admin_name: { type: String, required: true, unique: true },admin_password: {type: String, required: true, set(val) {// 密码加密 散列密码return hashSync(val, 8)}}
})// 商品购买次数表
const goodsBuyCountSchema = new mongoose.Schema({goods_name: { type: String },goods_id: { type: Number },goods_buyCount: { type: Number }
})// 快递信息表
const UserExpressInfoSchema = new mongoose.Schema({express_id: { type: String },express_info: { type: Array }
})const User = mongoose.model('users', UserSchema, 'users')
const Goods = mongoose.model('goods', GoodsSchema, 'goods')
const Banner = mongoose.model('banners', BannerSchema, 'banners')
const Order = mongoose.model('order', OrderSchema, 'order')
const Category = mongoose.model('category', CateSchema, 'category')
const HotGoods = mongoose.model('hotGoods', HotGoodsSchema, 'hotGoods')
const UserStars = mongoose.model('userStars', UserStarsSchema, 'userStars')
const ShopCart = mongoose.model('shopCart', shopCartSchema, 'shopCart')
const Address = mongoose.model('address', addressSchema, 'address')
const Admin = mongoose.model('admin', adminUserSchema, 'admin')
const GoodsBuyCount = mongoose.model('goodsBuyCount', goodsBuyCountSchema, 'goodsBuyCount')
const UserExpressInfo = mongoose.model("expressInfo", UserExpressInfoSchema, "expressInfo")// 插入商品数据
const insertGoods = async function () {for (let i = 0; i < goods.length; i++) {const result = await Goods.find({ goods_id: goods[i].goods_id })const res = result.toString()if (res === "") {Goods.create(goods[i])}}
}
insertGoods()// 插入各个商品被买了多少次的数据
const insertGoodsBuyCount = async function () {const data = await Goods.find()for (let i = 0; i < data.length; i++) {const result = await GoodsBuyCount.find({ goods_id: data[i].goods_id })const res = result.toString()if (res === "") {await GoodsBuyCount.create({goods_name: data[i].goods_name,goods_id: data[i].goods_id,goods_buyCount: 0})}}
}
insertGoodsBuyCount()// 插入分类数据
const insertCats = async function () {for (let i = 0; i < cats.length; i++) {const result = await Category.find({ cat_id: cats[i].cat_id })const res = result.toString()if (res === "") {Category.create(cats[i])}}}
insertCats()// 插入快递数据
const insertExpress = async () => {UserExpressInfo.create({express_id: 1,express_info: expressInfo})
}
insertExpress()// 插入轮播图数据
const insertBanners = async function () {for (let i = 0; i < banners.length; i++) {const result = await Banner.find({ id: banners[i].id })const res = result.toString()if (res === "") {Banner.create(banners[i])}}}
insertBanners()// 导出
module.exports = {User,Goods,Banner,Order,Category,HotGoods,UserStars,ShopCart,Address,Admin,GoodsBuyCount,UserExpressInfo
}

http://chatgpt.dhexx.cn/article/VNKKpI2X.shtml

相关文章

JavaWeb蛋糕商城管理系统(客户端+后台管理端)+ppt+万字论文

JavaWeb蛋糕商城管理系统(客户端+后台管理端)+ppt+万字论文

JavaWeb蛋糕商城管理系统 需要资源qq:1597720408获取 一、系统总模块 二、管理员模块流程图 三、用户登录模块 四、各功能模块 1、用户登录模块 2、用户注册模块 3、主页面模块 4、商品分类模块 5、购物车模块 6、结算模块 7、管理员登录模块 8、管理员模块主页面 9、管理员管…
阅读更多...
Java项目-宠物商城管理系统

Java项目-宠物商城管理系统

题目&#xff1a;基于JavaWeb宠物商城管理系统的设计与实现-Servlet_宠物店管理系统_jsp_petmall 注意&#xff1a;这里不是全部功能&#xff0c;需要全部功能的可以看评论联系我 1.系统总体设计 1.1开发环境 操作系统&#xff1a;Windows10&#xff1b; 编程语言&#xff1a…
阅读更多...
微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）

目录 一、商城架构图 前端&#xff1a; 二、商城管理系统前端页面 1、SPA介绍 2、webpack 四个核心概念 3、vue-cli 安装 4、项目测试 三、电商项目搭建 创建父模块管理 创建子模板注册中心ly-registry 创建modul子项目ly-gateway 创建ly-item父工程&#xff08;…
阅读更多...
计算机毕业设计java+ssm水果商城管理系统(源码+系统+mysql数据库+Lw文档）

计算机毕业设计java+ssm水果商城管理系统(源码+系统+mysql数据库+Lw文档）

项目介绍 小熊猫水果管理系统是水果商业贸易中的一条非常重要的道路&#xff0c;可以把其从传统的实体模式中解放中来&#xff0c;网上购物可以为消费者提供巨大的便利。通过小熊猫水果管理系统这个平台&#xff0c;可以使用户足不出户就可以了解现今的流行趋势和丰富的水果信…
阅读更多...
基于ThinkPHP6+Layui商城管理系统开发框架

基于ThinkPHP6+Layui商城管理系统开发框架

项目介绍 一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架&#xff0c;可用于快速搭建前后端分离后台管理系统&#xff0c;本着简化开发、提升开发效率的初衷&#xff0c;框架自研了一套个性化的组件&am…
阅读更多...
基于java springmvc+mybatis酒水商城管理系统设计和实现

基于java springmvc+mybatis酒水商城管理系统设计和实现

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java奥斯卡】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &#x1f345;文末获取源码联系&#x1f345; 临近学期结束&#xff…
阅读更多...
php简单的商城系统,DouPHP轻量级商城管理系统

php简单的商城系统,DouPHP轻量级商城管理系统

DouPHP轻量级商城管理系统&#xff0c;基于DouPHP核心开发&#xff0c;使用PHPMYSQL架构的&#xff0c;可以使用它快速搭建一个商城系统。 操作简单 后台简约明了&#xff0c;从使用者而不是开发者的角度出发设计后台功能布局&#xff0c;完全不需要使用手册就可以轻松进行日常…
阅读更多...
基于ASP.NET C#的服装商城管理系统

基于ASP.NET C#的服装商城管理系统

摘 要 本毕业设计的内容是设计并且实现一个基于net语言的服装商城管理系统。它是在Windows下&#xff0c;以SQL Server为数据库开发平台&#xff0c;服装商城管理系统的功能已基本实现&#xff0c;主要包括用户、服装信息、通知公告、留言板、订单信息等。 论文主要从系统的分…
阅读更多...
基于java+SpringBoot框架蛋糕销售商城管理系统详细设计

基于java+SpringBoot框架蛋糕销售商城管理系统详细设计

研究背景 随着计算机技术的飞速发展&#xff0c;供应商可以利用计算机技术来完成我们以前手工完成的一些工作&#xff0c;这可以大大提高工作效率&#xff0c;节省更多的人力资源。此外&#xff0c;电脑还可以对相关数据进行统计&#xff0c;帮助卖家根据销售情况制定销售策略…
阅读更多...
基于SpringBoot+VUE的服装销售商城管理系统

基于SpringBoot+VUE的服装销售商城管理系统

项目背景 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;服装销售商城当然也不能排除在外。服装销售商城是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&…
阅读更多...
基于SSM的在线商城管理系统

基于SSM的在线商城管理系统

基于SSM的在线商城管理系统 1.摘要 我国是公认的服装生产大国和出口国&#xff0c;服装市场一直在我国经济中占据重要地位&#xff0c;并且当今随着互联网技术的快速发展和各网上销售平台的成功先例&#xff0c;使得信息化管理越来越受各行各业青睐。如果服装销售平台能加强在…
阅读更多...
基于SSM的网上购物商城管理系统

基于SSM的网上购物商城管理系统

项目背景 随着科技的飞速发展&#xff0c;计算机已经广泛的应用于各行各业当中&#xff0c;而且日趋普及。在各个领域内&#xff0c;计算机的应用已经十分广泛&#xff0c;各种智能设备都与计算机紧密结合在一起&#xff0c;主要应用于两个方面&#xff1a;一是以设备为主。另…
阅读更多...
[附源码]java毕业设计商城管理系统

[附源码]java毕业设计商城管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
鲜花商城管理系统

鲜花商城管理系统

1、项目介绍 鲜花商城管理系统拥有两种角色 管理员&#xff1a;用户管理、分类管理、商品管理、添加鲜花、订单管理、留言管理、新闻管理等 用户&#xff1a;登录注册、购物车、下单、历史订单记录、分类查询商品等 2、项目技术 后端框架&#xff1a; Servlet、mvc模式 前…
阅读更多...
基于SSM的商城管理系统

基于SSM的商城管理系统

1、项目介绍 基于SSM的商城管理系统拥有两种角色&#xff0c;用户和管理员 用户&#xff1a;商品查看、购买&#xff0c;历史订单查询、购物车功能、留言 管理员&#xff1a;商品管理、分类管理、订单管理、用户管理、留言管理 2、项目技术 后端框架&#xff1a;SSM&#…
阅读更多...
基于SSM框架实现商城管理系统

基于SSM框架实现商城管理系统

介绍 基于ssm做的一个商城管理系统&#xff0c;学习完Spring&#xff0c;SpringMVC&#xff0c;MyBatis之后&#xff0c;想着敲一个小demo来巩固一些学到的知识&#xff0c;于是做一个手机展示作品&#xff08;不完整&#xff09;&#xff0c;还有一些功能待完善。 用到的技术…
阅读更多...
[附源码]计算机毕业设计springboot万佳商城管理系统

[附源码]计算机毕业设计springboot万佳商城管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
Java毕业设计-商城管理系统

Java毕业设计-商城管理系统

&#x1f525;作者主页&#xff1a;疯狂行者&#x1f525; &#x1f496;简介&#xff1a;Java领域新星创作者&#x1f3c6;、【计算机源码之家】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】&#x1f496; &#x1f496;文末获取源码联系&#x1f…
阅读更多...
基于javaweb的个人pc电脑商城系统(java+ssm+jsp+jquery+mysql)

基于javaweb的个人pc电脑商城系统(java+ssm+jsp+jquery+mysql)

基于javaweb的个人pc电脑商城系统(javassmjspjquerymysql) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计&#xff0c;大作业&#xff0c;毕业设计&#xff0c;项目练习&#xff0c;学习演示等 功能说明 基…
阅读更多...
Mall商城后台管理系统——（Vue+SSM）

Mall商城后台管理系统——（Vue+SSM）

一、项目背景 在这个互联网高速发展的时代&#xff0c;人们可以享受足不出户的购买商品&#xff0c;只要在家浏览商品下单&#xff0c;几天内就会收到心仪的商品。 Mall商城宣传片(小程序PCPC后台&#xff09; Mall商城后台(VueSSM)——可做毕业设计 二、项目介绍 Mall商城分…
阅读更多...
推荐文章

Copyright @ 2022~2023