BAI_SHOP

Projeto BAI_SHOP

1. Introdução ao Projeto

Introdução do projeto: Este projeto adota o modelo de desenvolvimento de separação front-end e back-end vue_api_server é o arquivo de código de back-end, vue_shop é o arquivo de código de desenvolvimento de front-end e vue_shop_server é o arquivo de código de produção de front-end. , executar vue_shop_server diretamente será muito mais fácil do que vue_shop

Pilha de tecnologia de projeto front-end	ilustrar
Vista	Uma estrutura progressiva para a construção de interfaces de usuário
Roteador Vue	vue-router é o gerenciador de roteamento oficial do vue.js
Elemento-UI	ElementUI Element é uma biblioteca de componentes baseada em Vue 2.0 preparada para desenvolvedores, designers e gerentes de produto. Ela fornece recursos de design de suporte para ajudar seu site a tomar forma rapidamente.
Eixos	axios é uma biblioteca HTTP baseada em Promise que pode ser usada em ambientes e navegadores node.js.
Gráficos eletrônicos	Simplificando, ECharts é um plug-in usado pelo banco de dados backend para mapear dados em gráficos no processo de desenvolvimento de programas para Internet.

Pilha de tecnologia de projeto de back-end	ilustrar
Node.js	nodejs é uma linguagem desenvolvida em C++ que roda no lado do servidor. Ele pode escrever programas em segundo plano para sites e desenvolver aplicativos no lado do servidor.
Expressar	Express é uma estrutura de desenvolvimento de aplicativos web minimalista e flexível baseada na plataforma Node.js. Ele fornece uma série de recursos poderosos para ajudá-lo a criar vários aplicativos web e para dispositivos móveis.
olá	json web token é um padrão aberto baseado em json implementado para entregar declarações em um ambiente de aplicação web
MySQL	banco de dados
Sequelar	Sequelize.js fornece acesso simples aos bancos de dados MySQL, MariaDB, SQLite e PostgreSQL mapeando entradas de banco de dados para objetos ou objetos para entradas de banco de dados. Resumindo, é ORM (Mapeador Relacional de Objetos). Sequelize.js é escrito inteiramente em JavaScript e é adequado para ambientes Node.js.

2. Descrição do documento

1. descrição do arquivo vue_api_server

• diretório do arquivo de configuração config
  • arquivo de configuração padrão default.json (que contém configuração do banco de dados, configuração jwt)
• camada de acesso a dados dao , que armazena as operações de adição, exclusão, modificação e consulta do banco de dados
  • Métodos de acesso a banco de dados público fornecidos por DAO.js
• models armazena arquivos de modelo ORM de banco de dados específicos
• modules atuais do projeto
  • Módulo de verificação de permissão da API authorization.js
  • módulo de banco de dados database.js (o carregamento do banco de dados é baseado no carregamento da biblioteca nodejs-orm2)
  • passport.js é construído com base no módulo de login do passaporte
  • interface unificada de resultado de retorno da API resextra.js
• Módulos de terceiros dos quais node_modules depende
• routes unificado de rotas
  • api fornece interface API
  • mapp fornece interface de APP móvel
  • mweb fornece sites para celular
• camada de serviço services , o código de lógica de negócios é escrito nesta camada e os dados obtidos por meio de diferentes interfaces são convertidos nos dados exigidos pelo front-end unificado
• arquivo de entrada do projeto principal app.js
• arquivo de configuração do projeto package.json

Descrição do arquivo 2.vue_shop

• pasta dist A pasta gerada após o empacotamento do projeto (para ambiente de produção)

  • Contém css , fonts , img , js , favicon.ico e index.html
  • Basta iniciar um servidor simples, montar o projeto, executar o servidor e acessar a porta padrão
  • Como executar o projeto vue empacotado: https://www.cnblogs.com/zhujiabin/p/10557982.html

• A pasta public armazena recursos estáticos.

  • Contém arquivos favicon.ico e index.html

• A pasta src é a pasta onde o programa de origem está armazenado.

  • assets : armazena alguns arquivos de recursos maiores do projeto, como imagens, fontes, etc.

  • components : armazena subcomponentes do projeto vue

  • plugins : componentes element-ui introduzidos pelo projeto

  • router : roteamento do projeto index.js

  • tools : classe de ferramenta do projeto

  • App.vue : componente raiz vue

  • main.js : entrada da web

• Outros arquivos de configuração

  • .browserslistrc : esta configuração pode compartilhar o navegador de destino e a versão do nodejs em diferentes ferramentas de front-end. Essas ferramentas podem ser configuradas automaticamente de acordo com o navegador de destino.
  • .editorconfig : ajuda os desenvolvedores a definir e manter estilos de codificação consistentes em diferentes editores e IDEs
  • .eslintignore : Defina arquivos que não são verificados pelo eslint ( ESLint é um plug-in e uma regra gramatical JavaScript configurável e uma ferramenta de verificação de estilo de código)
  • .eslintrc.js : arquivo de configuração eslint
  • .gitignore : Define arquivos ignorados pelo git
  • .prettierrc : Quando usamos a formatação com o botão direito, isso nos ajudará automaticamente a completar os símbolos. No entanto, alguns símbolos reportarão erros de sintaxe no eslint, então o que precisamos fazer?
  • babel.config.js : arquivo de configuração Babel ( Babel é uma cadeia de ferramentas usada principalmente para converter o código da versão ECMAScript 2015+ em sintaxe JavaScript compatível com versões anteriores para que possa ser executado em versões atuais e mais antigas de navegadores ou outros ambientes)

3. descrição do arquivo vue_shop_server

• Os arquivos de projeto do ambiente de produção empacotados por vue_shop na pasta dist
• Contém css , fonts , img , js , favicon.ico e index.html
  • Ao executar o projeto, primeiro exclua node_modules , depois entre no diretório vue_shop_server e execute npm install para baixar novamente o novo pacote de dependência.
  • Após o download do pacote de dependência, execute o comando nodemon app.js na janela do documento e visite http://localhost:3000 para ver a página front-end do projeto.
• O servidor de arquivos app.js executa o arquivo de entrada, que contém algumas configurações básicas para o servidor.

3. Precauções para operação do projeto

1. Baixe e descompacte BAI_SHOP.zip

2. Insira vue_api_server/db e importe mydb.sql na pasta db para o banco de dados mysql

3. Depois que os dados forem importados com sucesso, abra o arquivo default.json na pasta config e configure db_config nele.

4. Abra a janela de comando doc, entre no diretório vue_api_server e execute o comando npm install para carregar as dependências necessárias para o projeto.

5. Após o carregamento das dependências, execute nodemon app.js para executar

6. Abra uma nova janela de comando do documento, entre no diretório vue_shop e execute o comando npm install para carregar as dependências necessárias para o projeto.

7. Depois que as dependências forem carregadas, execute o comando npm run serve na janela atual para executar o projeto. Quando solicitar Compiled successfully in xxxxms , abra o navegador e visite localhost:8080

8. Pós-escrito: De modo geral, os projetos em modo de desenvolvimento são executados com sucesso! Nota: você deve primeiro ter um ambiente nodejs! E você precisa instalar o código de dependência do nodemon globalmente: npm install nodemon -g

Se você deseja montar um projeto no modo de produção, consulte a descrição do arquivo vue_shop e a descrição do arquivo vue_shop_server acima. A pasta dist é o arquivo após o pacote do projeto vue.