wms client

Preface

The starting point of this project is to customize the actual inventory management needs of friends. For me, it is also the first practice project for Vue2 to better practice the engineering of front-end development.

It is also because this project is customized based on real needs, so this project also corresponds to a back-end project (the project portal will be listed below), which was also completed by me personally. The back-end project is built based on Node 's Express framework, and the database uses Mysql . For those who only study this front-end project, the project uses a remote back-end server by default, and the interface document portal is placed below (based on ApiFox's online documentation). For partners who want to use local backend services, you can refer to the backend project.

This project mainly uses Vue , Vuex , and Vue-router family buckets. The UI uses Element-Ui , and the build tool uses Vue-cli . Of course, there are also projects built based on webpack. If you want to know more, you can switch to Webpack branch. For the specific configuration, please see README under Webpack branch.

This project will be maintained for a long time. If you have any questions, please raise them directly in Issues. If you find a problem and have a good solution, PR is welcome.

PS: The remote server only provides testing, and the backend does not do too many restrictions, filtering and checking. Everyone plays lightly, but the server crashes and I have to restart it manually. It is very troublesome~

?Portal

• Project online demonstration address? Click me hard (the default account password is root, root, the domain name is being re-registered, the IP access is a bit full, and lazy loading will be very slow~)

• The project provides the remote interface document address? Click me hard

• Matching backend project address? Click me hard

?Technology stack

technology	illustrate	Version	Official website
Vue	Progressive JavaScript framework		?https://vuejs.org/
Vue-router	Route management		?https://router.vuejs.org/
Vuex	Global state management		?https://vuex.vuejs.org/
Element-Ui	UI framework		?https://element.eleme.io
Axios	Promise-based network request library		?https://www.axios-http.cn/
ECharts	Visual chart library		?https://echarts.apache.org/
Less	Backward-compatible CSS extension language		?https://less.bootcss.com/

Development environment: Windows, Node(v16.18.0), Npm(v8.19.2)

?Function introduction

Technical functions

• ✅Lazy loading of routes
• ✅Permission control (Token)
• ✅Data visualization display
• ✅Based on Axios request, response interception control and unified management of requests
• ✅Unified management of reusable and complex status data based on Vuex
• ✅Bagcrumbs, component cache, global record cache
• Dynamically generate routes and navigation bars depending on user permissions
• Responsive layout
• ✅Packaging optimization (webpack branch provided)
• To be continued...

business function

• data visualization

  • ✅Basic information overview
  • ✅Inventory category analysis
  • ✅Sales, costs, and profit statistics
  • ✅ Complete order statistics

• Warehouse

  • ✅Add to inventory
  • ✅Inquiry on storage record conditions

• out of warehouse

  • ✅Add outbound library
  • ✅Query on delivery record conditions
  • ✅Change delivery status

• Customer management

  • ✅Add customer
  • ✅Edit customer

• User management

  • Permission control
  • Information modification

Run the project

1️⃣Pull project files

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

2️⃣Switch to the project directory

cd wms-client

3️⃣Install dependency packages

npm install

4️⃣Run the project

• Use the remote online backend service interface

  npm run serve

• To use the local backend service interface, you need to cooperate with the backend project portal

  npm run local

?Business show

Project structure

 ├── 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