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电商管理系统_第1张图片

vue_shop电商管理系统_第2张图片

前端源代码 vue-shop

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

MySQL数据库中有一个admin账户,密码为123456,输入用户名和密码后跳转到Main后端管理页面,如下图所示:
vue_shop电商管理系统_第4张图片

参考资料

  • Vue电商管理系统(Element-UI)
  • vue_shop电商后台管理系统
  • vue实战:电商后台管理系统

你可能感兴趣的:(编程语言学习)