实战项目：电商管理系统（Element-UI）Vue前端

• 实战项目：电商管理系统（SpringBoot）Java后端

• Github：后端项目

• Github：前台项目

• 视频： https://www.bilibili.com/video/av90846070?p=1

初衷

• 能够用 Vue 技术栈及第三方组件进行项目开发
• 体验和深入理解前后端分离的开发模式

项目概述

根据不同的应用场景，电商系统一般都提供了 PC 端、移动 APP、 移动 Web 、微信小程序等多种终端访问方式。

# 功能、页面原型

# 开发模式

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

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

# 技术选型

前端

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

后端（Java SSM 看情况替换）

• Node.js
• JDk8
• Express
• JWT（状态保持工具）
• Spring + SpringMVC + MyBatis Plus
• MqSQL
• Sequelize （操作数据库框架）

项目初始化

# 前端项目初始化

## vue cli 4

• vue cli 4
• vue router 配置
• Element-UI 配置 - 组件库
• axios 配置
• git 初始化
• Github 托管

3、4 貌似没啥区别

done~

## Element UI 配置

• vue cli 3
• vue router 配置
• Element-UI 配置 - 组件库
• axios 配置
• git 初始化
• Github 托管

element UI - 官网

npm i element-ui -S

### 按需引入

element UI 官方教程 - https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru

修改 babel 配置文件

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

使用 element UI 组件

## axios 配置

• vue cli 3
• vue router 配置
• Element-UI 配置 - 组件库
• axios 配置
• git 初始化
• Github 托管

npm install axios

## Github 托管

• vue cli 3
• vue router 配置
• Element-UI 配置 - 组件库
• axios 配置
• git 初始化
• Github 托管

Github - 下载整个 - 前台项目

登录/退出功能

主页布局

用户管理模块

权限管理模块

分类管理模块

参数管理模块

商品管理模块

订单管理模块

数据统计模块