preface
I have always wanted to combine VUE with Node to make a full-stack e-commerce website, and finally chose Smaran Mobile Mall. This project took more than a month from zero development to deployment, involving login, commodity display, shopping cart, placing orders and so on, which was a very complete process. The transaction logic is also more complex, so there may be some details (page aesthetics please let me….) And will be repaired over time.
Smartisan uses Angular, a product of Luo Yonghao, which feels simple and beautiful. Page item data is captured by crawlers and then written to the database. Although the hammer page is also dynamically generated, it is still very easy to access. Note: Project data has no relation with smartisan commodity data, and is not the interface of Smartisan Mall requested by proxy
vue2 + vuex + vue-router + webpack + ES6 + axios + sass + flex + svg + node + mongoDB
About Interface Data
Node-api uses Node + mongodb
The commodity data is captured and written into the database (EventProxy + SuperAgent) by crawler. Because the data structure of Smaran mobile phone is very complex and the page is dynamic, I simplify the data by forwarding packaging, but it does not affect the normal business logic. If you find that some commodities are missing, It’s possible that smartisan altered the data structure. There is no such problem under normal circumstances, you can rest assured.
If you want to do a personal project but have no data, you can also request the interface of the project (I will make up the documents later when I have time), or clone the project by yourself
Use Nginx as a reverse proxy to solve cross-domain problems.
Project running
Git clone https://github.com/yucccc/vue-mall.git CD vue - mall CNPM NPM I run dev / / if you run agent mistakes Please make sure that under the config file index. Js ProxyTable proxy agent should be run directly / / http://mall.yucccc.com:3333 / / right by running the node - API request API local agent should be http://127.0.0.1:3333
Copy the code
- If it is helpful to you, you can click “Star” in the upper right corner to support it. Thank you very much! ☺
- If you have any questions, please directly raise them in Issues, or if you find problems and have a good solution, welcome PR
Results demonstrate
Smartisan Mall demo (please use PC to open, not a mobile terminal project ~~~)
Note: In order to better experience, you need to register an account, account password is optional.
For demonstration purposes, two accounts are provided. Of course, it is possible for multiple users to operate the same account simultaneously.
Account: admin Password: admin Account: admin1 Password: 123
Copy the code
- Login and logout functions
- registered
- Add, delete, modify shopping
- Add, modify, delete the delivery address
- Placing function
- Payment function – because I have no permission to apply for the development interface of Ant Financial Alipay, it is only simulated payment.
- Goods details
- Personal center
- The order list
- Change avatar – avatar uploaded to seven niuyun, due to free seven niuyun space is limited, I hope you big guy don’t make me..
To continue
More functions will be added later. More details will be fixed later. The code will be optimized over time. With a learning attitude, thank you.
.├ ─ build // WebPack Configuration file ├─ config // Project Pack Route ├─ SRC // source directory │ ├─ API │ ├─ common // │ │ ├ ─ ─ the components / / component ├ ─ ─ page / / page │ │ └ ─ ─ Cart / / shopping Cart │ │ └ ─ ─ Checkout / / submit orders │ │ └ ─ ─ Goods / / commodity │ │ ├ ─ ─ Goods / / commodity list │ │ ├ ─ ─ goodsDetails / / commodity details │ │ └ ─ ─ Home / / homepage │ │ └ ─ ─ the Login / / Login │ │ └ ─ ─ the Order / / Order │ │ ├ ─ ─ │ Order / / commodity list │ ├ ─ ─ payment / / submit orders │ │ ├ ─ ─ paysuccess / / submit successful │ │ └ ─ ─ User / / personal center │ │ ├ ─ ─ children │ │ │ ├ ─ ─ expressions such as addressList / / address list │ │ │ ├ ─ ─ information/personal information / │ │ │ └ ─ ─ the order / / order list │ │ └ ─ ─ index. The vue / / homepage │ ├ ─ ─ store / / vuex state management │ │ ├ ─ ─ action. The js / / │ │ ├─ index.js // Vuex, Create store │ │ ├ ─ ─ modules / / store module │ │ ├ ─ ─ mutation - types. Js / / define constants of muations │ │ └ ─ ─ mutations. Js / / configuration mutations │ ├ ─ ─ App.vue // page import file │ ├─ main.js // Application import file, Load various common components ├─ favicon.ico // Icon ├─ index.html // import HTML file.
Copy the code