pauloroberttlss / store-car-spa-vue.js-and-laravel-5.3 Goto Github PK

O Projeto traz aos usuários uma experiência quase desktop com esse leve Single Page Application, e de maneira conveniente os usuários poderão apreciar algumas rotinas de e-commerce como o carrinho de compra, busca rápida de produtos, lista de categorias até a confirmação do pedido. Seria simples avaliar mas o grande ponto neste projeto são as tecnologias e boas práticas presentes na sua estrutura.

• e-commerce - Meu carrinho.

$ php -v
PHP 7.1.18 (cli) (built: May 24 2018 17:55:12) ( ZTS MSVC14 (Visual C++ 2015) x64 )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

$ composer -v
You are running Composer with SSL/TLS protection disabled.
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.5.1 2017-08-09 16:07:22

$ node -v
v6.5.0

$ npm -v
3.10.3

• Instalação das bibliotecas PHP composer.json.

  • Dentro do diretório do projeto execute.

composer update

• Instalação das bibliotecas JavaScript package.json.

  • Pacote Global

npm install [email protected] -g
npm install [email protected] -g

• Dentro do diretório do projeto execute.

npm install

paciência aqui.. node_module é gigantesco

Faça uma copia do arquivo .env.example edite o novo arquivo.

cp .env.example .env

Configurar conexão com banco de dados, padrão Mysql.

php artisan key:generate

php artisan migrate --seed

• Configurar requisições de Front-end. BASE_URL.

  • Acesse o arquivo. resource/assets/_store/js/utils/request

const service = axios.create({
  baseURL: EXEMPLO >> 'http://127.0.0.1:8000/api', 
  timeout: (1000 * 60) * 2 // request timeout
});

• Gerar página de boot do SPA (single page application).

npm run prod --production

$ npm run prod --production

> webpack --config=./webpack-build/webpack.prod.conf.js

Hash: 31ab099ee5bc76c9a747
Version: webpack 3.10.0
Time: 66799ms
                                   Asset     Size  Chunks                    Chunk Names
../build/fonts/element-icons.6f0a763.ttf    11 kB          [emitted]
              ../build/js/vendor.prod.js  1.22 MB       0  [emitted]  [big]  vendor
                 ../build/js/spa.prod.js   434 kB       1  [emitted]  [big]  spa
            ../build/js/manifest.prod.js   1.4 kB       2  [emitted]         manifest
[+Wvm] ./resources/assets/_store/sass/index.scss 568 bytes {1} [built]

• No arquivo .env altere para APP_ENV=production.
• No arquivo .env altere para APP_DEBUG=false.

php artisan serve

O Html5 e Javascript ganharam super poderes e responsabilidades distintas, a primeria camada desse projeto usufluir de um framework Javascript e têm a responsabilidade de manter do lado cliente um ecossistema de rotas; templates; e hidratar as listas por AJAX sem o release de pagina. O Vue.js framework atendeu em todos os requisito o proposito deste projeto.

Vue.js possuir suporte à design FLUX. Flux é a arquitetura de aplicativo que o Facebook usa para criar aplicativos da Web do lado do cliente. Ele complementa os componentes de visualização compostos do React utilizando um fluxo de dados unidirecional. É mais um padrão do que um framework formal. Detalhes

Laravel Framework - A camada lógica deste projeto será mantida pelo framework PHP mais utilizado no momento, com uma curva de desenvolvimento acentuada outras camadas foram suficientes para assegurar uma boa escabilidade e manutenções.

As APIs por padrão usam o formato JSON em suas respostas. Todas as respostas serão interceptadas pela camada de apresentação Model–view–presenter (MVP)

• Postman: Headers adicione Origin:

• Para sua hostedagem o arquivo config\cors.php

      return [   
      'supportsCredentials' => false,
      'allowedOrigins' => ['http://127.0.0.1:8000',
                       'ADICIONE AQUI'
                      ],
          'allowedOriginsPatterns' => [],
          'allowedHeaders' => ['*'],
          'allowedMethods' => ['*'],
          'exposedHeaders' => [],
          'maxAge' => 0
      ];