首页 > 编程语言 >基于Nodejs+vue的商城系统的设计与实现

基于Nodejs+vue的商城系统的设计与实现

时间:2024-10-21 16:48:03浏览次数:7  
标签:COMMENT 11 vue Nodejs -- client 12 NULL 商城

文章目录


前言

文章底部名片,获取项目的完整演示视频,免费解答技术疑问

项目介绍

  随着科学技术水平的逐年发展,企业和高校对信息化建设提出了新的规范要求和建设标准,如何有效的利用信息化建设改善自身对于现代化的高校以及企业来讲极为重要。在信息管理活动中,主要分为信息数据的存储,信息数据的相互交换以及信息系统的开发。只有当信息经过一定的处理后,才能为社会提供更好更有效的财富。所以本人开发的商城系统就是通过将商品信息、论坛进行一定的处理后,让用户及时了解和查询相关的信息,从而为用户提供更好的交互服务环境,让系统更加智能化。
此商城系统主要包括了前端Vue框架,后端Express框架技术的开发,数据库的建立和后台管理员的管理,并且采用Nodejs语言进行开发,使用MYSQL数据库存储相关的数据。从而实现了商城管理的相关功能,包含用户注册、登陆,查看商品信息、公告信息等信息,商家注册、登录,添加商品信息,对商品进行发货,管理员的管理,用户、商家、商品种类、商品信息、论坛、系统和订单等功能,其操作简单,界面友好,运行比较稳定,于是适用于大部分用户。

技术介绍

开发语言:nodejs
框架:Express
数据库:mysql 5.7(一定要5.7版本)
数据库工具:Navicat11
开发软件:VS code/HBuilder X
浏览器:谷歌浏览器

功能介绍

本系统分别是管理员管理模块和商家、用户管理模块,对每个模块的功能进行设计,并确立了每个模块的相应的具体功能。根据数据库的设计和实现和系统需求以及功能分析进行系统概要设计。
用户管理模块的实现,能够完成用户的登录注册,购买商品,修改个人信息。商家管理模块的实现,能够完成商家的登录注册,添加商品、发货,修改个人信息。管理员管理模块的实现,能够完成商品信息等功能。功能结构图,如图4.1所示。
在这里插入图片描述

图4.1 功能结构图

核心代码

import { Sequelize, DataTypes } from 'sequelize'
import moment from 'moment'
import sequelize from './sequelize'

const UsersModel = sequelize.define('UsersModel', {
	id: {
		type: DataTypes.BIGINT,
		primaryKey: true,
		autoIncrement: true,
		allowNull: false,
		comment: '主键id'
	},
	username: {
		type: DataTypes.STRING,
		allowNull: false,
		comment: '用户名'
	},
	password: {
		type: DataTypes.STRING,
		allowNull: false,
		comment: '用户密码'
	},
	role: {
		type: DataTypes.STRING,
		allowNull: true,
		comment: '用户角色'
	},
	image: {
		type: DataTypes.STRING,
		allowNull: true,
		comment: '头像'
	},
	addtime: {
  		type: DataTypes.DATE,
  		defaultValue: DataTypes.NOW,
    	allowNull: false,
    	get() {
            return moment(this.getDataValue('addtime')).format('YYYY-MM-DD HH:mm:ss')
        },
		comment: '添加时间'
	}
}, {
	timestamps: false,
	freezeTableName: true,
	tableName: 'users'
})

export default UsersModel


数据库参考


--
-- Current Database: `nodejs43cdxd3n`
--

/*!40000 DROP DATABASE IF EXISTS `nodejs43cdxd3n`*/;

CREATE DATABASE /*!32312 IF NOT EXISTS*/ `nodejs43cdxd3n` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;

USE `nodejs43cdxd3n`;

--
-- Table structure for table `address`
--

DROP TABLE IF EXISTS `address`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `address` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `userid` bigint(20) NOT NULL COMMENT '用户id',
  `address` varchar(200) NOT NULL COMMENT '地址',
  `name` varchar(200) NOT NULL COMMENT '收货人',
  `phone` varchar(200) NOT NULL COMMENT '电话',
  `isdefault` varchar(200) NOT NULL COMMENT '是否默认地址[是/否]',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COMMENT='地址';
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `address`
--

