我的的web商城網站

項目介紹

一、做爲前端的菜鳥，往往看到Github上有不少大神分享着本身的項目時，心裏都是蠢蠢欲動，此次終於下定決心要給本身一段時間來完成屬於本身的一份做品。
二、因而在查找了大量資料，思考着技術選型，終於決定作一個展示商品的web全棧網站。
三、此網站的商品名稱、商品價格、商品價格等商品信息均是經過node爬蟲獲取到，而後根據本身需求設計數據庫模型，並將其導入而獲取到的數據並展示出來。該網站實現了通常商城最最最基本的功能：註冊、登陸與退出功能，購物車的添加與修改，前端實時計算購物車數量並展示，地址列表的增長與刪除，訂單列表的生成，下單以及查詢下單成功等功能。固然這個網站還有許許多多須要完善並增長的功能，在此以後也會不斷去完善這個網站。
四、在此過程當中遇到不少困難，當往往告誡本身須要靜下心來，明確問題所在，並多查看相關文檔與問題，找到問題所在，並記錄下來，以後會整理一下在這個項目中我的遇到的問題及解決的辦法。所幸的是問題都已經解決，項目也順利部署。

線上地址展現

線上前端項目地址：Husky Market
Github地址：Husky

代碼安裝與部署

# 克隆地址
git clone https://github.com/husky0601/js-full-stack-mall.git

#進入項目文件
cd js-full-stack-mall

# 安裝依賴
npm install

# 運行項目
npm run dev

技術棧

前端:
SVG + Sass + Flex + Vue全家桶（vue + vuex + vue-router+ axios）+ webpack
後端JS：
Node.js + Express
數據庫:
Mongodb + mongoose

項目架構

前端vue項目架構

├── build                                       // webpack配置文件
├── config                                      // 項目打包路徑
├── src                                         // 源碼目錄
│   ├── assets                                  // 樣式目錄
│   ├── components                              // 公用組件
│   │   ├── Header.vue                          // 頭部組件
│   │   ├── Bread.vue                           // 麪包屑組件
│   │   ├── Footer.vue                          // 底部組件
│   │   ├── Modal.vue                           // 模態框組件
|   |   |—— LoadderMore.vue                     // 加載更多
│   ├── router                                  // 路由目錄
│   │   ├── index.js                            // 路由配置
│   ├── util                                    // 工具插件目錄
│   │   ├── currency.js                         // 格式化價格工具
│   ├── views                                   // 主要頁面
│   │   ├── Login.vue                           // 註冊與登陸頁
│   │   ├── GoodsList.vue                       // 商品列表頁
│   │   ├── AddAddress.vue                      // 添加地址頁
│   │   ├── Cart.vue                            // 購物車頁
│   │   ├── Address.vue                         // 收貨地址頁
│   │   ├── OrderConfirm.vue                    // 下單頁
│   │   ├── orderSuccess.vue                    // 下單成功頁
│   ├── App.vue                                 // 總組件（渲染頁面）
│   ├── main.js                                 // 入口文件
├── static                                      // 靜態資源目錄
├── index.html                                  // html入口文件
├── favicon.ico                                 // 圖標
├── package.json                                // 依賴文件

後端Express項目架構

├── bin                                         // 主文件
│   ├── www                                     // 項目的入口文件
├── model                                       // 數據模型
│   ├── users.js                                // 用戶數據模型
│   ├── goods.js                                // 商品數據模型
├── public                                      // 共有靜態資源
├── router                                      // 路徑接口
│   ├── goods.js                                // 商品路徑接口
│   ├── users.js                                // 用戶路徑接口
├── utils                                       // 全局共有方法
│   ├── utils.js                                // 全局共有方法
├── views                                       // 頁面展現
|—— app.js                                      // express主文件
├── package.json                                // 依賴文件

基本功能

前端功能

• 響應式佈局 --完成
• 註冊、登陸、退出 --完成
• 加入購物車、購物車結算 --完成
• 地址增長、刪除 --完成
• 下單功能 --完成
• 商品詳情 --未完成
• 商品分類展現 --未完成
• 我的中心 --未完成
• ......思考ING

後端功能

• 全局登陸攔截 --完成
• 用戶註冊、登陸、退出 --完成
• 商品過濾、查詢 --完成
• 購物車列表的增長、修改、刪除 --完成
• 訂單生成、查詢 --完成
• 商品詳情圖片的獲取 --未完成
• 訂單管理 --未完成
• ......思考ING