初衷

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

文章目录

项目概述

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

# 功能、页面原型











# 开发模式

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

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

# 技术选型

前端

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

后端（<mark>Java SSM 看情况替换</mark>）

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

项目初始化

# 前端项目初始化

## vue cli 4

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

3、4 貌似没啥区别







done~

## Element UI 配置

  • vue cli 3
  • vue router 配置
  • <mark>Element-UI 配置 - 组件库</mark>
  • 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 配置 - 组件库
  • <mark>axios 配置</mark>
  • git 初始化
  • Github 托管 
npm install axios


## Github 托管

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



Github - 下载整个 - 前台项目

登录/退出功能

主页布局

用户管理模块

权限管理模块

分类管理模块

参数管理模块

商品管理模块

订单管理模块

数据统计模块

文章目录