JDdaojia

JDdaojia

Introduction

JDdaojia is a web mobile e-mail built by imitating JD.com . This warehouse is its front-end project. For the backend API interface part, see: JDdaojia-backAPI.

This project implements basic operations on the e-Mall user side, including login registration, store product display, shopping cart, order placing, historical order query, saving and editing address, and tries to restore the unique UI style of JD.com.

See the demo video: Bilibili video.

Technology used

• vue3 + vuex + vue-router + vue-cli
• axios
• ESLint
• webpack
• scss
• ES6

Basic command line operations:

Install project project setup

 npm install

Compiles and hot-reloads for development

 npm run serve

Compiles and minifies for production

 npm run build

Lints and fixes files

 npm run lint

Customize configuration

See See:
Configuration Reference.

Run successfully

If the process goes smoothly and the project runs successfully in the dev environment, the command line will display a prompt similar to the following.

Use the URL given therein to access the page. However, you should run the project's back-end interface server first, and use port 3000 by default.

hint

• You can log in to the mall directly through username: admin and password: admin to bypass the registration process. In addition, the mall now does not have a mobile SMS login function, please use the username and password to log in.
• The project uses the rem scheme to achieve adaptive layout.
• The project has only been tested on Firefox and Edge browsers. Chrome and Safari browsers may encounter layout bugs. If you find any, please contact me to modify it.
• Layout makes full use of flex and simplifies the css code.
• The shopping cart function mainly uses vuex and sessionStorage to manage data on the client side, which is my goal to practice localized information management capabilities. Other functions mainly process data on the backend.
• The login information is stored in sessionStorage.

Directions for improvement

• There is still room for improvement in page loading performance and presentation, such as using Cache, reducing layout jitter, etc.
• Under certain settings in the browser, sessionStorage will not be cleared even if the page is closed. You can set that after not operating the page for a period of time, you will automatically log out and clear sessionStorage.
• Many parts that use HTTP requests can adopt more specific error handling methods.