vue_shop电商管理系统

前言

这两天在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
	}
}

4、运行

在后端项目的vue_api_server根目录下执行如下命令，运行后端程序

node app.js

运行截图如下所示：

前端源代码 vue-shop

见vue_shop
前端代码目前跟着B站的视频，完成了登录验证、用户管理、权限管理、商品管理、订单管理、数据统计等功能。

MySQL数据库中有一个admin账户，密码为123456，输入用户名和密码后跳转到Main后端管理页面，如下图所示：

参考资料

• Vue电商管理系统（Element-UI）
• vue_shop电商后台管理系统
• vue实战：电商后台管理系统