商业Java版 ThinkInShop

  1. 主页
  2. 文档
  3. 商业Java版 ThinkInShop
  4. 开发文档
  5. 管理后台前端开发文档

管理后台前端开发文档

​ 主要技术栈:vue、element-ui 、 elementui-admin

1、准备

版本 说明
nodejs 14+ 下载安装
vscode 最新 开发编辑器

2、项目结构介绍

LaiKeJaveAdminView
├── LICENSE
├── README-zh.md
├── README.md
├── public
│   ├── bounced
│   │   ├── Choose.html #sku选择
│   └── index.html
├── src
│   ├── App.vue
│   ├── api #
│   │   ├── Platform #平台
│   │   ├── authority #
│   │   ├── constant #常量
│   │   │   └── page.js
│   │   ├── data #
│   │   │   └── index.js
│   │   ├── export #文件导出 
│   │   ├── finance #财务管理
│   │   ├── goods   #商品管理
│   │   ├── http.js #
│   │   ├── https.js #
│   │   ├── login #登陆
│   │   ├── mall #商城
│   │   ├── members #会员管理
│   │   ├── order #订单管理
│   │   ├── plug_ins #插件管理
│   │   │   ├── coupons.js #优惠券
│   │   │   ├── stores.js #店铺
│   │   │   └── template.js #模版
│   │   ├── publics #
│   │   │   └── cascade.js
│   │   └── resources #资源管理
│   │       └── imageManage.js
│   ├── assets #静态文件
│   ├── common
│   │   ├── commonFunction 
│   │   └── commonStyle
│   │       ├── common.scss
│   │       └── form.less
│   ├── components
│   │   ├── Breadcrumb #面包屑
│   │   ├── Hamburger # 
│   │   └── SvgIcon #
│   ├── icons #
│   │   ├── index.js
│   │   ├── svg 
│   │   └── svgo.yml
│   ├── lang #国际化
│   │   ├── en.js #英文
│   │   ├── index.js
│   │   └── zh.js #中文
│   ├── layout #布局
│   │   ├── components
│   │   │   ├── AppMain.vue
│   │   │   ├── Navbar.vue
│   │   │   ├── SideBar
│   │   │   │   ├── index.vue
│   │   │   │   └── sideItem.vue
│   │   │   └── index.js
│   │   ├── index.vue
│   │   └── mixin 
│   │       └── ResizeHandler.js #
│   ├── main.js #
│   ├── mixins #
│   │   └── index.js
│   ├── packages #
│   │   ├── Button # 按钮
│   │   ├── Pagination #分页
│   │   ├── Transfer #翻译
│   │   ├── Upload #图片上传
│   │   ├── apis # 
│   │   │   ├── Base.js
│   │   │   ├── Config.js
│   │   │   └── Upload.js
│   │   ├── index.js
│   │   └── utils
│   │       └── utils.js
│   ├── permission.js #权限
│   ├── router #路由 
│   ├── settings.js #
│   ├── store #vuex
│   │   ├── getters.js
│   │   ├── index.js
│   │   └── modules
│   │       ├── app.js
│   │       ├── authorization.js
│   │       ├── lang.js
│   │       ├── orderNum.js
│   │       ├── permission.js
│   │       ├── settings.js
│   │       ├── skinPeeler.js
│   │       ├── source.js
│   │       ├── superior.js
│   │       └── user.js
│   ├── styles #样式
│   │   ├── common.scss
│   │   ├── element-ui.scss
│   │   ├── icon.scss
│   │   ├── index.scss
│   │   ├── mixin.scss
│   │   ├── sidebar.scss
│   │   ├── transition.scss
│   │   └── variables.scss
│   ├── utils #
│   │   ├── auth.js
│   │   ├── get-page-title.js
│   │   ├── index.js
│   │   ├── rem.js
│   │   ├── request.js
│   │   ├── storage.js
│   │   ├── utils.js
│   │   └── validate.js
│   ├── views
│   │   ├── 404.vue 
│   │   ├── Data #报表
│   │   │   ├── addvip-report
│   │   │   ├── goods-report
│   │   │   ├── orde-report
│   │   │   ├── vip-proportion
│   │   │   └── vipconsumption-report
│   │   ├── Demo #demo
│   │   │   ├── complex-table
│   │   │   ├── information-example
│   │   │   ├── table-example
│   │   │   ├── table-from
│   │   │   └── universal-module
│   │   ├── Platform #saas平台
│   │   │   ├── bulletin
│   │   │   ├── goodsSKU
│   │   │   ├── graphics
│   │   │   ├── logisticsCompanyManage
│   │   │   ├── merchants
│   │   │   ├── numerical
│   │   │   ├── parameter
│   │   │   ├── permissions
│   │   │   ├── reportManagement
│   │   │   └── system
│   │   ├── authority #商城权限管理
│   │   │   ├── adminLoggerManage
│   │   │   ├── adminUserManage
│   │   │   └── roleManagement
│   │   ├── dashboard #首页
│   │   ├── finance #财务管理
│   │   ├── goods #商品管理
│   │   │   ├── brandmanagement #品牌管理 
│   │   │   ├── freightmanagement #运费管理 
│   │   │   ├── goodsclassify #分类管理
│   │   │   ├── goodslist #商品列表
│   │   │   ├── inventoryManagement #运费管理 
│   │   │   ├── tag #标签管理  
│   │   │   └── taobaoAssistant #淘宝助手
│   │   ├── home #商城首页 
│   │   ├── login #登陆 
│   │   ├── mall
│   │   │   ├── aftersaleAddress #首页管理
│   │   │   ├── functionnavigation #功能导览
│   │   │   ├── payManagement #支付管理
│   │   │   ├── search #搜索配置
│   │   │   ├── sms #短信配置
│   │   │   ├── systemManagement #系统管理
│   │   │   ├── systemNotice #系统公告
│   │   │   └── terminalConfig #终端配置
│   │   ├── members #会员管理
│   │   ├── order #订单管理
│   │   │   ├── commentManage #评论管理
│   │   │   ├── orderList #订单列表
│   │   │   ├── orderSet #订单设置
│   │   │   ├── orderSettlement #订单结算
│   │   │   └── salesReturn #售后
│   │   ├── permission #权限
│   │   ├── plug_ins #插件管理
│   │   │   ├── coupons #优惠券
│   │   │   ├── distribution #分销
│   │   │   ├── stores #店铺
│   │   │   └── template #模版
│   │   ├── print #打印
│   │   └── resources #资源管理
│   │       └── imageList
│   └── webManage #js和css 分离文件夹
│       ├── css
│       │   ├── authority
│       │   │   └── roleManagement
│       │   ├── data
│       │   │   ├── addvip-report
│       │   │   ├── goods-report
│       │   │   ├── orde-report
│       │   │   └── vipconsumption-report
│       │   ├── finance
│       │   │   └── withdrawalManage
│       │   ├── goods
│       │   │   ├── goodslist
│       │   │   ├── inventoryManagement
│       │   │   ├── tag
│       │   │   └── taobaoAssistant
│       │   ├── home
│       │   ├── mall
│       │   │   ├── aftersaleAddress
│       │   │   ├── functionnavigation
│       │   │   ├── payManagement
│       │   │   ├── search
│       │   │   ├── sms
│       │   │   ├── systemManagement
│       │   │   ├── systemNotice
│       │   │   └── terminalConfig
│       │   ├── members
│       │   │   ├── addMembers
│       │   │   └── membersList
│       │   ├── order
│       │   │   ├── commentManage
│       │   │   ├── orderList
│       │   │   ├── orderSet
│       │   │   ├── orderSettlement
│       │   │   └── salesReturn
│       │   ├── platform
│       │   │   ├── logisticsCompanyManage
│       │   │   ├── reportManagement
│       │   │   └── system
│       │   └── plug_ins
│       │       ├── coupons
│       │       ├── distribution
│       │       ├── stores
│       │       └── template
│       └── js
│           ├── authority
│           │   ├── adminLoggerManage
│           │   ├── adminUserManage
│           │   └── roleManagement
│           ├── data
│           │   ├── addvip-report
│           │   ├── goods-report
│           │   ├── orde-report
│           │   ├── vip-proportion
│           │   └── vipconsumption-report
│           ├── finance
│           │   └── withdrawalManage
│           ├── goods
│           │   ├── goodslist
│           │   ├── inventoryManagement
│           │   ├── tag
│           │   └── taobaoAssistant
│           ├── home
│           │   └── homeReport.js
│           ├── mall
│           │   ├── aftersaleAddress
│           │   ├── functionnavigation
│           │   ├── payManagement
│           │   ├── search
│           │   ├── sms
│           │   ├── systemManagement
│           │   ├── systemNotice
│           │   └── terminalConfig
│           ├── members
│           │   ├── addMembers
│           │   ├── membersLevel
│           │   ├── membersList
│           │   └── membersSet
│           ├── order
│           │   ├── commentManage
│           │   ├── orderList
│           │   ├── orderSet
│           │   ├── orderSettlement
│           │   └── salesReturn
│           ├── platform
│           │   ├── logisticsCompanyManage
│           │   ├── reportManagement
│           │   └── system
│           ├── plug_ins
│           │   ├── coupons
│           │   ├── distribution
│           │   ├── stores
│           │   └── template
│           └── resources
├── theme #主题
└── vue.config.js

3、配置文件

LaiKeJaveAdminView
├── .env.production #生产环境
└── .env.development #测试环境

本地测试修改 .env.development

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

# 线上网关地址
APP_VUE_API_URI='https://java.houjiemeishi.com/gw'

生产环境修改 .env.production

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''

# 网关地址 网关默认访问地址为 
# https://java.houjiemeishi.com/gw 建议默认映射为gw 
# 若非gw 则需要修改
APP_VUE_API_URI='https://java.houjiemeishi.com/gw'

4、运行/打包

#安装环境
npm install
#测试运行
npm run dev
#打包
npm run build:prod

5、部署在非主域名根目录修改配置文件 LaiKeJaveView/vue.config.js

/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/目录文件名/',
outputDir: 'dist',
assetsDir: 'static',