vue store
1.0.0
The winter vacation in 2020 is particularly special. Because of the new coronary virus pneumonia, the school has not yet started. I think of studying Vue.js and Node.js in my spare time last semester. I have always wanted to do a complete project, but I did n’t have so much time in school before. Now that I have time, I want to do a project to consolidate what I learned before.
Think about it, and finally decided to imitate Xiaomi Mall to do an e -commerce project. It may be a bit long, and a lot of things I have learned before are almost forgotten. I basically watch the official documentation by doing this project. At home, there are inevitable things to delay the progress of the project. Now I finally do it, share it, and the novice is on the way. If there are mistakes, please give me more advice.
This item is currently separated from the back -end. The front -end reference Xiaomi Mall is realized, but it has nothing to do with Xiaomi official. It is purely individual. If you need to buy Xiaomi products, please go to Xiaomi official mall.
This is the front end of this project. Please move to Store-Server.
The front end has been deployed on Alibaba Cloud. Welcome to http://101.132.181.9/ (No compatible mobile terminal, please use your computer to access).
The back end has also been deployed in Alibaba Cloud, the interface address has been modified to an online address, and the local operation front end can also access the back end normally.
I am studying undergraduate junior, and I will start an internship this summer. The latter time may not be so free, but I will update the project from time to time.
If you think this project is not bad, you can click
Starin the upper right corner to support it, thank you! ^_^
This item is currently separated from the back-end. The front end is based on Vue + Vue-router + Vuex + Element-ui + Axios . The back end is based on Node.js(Koa框架) + Mysql .
The front end contains 11 pages: homepage, login, registration, all product, product details page, about us, my collection, shopping cart, order settlement page, my order and error processing page.
Realize the display of goods, product classification query, keyword search products, product details display, login, registration, user shopping cart, order settlement, user order, user collection list, and error processing function.
The back end adopts the MVC mode, and the corresponding interface, control layer, and data durable layer are designed according to the data split module required by the front end. The back-end transmission address is Store-Server.
Front end: Vue + Vue-router + Vuex + Element-ui + Axios
Back end: Node.js , Koa框架
Database: Mysql
The page of the page uses Dialog of Element-UI to achieve the effect of the pop-up dialog box. The登录button is set in the App.Vue root component, and the login box is controlled through showLogin status in vuex .
This design is to log in to both the button in the page, or it can be the page or back end of the user access to the page or the back end to return the prompt that needs to be verified and automatically pop up the login box to reduce the jump of the page and simplify the user operation.
The data entered by the user is often unreliable, so the rear end of this item has verified the login information. The front end is based on an Element-UI form verification method to customize the verification rules for verification.
The page of the page also uses Dialog of Element-UI to achieve the effect of pop-up mask dialog box. The注册button is set in the App.Vue root component, which is displayed by the parent-child component value control of the registration box.
The data entered by the user is often unreliable, so the rear end of this item has also verified the registration information. The front end is based on the Element-UI form verification method, and the verification rules are customized for verification.
The homepage is mainly to display the product. There are recommended products recommended by rotating drawings. The categories are displayed in the category.
All product pages integrate all product display, product classification query, and search product results according to keywords.
The details page of the product is mainly displayed on the details of a certain product. Users can add the favorite product to the shopping cart or collecting list here.
The shopping cart is implemented by Vuex. The page effect refers to the shopping cart in Xiaomi Mall.
For detailed implementation process, please see: realize the Xiaomi Mall shopping cart based on Vuex
After the user chooses the product to be purchased, the user clicks the "Settlement" button to come to the page. The user selects the delivery address here, confirms the relevant information of the order, and then confirms the purchase.
The user's details page of the product can be added to the favorite product by clicking to the favorite button.
Show all the orders of the user.
Notice:
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
front page
All products
Shopping cart
My collection
My order
Log in
register
Author hai-27
March 8, 2020
