窗帘换装小程序后台
前言
这是全栈小程序项目的二期后台前端架构，目前项目已经是三期完结，数据结构和技术架构经过大改与三期差别很大，但核心思路基本一致。已取得甲方同意作为本人独立开发项目的案例经历在互联网上进行展示，且代码可供开源。
核心架构
页面展示
登录页
核心功能：
- 账号密码登陆
- 微信扫一扫（三期）
- 手机验证码（三期）
首页
厂家管理页
核心功能：
- 管理厂家账号
二维码管理页
核心功能：
- 二维码创建：创建新的二维码，每个二维码可以配置
- 二维码密码访问
- 二维码关联产品、场景：一个二维码可以关联多套产品，关联多套场景，是一对多的关系
- 二维码解析：解析以前创建过的历史二维码
产品管理页
核心功能：
- 单个上传产品
- 批量上传产品
- 产品风格、产品类型
- 上下架功能，下架的产品不会在小程序显示
- 产品系列管理，每个产品系列彼此独立，可以关联不同产品，同一产品可以被多个系列关联，多对多关系
- 上传产品：支持单个图片，支持多个图片打包成的zip
场景管理页
核心功能：
- 场景的创建
- 场景系列的管理：场景系列与场景是多对多关系，一个场景系列可以包含多个不同的场景，同一个场景也可以被多个系列包含
- 场景上传：根据图片和数据，生成一个场景（三期不再需要数据，只要图片，数据可以通过浏览器在线生成）
- 上下架功能
项目架构
基于vue2的脚手架创建
DIR:01admin-vue-elementUI #
|-- public/ # 「public」
| |-- index.html #
| `-- favicon.ico #
|-- src/ # 「src」源码
| |-- api/ # 「api」
| | |-- services/ # 「services」通过调用utils的axios包装函数，根据接口生成的调用模块
| | | |-- user.js #
| | | |-- series.js #
| | | |-- sceneSerie.js #
| | | |-- scene.js #
| | | |-- productSerie.js #
| | | |-- index.js #
| | | `-- factory.js #
| | |-- user.js # 对service的包装函数再进一步包装，添加了一些必要的前端数据校验和错误处理
| | |-- serie.js #
| | |-- scene.js #
| | |-- product.js #
| | |-- factory.js #
| | `-- api.js #
| |-- assets/ # 「assets」静态资源文件夹
| | |-- css/ # 「css」
| | | |-- reset.stylus #
| | | |-- global.stylus #
| | | |-- dialogStyle.stylus #
| | | `-- admin.stylus #
| | |-- font/ # 「font」 iconfont 离线文件
| | | |-- icon1/ # 「icon1」
| | | |-- icon2/ # 「icon2」
| | |-- icon/ # 「icon」 iconfont 离线文件
| |-- components/ # 「components」通用组件
| | |-- dragOverlay.vue # 带遮罩的全局拖拉触发组件
| | |-- dialogUploadState.vue # 上传队列展示
| | |-- dialogTempalte.vue # 通用弹窗模板
| | |-- dialogEditSeries.vue # 编辑系列信息弹窗
| | |-- dialogCreateSeries.vue # 添加产品系列弹窗
| | |-- dialogCreateQrcode.vue # 添加二维码弹窗
| | |-- dialogCreateProduct.vue # 添加产品弹窗
| | |-- dialogCreateFactory.vue # 添加厂家天窗
| | |-- cardFactoryInfo.vue # 首页厂家卡片
| | `-- bread.vue #
| |-- plugins/ # 「plugins」
| | |-- vue-multiselect.js # vue下拉组件
| | |-- qrcode.js # 浏览器二维码解析组件
| | |-- GlobalEventer.js # 事件总线，通过vue实例实现
| | |-- element.js # 按需加载element的
| | |-- element.all.js # 全局加载的element组件文件，开发时用
| | `-- axios.js # axios请求拦截，对所有服务端的请求进行前端校验（后端也会做一次，双重校验）
| |-- router/ # 「router」
| | `-- index.js # 路由，懒加载
| |-- store/ # 「store」
| | |-- modules/ # 「modules」 vuex的所有状态
| | | |-- serie.js #
| | | |-- sceneSerie.js #
| | | |-- scene.js #
| | | |-- prodcutSerie.js #
| | | `-- factory.js #
| | `-- index.js # 二期将所有api都包装在了vuex中
| |-- utils/ # 「utils」
| | |-- request.js # 请求函数包装
| | |-- qrcode.min.js # 二维码解析
| | |-- qrcode.js # 二维码解析
| | |-- mime_type.js # mime_type文件
| | |-- jwtAuth.js # jwt包装token函数
| | |-- index.js #
| | |-- cpsImg.js # 浏览器图片解析模块，读取二进制文件头，获取图片的真实格式，上传前做格式校验
| | `-- checkBrowerVer.js # 检查浏览器版本
| |-- views/ # 「views」 页面分类
| | |-- admin/ # 「admin」 首页
| | | |-- admin.vue #
| | | `-- admin.stylus #
| | |-- factoryManager/ # 「factoryManager」 厂家管理页
| | | |-- index.vue #
| | | `-- dataTable.vue #
| | |-- layout/ # 「layout」 全局的页面架构
| | | |-- aside/ # 「aside」
| | | | |-- menuData.js #
| | | | `-- aside.vue #
| | | |-- header/ # 「header」
| | | | |-- navBarBtn.vue #
| | | | |-- loginInfo.vue #
| | | | `-- index.vue #
| | | `-- layout.vue #
| | |-- login/ # 「login」登录页
| | | |-- login.stylus #
| | | `-- index.vue #
| | |-- productManager/ # 「productManager」 产品页
| | | |-- uploadProduct.vue #
| | | |-- index.vue #
| | | |-- dialogProductSeries.vue #
| | | `-- dialogProduct.vue #
| | |-- sceneManager/ # 「sceneManager」场景页
| | | |-- index.vue #
| | | |-- dropScenes.vue #
| | | |-- dialogSceneSeries.vue #
| | | |-- dialogEditScene.vue #
| | | |-- dialogCreateScenes.vue #
| | | `-- creatScenes.vue #
| | |-- serieManager/ # 「serieManager」系列页
| | | |-- components/ # 「components」
| | | | |-- dialog/ # 「dialog」
| | | | | |-- minxins/ # 「minxins」
| | | | | | |-- upload.js #
| | | | | | |-- edit.js #
| | | | | | `-- add.js #
| | | | | `-- index.vue #
| | | | |-- tableData.vue #
| | | | `-- qrcodeDecoder.vue #
| | | |-- index_new.vue #
| | | `-- index.vue #
| | |-- uploadProduct/ # 「uploadProduct」上传弹窗，上传页
| | | `-- uploadProduct.vue #
| | `-- api.vue # 开发测试用页
| |-- main.js # 全局参数定义，vue主实例创建
| |-- App.vue # 页面根组件
| |-- .tags_sorted_by_file #
| `-- .tags #
|-- yarn.lock #
|-- vue.config.js #
|-- README.md #
|-- package.json #
|-- package-lock.json #
|-- jsconfig.json #
|-- dev.bat #
|-- build.bat #
|-- babel.config.js #
|-- .tags_sorted_by_file #
|-- .tags #
|-- .gitignore #
|-- .eslintrc.js #
`-- .browserslistrc #