RagnarokShopV3 (仙境傳說RO電商V3)

歡迎來到仙境傳說V3，這是一份Vuejs電商前端練習V3版(VueCli3+Vuex)。

新舊頁面差異

舊版首頁(V2版)

新版首頁(V3版)

此作品主要是仿線上遊戲 仙境傳說 所製作，故畫面會雷同。

Demo

RagnarokShop (舊版V2)

https://hsiangfeng.github.io/RagnarokShop/

RagnarokShopV3 (新版V3)

https://hsiangfeng.github.io/RagnarokShopV3/

簡介

此作品為Vuejs前端練習，其主要功能有以下:

• 前台:
  1. 電商展示(商品分類、單一商品介紹、遊戲內容說明等)
  2. 購物車
  3. 優惠卷
  4. 結帳/下單
• 後台:
  1. 管理者登入
  2. 控制介面
  3. 商品管理(CRUD)
  4. 訂單管理
  5. 優惠卷管理
  6. 模擬訂單功能

使用技術&練習技術

• Vue Cli 3
• Vuex
• VueRouter
• VueComponents
• API
• RWD
• Bootstrap4
• jQuery
• JavaScript(ES6、LocalStorage等)
• PUG
• SCSS
• Webpack
• ESlint(aribnb)

使用Vue-Plugin or Other-Plugin

• Vue-fontawesome
• Vue-axios
• Vue-typed-js
• Vee-validate
• Vue-awesome-swiper
• Vue-loading-overlay
• Vue-router
• Vue-cli-plugin-pug
• V-charts
• V-dragged
• Popper.js
• Pagemap

前端介紹

過場動畫

初心者坐騎

首頁畫面

右下方有首頁音樂控制，若沒播放可手動開啟。

商品列表

關於仙境

購物車

後台登入介面

每次重新背景將會不同。

小商人購物車

快速選購

訂單

訂單

準備付款

付款成功

404

首頁(我猜你喜歡)

觸發條件:首頁將會依照你上一次觀看過的產品詳細做類別推薦。

後臺控制台

支援Keydown

以下鍵盤按鍵非數字鍵。

• 前往首頁：組合鍵【ALT+Q】 or 鍵盤鍵【ALT+1】
• 產品列表：組合鍵【ALT+W】 or 鍵盤【ALT+2】
• 關於仙境：組合鍵【ALT+S】 or 鍵盤【ALT+3】
• 購物車內容：組合鍵【ALT+A】 or 鍵盤【ALT+4】
• 登入畫面：組合鍵【ALT+Z】 or 鍵盤【ALT+5】
• 開啟購物車：組合鍵【ALT+C】 購物車 or 鍵盤【ALT+6】
• 開關介面視窗：組合鍵【ALT+V】
• 快捷鍵：鍵盤【ALT+0】

針對介面視窗增加提示訊息

HP、SP、Name、Exp、Job等皆有小驚喜。

更多內容

每一次登入介面背景圖片將會不同圖片(共有六種登入圖片)。

其中裡面還包含經典音樂，約五首左右。

• 普隆德拉 - 首頁
• 衛星島 - 關於仙境
• 南門 - 商城
• 冬季戀曲 - 訂單頁面
• RO登入音樂 - 登入畫面
• 登入視窗、基本訊息、快捷鍵皆可拖曳

表情符號

後臺登入游標

其餘更多細節部分，歡迎至Demo網站觀看。

https://hsiangfeng.github.io/RagnarokShopV3/

內容來源&圖片來源

Google

仙境傳說官方網站

仙境傳說(RO)幻想廳

仙境傳說(RO)透視鏡

聲明

本作品內圖片、內容等，純粹為個人練習前端使用，不做任何商業用途。

作者小言

沒想到一個電商的開發如此複雜，盡可能忠於仙境傳說介面，小地方可能還有一些bug(舉凡切換畫面過快背景音樂會重疊的問題。)