Download ecommerce management system - download do código-fonte ecommerce management system

ecommerce management system

Outras categorias

1.0.0

Baixar

Sistema de gerenciamento de back-end de elemento

Um sistema de gerenciamento de backend de e-commerce baseado em Vue, usando um modelo de desenvolvimento de separação front-end e back-end. As pilhas de tecnologia front-end usadas no projeto incluem Vue, vue-router, Element-UI, Axios, Echarts, etc.

Seleção de tecnologia

Pilha de tecnologia front-end:

Vista
Roteador Vue
Elemento-UI
Eixos
Gráficos eletrônicos

função empresarial

Pontos técnicos relacionados às funções

1. Login do usuário

Depois que o usuário faz login com sucesso, o cliente lembra e mantém seu status de login por meio de sessionStorage e token .
Controle as permissões de acesso do usuário por meio do guarda de navegação de rota router.beforeEach . Impedir que usuários que não estejam logados tentem acessar outras páginas além da página de login por meio da URL.

2. Layout da página inicial

layout
- Implemente o layout da página inicial por meio da biblioteca de componentes Element-UI .
- Use <el-menu> para implementar a barra de navegação lateral e adicione o atributo activePath ao sessionStorage para manter a barra de navegação destacada.
- O ícone na barra de navegação lateral usa Iconfont Alibaba.
solicitação de dados
- Solicite dados de interface através Axios e adicione um token ao interceptor de solicitação do axios para garantir a permissão para obter dados.
- Use a barra de progresso NProgress para exibir o progresso do carregamento da página (solicitação de dados).

3. Lista de usuários de gerenciamento de usuários

Use <el-form> para adicionar formulários de usuário, personalizar regras de verificação de formulários e implementar redefinição e pré-verificação de formulários antes do envio.
Use slot-scope para obter dados de componentes e personalizar modelos de renderização.

4.Gerenciamento de permissões

lista de funções
- Use um loop v-for três camadas para renderizar as permissões de primeiro, segundo e terceiro nível da função, respectivamente.
- Use o controle de árvore <el-tree> para exibir uma lista de permissões atribuíveis a funções.
Lista de permissões

5. Gestão de commodities

Lista de produtos
- Use o filtro global Vue.filter para personalizar o formato de exibição dos objetos Date.
Adicionar produto
- Use o componente da barra de etapas <el-steps> para orientar os usuários no preenchimento do formulário de adição de produto de acordo com o processo.
- Use o componente <el-upload> para permitir que os usuários carreguem imagens de produtos.
- Use vue-quill-editor para permitir que os usuários preencham o conteúdo do produto.
- Use <el-form> para preencher o formulário de adição de produto, personalizar as regras de verificação do formulário e implementar a pré-verificação antes do envio do formulário.
Parâmetros de classificação
Classificação do produto
- Use o componente de tabela de árvore vue-table-with-tree-grid para exibir a classificação de produtos de primeiro, segundo e terceiro níveis.

6. Lista de pedidos de gerenciamento de pedidos

Use o componente de linha do tempo <el-timeline> para exibir as informações logísticas do pedido.

7. Relatórios de dados estatísticos de dados

Use Echarts para exibir relatórios de dados de origem do usuário.

Dependências do projeto

Executando dependências

axios => Enviar solicitação
echarts => gráficos
element-ui => biblioteca de componentes Element-UI
lodash => cópia profunda e fusão de objetos
nprogress => barra de progresso
vue-quill-editor => Editor de rich text
vue-table-with-tree-grid => tabela em árvore

Dependências de desenvolvimento

babel => conversão de sintaxe ES6
eslint/babel-eslint => verificação de sintaxe
sass/sass-loader => sintaxe sass
babel-plugin-transform-remove-console => Remover console do ambiente de produção
@babel/plugin-syntax-dynamic-import => Carregamento lento de rotas

Otimização de projetos

1. Gerar relatório de embalagem

Visualize relatórios de empacotamento através do painel de visualização Vue UI e analise como otimizar/compactar arquivos muito grandes.

2. Configurar Webpack

Especifique diferentes arquivos de entrada de pacote para modo de desenvolvimento e modo de liberação por meio de chainWebpack
1. Arquivo de entrada do modo de desenvolvimento src/main-dev.js
2. Arquivo de entrada do modo de liberação src/main-prod.js
No ambiente de produção, algumas bibliotecas de terceiros muito grandes serão introduzidas usando CDN
Por padrão, os pacotes de dependência de terceiros importados por meio da sintaxe de importação serão eventualmente empacotados e mesclados no mesmo arquivo, resultando no problema de o tamanho do arquivo único ser muito grande após o empacotamento bem-sucedido.
Para resolver os problemas acima, você pode configurar as dependências que precisam carregar recursos CDN externos através do nó externals do Webpack. Quaisquer pacotes de dependência de terceiros declarados em externals não serão empacotados.

Personalize o conteúdo da página inicial de diferentes ambientes por meio de plug-ins (por exemplo, use import para importar pacotes dependentes no modo de desenvolvimento e use CDN para importar no modo de lançamento)

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >

3. Carregamento lento de rotas

Ao empacotar projetos, pacotes js muito grandes afetarão a velocidade de carregamento da página.
Use @babel/plugin-syntax-dynamic-import e altere o roteamento para carregar sob demanda. O componente correspondente será carregado somente quando a rota for acessada.