Revise V-MARKET to use Nuxt.js and Vuetify's front-end Project

V-MARKET 2.0

The front-end exercise based on Nuxt.js is the front-end project of Vue + Vue CLI.

Demo

V-MARKET 2.0： https://ouiis.github.io/vmarket_2.0/

Home

Shopping Area

Add items to the shopping cart:

Shopping cart page:

Checkout page ( not yet paid ):

Checkout page ( complete payment ):

Backstage area

Commodity management:

New products:

Edit product:

Delete product:

Order management:

New coupon:

Main practice technique

• Take Nuxt.js as the front-end framework and use the universal mode that supports SSR .
• Use Vuetify as the UI framework.
• Use Vuex to manage data status.
• Use ESLint-Airbnb management code style.

Other kits

• Axios Module
• VeeValidate

API used

API file: https://github.com/hexschool/vue-course-api-wiki/wiki

Login and verify

• Sign in POST /admin/signin
• Sign out POST /logout
• Check if the user is still logging in POST /api/user/check

Management console [verification required]

1. Products

• Commodity creation POST /admin/product
• Get product list GET /admin/products?page=:page
• Get product list_all GET /admin/products/all
• Modify product PUT /admin/product/:id
• Delete product DELETE /admin/product/:product_id
• upload image POST /admin/upload

2. Order

• Get order list GET /admin/orders?page=:page

3. Coupons

• New coupon POST /admin/coupon
• Get a list of coupons GET /admin/coupons?page=:page
• Modify coupon PUT /admin/coupon/:id
• Delete coupon DELETE /admin/coupon/:coupon_id

Customer shopping [without verification]

• Get product list GET /products?page=:page
• Get product list_all GET products/all
• Single product details GET /product/:id
• add to Shopping Cart POST /cart
• Delete a certain shopping cart data DELETE /cart/:id
• Get shopping cart list GET /cart
• Apply coupon POST /coupon
• Checkout page POST /order
• Get an order GET /order/:order_id
• Checkout payment POST /pay/:order_id

Download Details:

Author: ouiis

Demo: https://ouiis.github.io/vmarket_2.0/

Source Code: https://github.com/ouiis/vmarket_2.0

#vuejs #vue #javascript #nuxtjs