前言

当下根据不同的应用场景，电商系统一般都提供了PC端，移动APP，移动Web，微信等多种访问方式。如下图。不同的客户端共用同一个服务器，数据库，API。本次项目着重设计PC后台管理，供电商后台管理员管理商品，商品分类等。

电商后台管理系统功能

电商后台管理系统用于管理用户账号，商品分类，商品信息，订单，数据统计等业务功能，模块详细如下图。

电商后台管理系统的开发模式（前后端分离）

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA（Single Page Application）项目

后端：主要负责操作数据库，像前端暴露API接口

前端：负责绘制页面，运用基于Ajax技术调用后端所提供的API接口

SPA：单页面应用，它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

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

前端项目技术栈

Vue （前端渐进式JavaScript框架）
Vue-router （Vue中用于调用组件，提供俩种模式：history、hash）
Element-ui （饿了吗团队开发的ui库）
Axios （ES6中基于promise对象分装的函数，与Ajax不同的是，Ajax早期是面向MVC模型设计的，Axios则是面向当下前端主流的MVVM模型，并且它是异步请求，解决了Ajax的回调地狱问题）
Echarts （由百度公司开源的项目主要用于绘制图标，实现数据可视化）

后端项目技术栈

Node.js （JavaScript 在后端的运行环境，可以通过npm导入第三方模块，操纵数据库）
Express （Express 简而言之就是可以向前端提供接口，通过前端发送的请求，返回内容提供给前端)
Jwt (JSON Web Token 用于身份认证）
Mysql
Sequelize

前端项目初始化

安装Vue脚手架
通过Vue脚手架创建项目
配置Vue路由
配置Element-ui 组件库
配置Axios库
初始化git远程仓库
将本地项目托管到GitHub或Gitee中

总结

学累了，写点博客放松一下，接下来放一些以及做完的效果图，日后一个组件一篇文章的进行更新，巩固知识的同时，也分享给做这些项目的家人们参考参考

Vue电商后台管理系统项目开发实战（一）相关推荐

Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
Vue电商后台管理系统（1）
Vue电商后台管理系统(1) 登录在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
电商后台管理系统项目的优化
在面试过程中,面试官除了对基础知识的盘查之外,还会了解你所做的项目,单单知识谈项目所用到的技术已经满足不了面试官对我们的好奇心了,每次面试问到优化这一方面,因为没怎么准备,含糊的说辞只会让面试官连连摇 ...
Vue前后端分离的电商后台管理系统项目的概述
(1)该项目是基于前后端分离的开发模式,基于Vue技术栈的SPA单页面项目, 后端主要操作数据库并向前端暴露一些API接口前端主要负责绘制页面同时,利用Ajax调用后端提供的接口. 这样的开发模式使 ...
9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...

Vue电商后台管理系统项目开发实战（一）

前言