wms client

Prefácio

O ponto de partida deste projeto é personalizar as necessidades reais de gerenciamento de estoque dos amigos. Para mim, é também o primeiro projeto prático do Vue2 para praticar melhor a engenharia de desenvolvimento front-end.

É também porque este projeto é customizado com base nas necessidades reais, portanto este projeto também corresponde a um projeto back-end (o portal do projeto será listado abaixo), que também foi concluído por mim pessoalmente. no framework Express do Node , e o banco de dados usa Mysql . Para quem estuda apenas este projeto front-end, o projeto usa um servidor back-end remoto por padrão, e o portal de documentos da interface está colocado abaixo (com base na documentação online do ApiFox). Para parceiros que desejam usar serviços de back-end locais, você pode consultar o projeto de back-end.

Este projeto usa principalmente buckets da família Vue , Vuex e Vue-router . A IU usa Element-Ui e a ferramenta de construção usa Vue-cli . Claro, também existem projetos construídos com base no webpack. Se você quiser saber mais, pode mudar para Webpack . Para a configuração específica, consulte README no branch Webpack .

Este projeto será mantido por um longo tempo. Se você tiver alguma dúvida, coloque-a diretamente em Questões. Se você encontrar um problema e tiver uma boa solução, o PR é bem-vindo.

PS: O servidor remoto fornece apenas testes, e o backend não faz muitas restrições, filtrando e verificando. Todo mundo joga levemente, mas o servidor trava e tenho que reiniciá-lo manualmente ~.

?Portal

• Endereço de demonstração on-line do projeto? Clique com força (a senha da conta padrão é root, root, o nome de domínio está sendo registrado novamente, o acesso IP está um pouco cheio e o carregamento lento será muito lento ~)

• O projeto fornece o endereço do documento da interface remota. Clique em mim com força?

• Endereço do projeto de back-end correspondente? Clique em mim com força?

?Pilha de tecnologia

tecnologia	ilustrar	Versão	Site oficial
Vista	Estrutura JavaScript progressiva		?https://vuejs.org/
Roteador Vue	Gerenciamento de rotas		?https://router.vuejs.org/
Vuex	Gestão global do estado		?https://vuex.vuejs.org/
Elemento-Ui	Estrutura de IU		?https://element.eleme.io
Eixos	Biblioteca de solicitação de rede baseada em promessa		?https://www.axios-http.cn/
Gráficos eletrônicos	Biblioteca de gráficos visuais		?https://echarts.apache.org/
Menos	Linguagem de extensão CSS compatível com versões anteriores		?https://less.bootcss.com/

Ambiente de desenvolvimento: Windows, Node(v16.18.0), Npm(v8.19.2)

?Introdução da função

Funções técnicas

• ✅Carregamento lento de rotas
• ✅Controle de permissão (Token)
• ✅Exibição de visualização de dados
• ✅Com base na solicitação Axios, controle de interceptação de resposta e gerenciamento unificado de solicitações
• ✅Gerenciamento unificado de dados de status complexos e reutilizáveis ​​com base em Vuex
• ✅Bagcrumbs, cache de componentes, cache de registro global
• Gere rotas e barras de navegação dinamicamente dependendo das permissões do usuário
• Layout responsivo
• ✅Otimização de embalagens (ramificação webpack fornecida)
• Continua...

função empresarial

• visualização de dados

  • ✅Visão geral das informações básicas
  • ✅Análise de categoria de inventário
  • ✅Estatísticas de vendas, custos e lucros
  • ✅ Estatísticas completas de pedidos

• Armazém

  • ✅Adicionar ao inventário
  • ✅Consulta sobre condições de registro de armazenamento

• fora do armazém

  • ✅Adicionar biblioteca de saída
  • ✅Consulta sobre condições de registro de entrega
  • ✅Alterar status de entrega

• Gestão de clientes

  • ✅Adicionar cliente
  • ✅Editar cliente

• Gerenciamento de usuários

  • Controle de permissão
  • Modificação de informações

Execute o projeto

1️⃣ Extraia os arquivos do projeto

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

2️⃣Mude para o diretório do projeto

cd wms-cliente

3️⃣Instale pacotes de dependências

instalação npm

4️⃣Execute o projeto

• Use a interface de serviço de back-end on-line remoto

  npm executar servir

• Para usar a interface de serviço de back-end local, você precisa cooperar com o portal do projeto de back-end

  npm executado localmente

?Mostra de negócios

Estrutura do projeto

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