mall-admin-web：电商后台管理系统前端项目

【Github】项目名：mall – admin – web：电商后台管理系统前端项目

项目简介

mall – admin – web是一个电商后台管理系统的前端项目，基于Vue+Element实现。这个项目包含了诸多功能，例如商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理以及设置等功能。项目的在线演示地址为https://www.macrozheng.com/admin/，并且它是前后端分离项目的前端部分，后端项目为mall。

技术选型

在技术方面，采用了多种框架和工具。前端框架为Vue（https://vuejs.org/），路由框架是Vue – router（https://router.vuejs.org/），全局状态管理框架为Vuex（https://vuex.vuejs.org/），前端UI框架使用Element（https://element.eleme.io/），前端HTTP框架为Axios（https://github.com/axios/axios），基于Echarts的图表框架v – charts（https://v – charts.js.org/），cookie管理工具Js – cookie（https://github.com/js – cookie/js – cookie）以及进度条控件nprogress（https://github.com/rstacruz/nprogress），项目脚手架参考vue – element – admin（https://github.com/PanJiaChen/vue – element – admin）。

项目布局

项目的src为源码目录，其下包含多个子目录，如api（axios网络请求定义）、assets（静态图片资源文件）、components（通用组件封装）、icons（svg矢量图片文件）、router（vue – router路由配置）、store（vuex的状态管理）、styles（全局css样式）、utils（工具类）以及views（前端页面，其中又包含home（首页）、layout（通用页面加载框架）、login（登录页）、oms（订单模块页面）、pms（商品模块页面）、sms（营销模块页面）等）。

搭建步骤

1. 下载node并安装：https://nodejs.org/dist/v12.14.0/node – v12.14.0 – x64.msi。
2. 因为该项目为前后端分离项目，若访问本地接口需搭建后台环境（参考后端项目传送门），若访问在线接口无需搭建后台环境，只需将config/dev.env.js文件中的BASE_API改为https://admin – api.macrozheng.com即可；若对接的是mall – swarm微服务后台，所有接口都需要通过网关访问，需要将config/dev.env.js文件中的BASE_API改为http://localhost:8201/mall – admin。
3. 克隆源代码到本地，使用IDEA打开，并完成编译。
4. 在IDEA命令行中运行命令：npm install，下载相关依赖。
5. 在IDEA命令行中运行命令：npm run dev，运行项目。
6. 访问地址：http://localhost:8090即可打开后台管理系统页面。具体部署过程请参考：mall前端项目的安装与部署，前端自动化部署请参考：使用Jenkins一键打包部署前端应用。

项目总结

mall – admin – web作为电商后台管理系统的前端项目，功能丰富，技术选型多样，搭建步骤也较为明确。希望大家对这个项目有更多的了解和探索，如果有任何想法或者问题，欢迎大家在下方留言讨论。

项目地址

GitHub链接直达