vue_shop电商管理系统

最新推荐文章于 2024-09-24 08:59:24 发布

雪域迷影

最新推荐文章于 2024-09-24 08:59:24 发布

阅读量4.2k

点赞数 1

分类专栏： SpringBoot和VueJs学习编程语言学习

本文链接：https://blog.csdn.net/ccf19881030/article/details/105026969

版权

编程语言学习同时被 2 个专栏收录

207 篇文章 4 订阅

订阅专栏

SpringBoot和VueJs学习

28 篇文章 3 订阅

订阅专栏

前言

这两天在B站上看到一个黑马的Vue实战项目：电商管理系统（Element-UI），包括前后端源代码，前端采用Vue、Vue-router、Element-UI、Axios、Echarts技术栈，后端采用Node.js、Express、Jwt、Mysql、Sequelize技术栈。其B站视频地址是：
https://www.bilibili.com/video/av74592164，具体的前后端源代码可以参考我的Github仓库https://github.com/ccf19881030/vue_shop，对应的码云地址为：https://gitee.com/havealex/vue_shop

git clone https://github.com/ccf19881030/vue_shop.git

或者

git clone https://gitee.com/havealex/vue_shop

下载对应的源代码，里面包含项目的前端和后台，后端源代码vue_api_server是完整的，前端代码vue_shop完成了登录验证、用户管理、权限管理、商品管理、订单管理、数据统计等功能。

电商后台管理系统的技术选型

1、前端项目技术栈
Vue
Vue-router
Element-UI
Axios
Echarts
2、后端项目技术栈
Node.js
Express
Jwt 状态保持工具，模拟Seession登录记录功能
Mysql
Sequelize 操作数据库的框架

vue-shop的黑马视频源代码，包括前后端，后端的源代码是全的；前端目前已经完成登录、用户管理、权限管理功能，还在完善中。为了方便，我把前端和后端的源代码托管到Github仓库，感兴趣的话可以上我的Github项目vue_shop看一下，记得帮忙star一下哦。

前端视频地址

本代码来源B站，地址为：Vue实战项目：电商管理系统（Element-UI）, UP主的视频通俗易懂，很适合前端小白观看和学习。

后端源代码 vue_api_server

见vue_api_server

项目整体文件说明

config 配置文件目录
- default.json 默认配置文件（其中包含数据库配置，jwt配置）
dao 数据访问层，存放对数据库的增删改查操作
- DAO.js 提供的公共访问数据库的方法
models 存放具体数据库 ORM 模型文件
modules 当前项目模块
- authorization.js API权限验证模块
- database.js 数据库模块（数据库加载基于 nodejs-orm2 库加载）
- passport.js 基于 passport 模块的登录搭建
- resextra.js API 统一返回结果接口
node_modules 项目依赖的第三方模块
routes 统一路由
- api 提供 api 接口
- mapp 提供移动APP界面
- mweb 提供移动web站点
services 服务层，业务逻辑代码在这一层编写，通过不同的接口获取的数据转换成统一的前端所需要的数据
app.js 主项目入口文件
package.json 项目配置文件

安装运行说明

1、安装依赖

在项目根目录vue_api_server下安装相关依赖包

npm install

或者使用淘宝的cnpm

cnpm install

安装好依赖后，会在根目录下生成node_modules目录，里面就是npm install安装的依赖库

2、导入数据库脚本到MySQL中

使用Navicat Premium等MySQL客户端，将vue_api_server/db目录下的mydb.sql数据库脚本文件导入到MySQL数据库中；也可以直接使用MySQL命令行导入数据库脚本，前提是在本地或者云服务器上安装了MySQL数据库软件。

3、配置MySQL数据库

修改vue_api_server/config目录下的default.json的MySQL数据库的配置为你自己项目的配置，包括服务端的IP和端口等也可以根据需要进行修改。

{
	"config_name" : "develop",
	"jwt_config" : {
		"secretKey":"itcast",
		"expiresIn":86400
	},
	"upload_config":{
		"baseURL":"http://127.0.0.1:8888",
		"upload_ueditor":"uploads/ueditor",
		"simple_upload_redirect":"http://127.0.0.1/reload"
	},
	"db_config" : {
		"protocol" : "mysql",
		"host" : "127.0.0.1",
		"database" : "mydb",
		"user" : "root",
		"password" : "1030",
		"port" : 3306
	}
}