wms client

前言

此项目出发点用于朋友实际库存管理的需求定制的，对于我本人，同时也是作为Vue2的首个练手项目，更好实践前端开发的工程化。

也是因为此项目基于真实需求定制的，所以此项目也对应着一个后端项目（下面会放项目传送门），也是我个人完成的，后端项目基于Node的Express框架搭建，数据库使用的Mysql。对于只学习此前端项目的伙伴，项目默认采用的是远程后端服务器，接口文档传送门放在了下面(基于ApiFox的在线文档)。对于想使用本地后端服务的伙伴，可以参考后端项目。

此项目主要使用Vue、Vuex、Vue-router全家桶，UI使用的Element-Ui，构建工具使用的是Vue-cli。当然也有基于webpack构建的工程，想了解可以切换到Webpack分支，具体里面的配置，请看Webpack分支下的README

此项目会长期维护，如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR ?。

PS:远程服务器只是提供测试，后端没有做太多的限制过滤校检的，大家轻点玩，服务器玩崩了，我又要手动重启，很麻烦啦~

?传送门

• 项目在线演示地址 ? 使劲点我 (默认账号密码root,root，域名再备案中，ip访问有点满，做了懒加载，会很慢~)

• 项目提供远程接口文档地址 ? 使劲点我

• 配套的后端项目地址 ? 使劲点我

?技术栈

技术	说明	版本	官网
Vue	渐进式 JavaScript 框架		?https://vuejs.org/
Vue-router	路由管理		?https://router.vuejs.org/
Vuex	全局状态管理		?https://vuex.vuejs.org/
Element-Ui	UI框架		?https://element.eleme.io
Axios	基于 promise 的网络请求库		?https://www.axios-http.cn/
ECharts	可视化图表库		?https://echarts.apache.org/
Less	向后兼容的 CSS 扩展语言		?https://less.bootcss.com/

开发环境:Windows、Node(v16.18.0)、Npm(v8.19.2)

?功能介绍

技术功能

• ✅路由懒加载
• ✅权限控制(Token)
• ✅数据可视化展示
• ✅基于Axios请求、响应拦截控制、统一管理请求
• ✅基于Vuex统一管理可复用、复杂的的状态数据
• ✅包屑、组件缓存、全局记录缓存
• 依赖用户权限动态生成路由、导航栏
• 响应式布局
• ✅打包优化（提供webpack分支）
• 未完待续..

业务功能

• 数据可视化

  • ✅基本信息概述
  • ✅库存类别分析
  • ✅销售额、成本、利润统计
  • ✅完成订单统计

• 入库

  • ✅添加入库
  • ✅入库记录条件查询

• 出库

  • ✅添加出库
  • ✅出库记录条件查询
  • ✅变更出库状态

• 客户管理

  • ✅添加客户
  • ✅编辑客户

• 用户管理

  • 权限控制
  • 信息修改

运行项目

1️⃣拉取项目文件

git clone https://github.com/Hyrmm/wms-client

2️⃣切换到项目目录

cd wms-client

3️⃣安装依赖包

npm install

4️⃣运行项目

• 使用远程在线后端服务接口

  npm run serve

• 使用本地后端服务接口,需要配合后端项目传送门

  npm run local

?商家秀

项目结构

├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   │   ├── AgentFail
│   │   ├── Breadcrumb
│   │   ├── PagiNation
│   │   ├── TableFilter
│   │   └── ViewFilter
│   ├── main.js
│   ├── mixin
│   ├── pages
│   │   ├── home
│   │   └── login
│   ├── router
│   ├── store
│   ├── utils
│   └── view
│       ├── Client
│       │   ├── Add
│       │   ├── Modify
│       │   └── index.vue
│       ├── Setting
│       ├── Store
│       ├── StoreIn
│       │   ├── Add
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│       │   ├── Order.vue
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│           ├── Order.vue
│           ├── Sales.vue
│           ├── Store.vue
│           └── index.vue
├── jsconfig.json
├── package-lock.json
├── package.json