LOCK TABLES `address` WRITE;
/*!40000 ALTER TABLE `address` DISABLE KEYS */;
INSERT INTO `address` VALUES (1,'2023-12-06 11:57:00',11,'宇宙银河系金星1号','金某','13823888881','是'),(2,'2023-12-06 11:57:00',12,'宇宙银河系木星1号','木某','13823888882','是'),(3,'2023-12-06 11:57:00',13,'宇宙银河系水星1号','水某','13823888883','是'),(4,'2023-12-06 11:57:00',14,'宇宙银河系火星1号','火某','13823888884','是'),(5,'2023-12-06 11:57:00',15,'宇宙银河系土星1号','土某','13823888885','是'),(6,'2023-12-06 11:57:00',16,'宇宙银河系月球1号','月某','13823888886','是'),(7,'2023-12-06 11:57:00',17,'宇宙银河系黑洞1号','黑某','13823888887','是'),(8,'2023-12-06 11:57:00',18,'宇宙银河系地球1号','地某','13823888888','是'),(9,'2023-12-06 12:15:31',19,'广东省梅州市梅江区富奇路-金碧华府','11','15615615623','是'),(10,'2023-12-06 12:16:40',20,'广东省梅州市梅江区百花路-百花洲路28号一排连金南路1号楼','22','15615615617','是'),(11,'2023-12-06 12:45:39',23,'江苏省镇江市句容市','11','15615615623','是'),(12,'2023-12-06 12:54:32',24,'江西省赣州市上犹县','66','18918918978','是');
/*!40000 ALTER TABLE `address` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `cart`
--

DROP TABLE IF EXISTS `cart`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `cart` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `tablename` varchar(200) DEFAULT 'shangpinxinxi' COMMENT '商品表名',
  `userid` bigint(20) NOT NULL COMMENT '用户id',
  `goodid` bigint(20) NOT NULL COMMENT '商品id',
  `goodname` varchar(200) DEFAULT NULL COMMENT '商品名称',
  `picture` longtext COMMENT '图片',
  `buynumber` int(11) NOT NULL COMMENT '购买数量',
  `price` double DEFAULT NULL COMMENT '单价',
  `shangjiahao` varchar(200) DEFAULT NULL COMMENT '商户名称',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='购物车表';
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `cart`
--

LOCK TABLES `cart` WRITE;
/*!40000 ALTER TABLE `cart` DISABLE KEYS */;
/*!40000 ALTER TABLE `cart` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `chat`
--

DROP TABLE IF EXISTS `chat`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `chat` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `userid` bigint(20) NOT NULL COMMENT '用户id',
  `adminid` bigint(20) DEFAULT NULL COMMENT '管理员id',
  `ask` longtext COMMENT '提问',
  `reply` longtext COMMENT '回复',
  `isreply` int(11) DEFAULT NULL COMMENT '是否回复',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=61 DEFAULT CHARSET=utf8 COMMENT='在线客服';
/*!40101 SET character_set_client = @saved_cs_client */;



系统效果图

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

标签:COMMENT,11,vue,Nodejs,--,client,12,NULL,商城
From: https://blog.csdn.net/QQ2083558048/article/details/143117004

相关文章

  • springboot+vue宝成社区志愿者服务管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着社会经济的快速发展和人民生活水平的不断提高,社区作为城市的基本单元,其治理水平和服务质量日益成为衡量城市文明程度的重要标志。宝成社区作为众多社区中的一员,面临着居民需求多样化、社区事务繁杂化的挑战。为了有效提升社区服务......
  • Vue3 + TypeScript:从环境搭建到组件通信的完整前端开发教程
    在前端开发领域,Vue3与TypeScript的组合备受青睐。Vue3带来高效灵活的开发体验,TypeScript则提供强大的类型安全和可维护性。本文将详细介绍如何使用Vue3和TypeScript进行开发,文章内容将按照以下顺序展开:一、环境准备1.安装Node.js:从Node.js官方网站下载并安装适合......
  • java+vue计算机毕设二手交易平台【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着经济的快速发展和人们生活水平的提高,商品更新换代的速度日益加快,大量闲置物品应运而生。这些物品对于持有者而言可能已失去使用价值,但对于其他人......
  • [java毕业设计]免费分享一套SpringBoot+Vue大学生(校园)志愿者管理系统【论文+源码+SQ
    大家好,我是java1234_小锋老师,看到一个不错的SpringBoot+Vue大学生(校园)志愿者管理系统,分享下哈。项目视频演示【免费】SpringBoot+Vue大学生(校园)志愿者管理系统Java毕业设计_哔哩哔哩_bilibili项目介绍随着信息化时代的到来,管理系统都趋向于智能化、系统化,校园志愿者......
  • Vue学习之路10----生命周期
    (以下图片来自官网)<template><div>{{num}}</div><button@click="num++">add</button></template><scriptsetupname="App">import{ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBefore......
  • java+vue计算机毕设高龄老人服务管理系统【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着社会老龄化的不断加剧,高龄老人群体的生活照护与服务管理成为了一个亟待解决的社会问题。随着医疗技术的进步和生活水平的提高,老年人的寿命不断延......
  • Vue3动态填充Echars5数据(柱形图为例)
    1.Echars的安装Vue3项目终端输入命令npminstallecharts2.在vue项目中引入3.echars三步走96行获取实例97~125行样式设置及数据(那么需要动态的获取api接口请求来的数据而不是写死的数据,这里再116行进行设置)126行设置数据注:该方法需要在onMounted()方法中挂载5......
  • java+vue计算机毕设废品上门回收预约系统【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着社会经济的快速发展和人民生活水平的不断提高,各类废品的产生量也在急剧增加。传统的废品回收方式往往依赖于街头巷尾的废品收购站或回收人员,这种......
  • java+vue计算机毕设非遗优品交易系统的设计与实现【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在全球化与现代化的浪潮中,非物质文化遗产(简称“非遗”)作为民族文化的瑰宝,承载着丰富的历史记忆与独特的文化价值。然而,随着时代的变迁,许多非遗项目面......
  • java+vue计算机毕设电影推荐系统【开题+程序+论文+源码】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网娱乐产业的蓬勃兴起,电影作为一种重要的文化娱乐形式,已经深入人们的日常生活。近年来,电影市场的规模不断扩大,电影数量......