首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue_shop电商管理系统

vue_shop电商管理系统

作者头像
ccf19881030
发布2020-03-23 17:35:42
2.8K0
发布2020-03-23 17:35:42
举报
文章被收录于专栏:ccf19881030的博客ccf19881030的博客

前言

这两天在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仓库vue_shop

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

下载源代码,里面包含项目的前端和后台,后端源代码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_api_server运行截图1
vue_api_server运行截图1
vue_api_server运行截图2
vue_api_server运行截图2

前端源代码 vue-shop

vue_shop 前端代码目前跟着B站的视频,完成了登录验证、用户管理、权限管理功能。

前端登录界面
前端登录界面

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

Main后端管理页面
Main后端管理页面

参考资料

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-03-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 电商后台管理系统的技术选型
    • 前端视频地址
    • 后端源代码 vue_api_server
      • 项目整体文件说明
        • 安装运行说明
          • 1、安装依赖
          • 2、导入数据库脚本到MySQL中
          • 3、配置MySQL数据库
          • 4、运行
      • 前端源代码 vue-shop
      • 参考资料
      相关产品与服务
      云数据库 SQL Server
      腾讯云数据库 SQL Server (TencentDB for SQL Server)是业界最常用的商用数据库之一,对基于 Windows 架构的应用程序具有完美的支持。TencentDB for SQL Server 拥有微软正版授权,可持续为用户提供最新的功能,避免未授权使用软件的风险。具有即开即用、稳定可靠、安全运行、弹性扩缩等特点。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档