Hyrmm/wms-client

🚩前言

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

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

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

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

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

🚪传送门

项目在线演示地址::link:使劲点我 (默认账号密码root,root，域名再备案中，ip访问有点满，做了懒加载，会很慢~)
项目提供远程接口文档地址::link:使劲点我
配套的后端项目地址: 🔗使劲点我

📐技术栈

技术	说明	官网
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

Hyrmm / wms-client

🚩前言