vue store
1.0.0
As férias de inverno de 2020 são particularmente especiais porque as escolas ainda não começaram devido à epidemia de pneumonia pelo novo coronavírus. Lembrei que usei meu tempo livre para aprender Vue.js e Node.js no semestre passado. Sempre quis fazer um projeto completo para praticar, mas antes não tinha muito tempo na escola. Agora que tenho tempo, quero fazer um projeto para consolidar o que aprendi antes.
Depois de muita deliberação, finalmente decidi fazer um projeto de e-commerce imitando o Xiaomi Mall. Talvez já tenha passado muito tempo e quase tenha esquecido muitas coisas que aprendi antes. Ao fazer este projeto, basicamente segui os documentos oficiais e fiz isso aos poucos. É inevitável que haja várias coisas em casa que atrasem o andamento do projeto. Agora está quase pronto. Vamos compartilhar para os novatos começarem. Se houver algum erro, por favor, me dê alguns conselhos.
O front-end e o back-end deste projeto são separados. O front-end é implementado com referência ao Xiaomi Mall, mas não tem nada a ver com o site oficial da Xiaomi. Produtos Xiaomi, por favor, vá ao shopping oficial da Xiaomi.
Este é o front-end deste projeto. Mude para o servidor da loja para o back-end.
O front-end foi implantado no Alibaba Cloud. Você pode visitar http://101.132.181.9/ (não é compatível com dispositivos móveis, use um computador para acessar).
O back-end também foi implantado no Alibaba Cloud e o endereço da interface foi alterado para um endereço online. O front-end executado localmente também pode acessar o back-end normalmente.
Estou no terceiro ano de graduação e iniciarei um estágio neste verão. Posso não ter tanta liberdade no futuro, mas irei atualizar e melhorar o projeto de tempos em tempos. diretamente em Questões.
Se você acha que este projeto é bom, clique em
Starno canto superior direito para apoiá-lo. ^_^
O front-end e o back-end deste projeto são separados. O front-end é baseado em Vue + Vue-router + Vuex + Element-ui + Axios e é implementado com referência ao Xiaomi Mall. O backend é implementado com base em Node.js(Koa框架) + Mysql .
O front-end contém 11 páginas: página inicial, login, registro, todos os produtos, página de detalhes do produto, sobre nós, minha coleção, carrinho de compras, página de liquidação de pedidos, meu pedido e página de tratamento de erros.
Ele implementa exibição de produtos, consulta de classificação de produtos, pesquisa de palavras-chave de produtos, exibição de informações detalhadas do produto, login, registro, carrinho de compras do usuário, liquidação de pedidos, pedido do usuário, lista de favoritos do usuário e funções de tratamento de erros.
O back-end adota o modelo MVC, e a interface, camada de controle e camada de persistência de dados correspondentes são projetadas de acordo com os módulos de dados exigidos pelo front-end. Servidor de armazenamento de endereço de entrega de back-end.
Front-end: Vue + Vue-router + Vuex + Element-ui + Axios
Back-end: Node.js , Koa框架
Banco de dados: Mysql
A página usa Dialog do element-ui para obter o efeito de abrir a caixa de diálogo da máscara. O botão登录é definido no componente raiz App.vue e se a caixa de login é exibida é controlada por meio showLogin em vuex .
Este design é para que o usuário possa fazer login clicando no botão na página, ou a caixa de login possa aparecer automaticamente após o usuário acessar uma página que requer verificação de login ou o backend retornar um prompt que requer verificação de login, reduzindo saltos de página e simplificando as operações do usuário.
Os dados inseridos pelos usuários geralmente não são confiáveis, portanto, as informações de login são verificadas no front-end e no back-end deste projeto. O front-end é baseado no método de verificação de formulário do element-ui e possui regras de verificação personalizadas para verificação.
A página também usa o Dialog do element-ui para obter o efeito de abrir a caixa de diálogo da máscara.注册é definido no componente raiz App.vue e o valor passado pelo componente pai-filho controla se a caixa de registro é exibida. .
A entrada de dados pelos usuários geralmente não é confiável, portanto, as informações de registro também são verificadas no front-end e no back-end deste projeto. O front-end é baseado no método de verificação de formulário do element-ui e possui regras de verificação personalizadas para verificação.
A página inicial serve principalmente para exibição de produtos, com um carrossel mostrando produtos recomendados e produtos populares exibidos por categoria.
A página de todos os produtos integra toda a exibição do produto, consulta de classificação do produto e exibição dos resultados da pesquisa do produto com base em palavras-chave.
A página de detalhes do produto exibe principalmente informações detalhadas de um determinado produto, onde os usuários podem adicionar seus produtos favoritos ao carrinho de compras ou à lista de favoritos.
O carrinho de compras é implementado usando vuex, e o efeito da página refere-se ao carrinho de compras do Xiaomi Mall.
Para obter um processo de implementação detalhado, consulte: Implementando o carrinho de compras do Xiaomi Mall com base no Vuex
Após o usuário selecionar o produto a ser adquirido no carrinho de compras e clicar no botão “Ir para Finalizar Compra”, ele chegará a esta página. Aqui o usuário seleciona o endereço de entrega, confirma as informações relevantes sobre o pedido e, em seguida, confirma a compra.
Os usuários podem adicionar seus produtos favoritos à lista de favoritos clicando no botão Adicionar Curtir na página de detalhes do produto.
Exibir todos os pedidos feitos pelo usuário.
Perceber:
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
primeira página
Todos os produtos
carrinho de compras
minha coleção
meu pedido
Conecte-se
registrar
Autor hai-27
8 de março de 2020
