個人のウェブサイトモール

プロジェクト

彼自身のプロジェクトは、心だけで周りのGithub上のコーナー、最終的には自分で自分自身の仕事を完了するためにいくつかの時間を与えることにした。この時間のとき1、新人としてフロントエンドには、多くの場合、はるかに大きなシェア神を参照してください。
2、その後、技術選択について考え、多くの情報を見て、最終的にウェブサイトの完全なスタックを示して貿易を行うことを決めました。
3、このサイトの商品名、商品価格、商品価格やその他の製品情報は爬虫類のノードを介して利用可能な場合、その設計に応じてデータベースモデルと輸入を必要とすることは、データを取得して表示します。登録、アドレスリストを追加して、ログインを変更し、機能を終了し、フロントエンドのショッピングカートと現在の数のカート、リアルタイムの計算ショッピング、増産や削除、注文の一覧、受注:このサイトは、一般的な店舗、最も基本的な機能を実現しました単一の成功の下でのクエリ機能。もちろん、必要性の向上と機能の増加は、その後、このサイトを改善し続けることを多くのサイトがあります。
4は、その過程で、彼らは、落ち着い問題をクリアし、マルチビュー関連の書類や課題、問題を発見し、かつ、記録する必要がある場合、我々はこのプロジェクトで個人的な出会いを整理しますしばしば警告し、多くの困難に遭遇しました問題と解決策へ。幸いなことに、問題が解決されている、プロジェクトが成功裏に展開します。

アドレスライン表示

フロントラインアイテム住所:ハスキー市場
のGithub住所:ハスキー

コードのインストールと展開

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

#进入项目文件
cd js-full-stack-mall

# 安装依赖
npm install

# 运行项目
npm run dev

テクノロジー・スタック

フロントエンド:
SVG + サス + フレックス + Vueの家族バケット(VUE + vuex + VUE-ルータ + Axios)+ WebPACKの
バックエンドJS:
Node.jsの + Expressの
データベース:
MongoDBの + マングース

プロジェクトのアーキテクチャ

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                                // 依赖文件

エクスプレスバックエンドアーキテクチャプロジェクト

├── bin                                         // 主文件
│   ├── www                                     // 项目的入口文件
├── model                                       // 数据模型
│   ├── users.js                                // 用户数据模型
│   ├── goods.js                                // 商品数据模型
├── public                                      // 共有静态资源
├── router                                      // 路径接口
│   ├── goods.js                                // 商品路径接口
│   ├── users.js                                // 用户路径接口
├── utils                                       // 全局共有方法
│   ├── utils.js                                // 全局共有方法
├── views                                       // 页面展示
|—— app.js                                      // express主文件
├── package.json                                // 依赖文件

基本的な機能

フロントエンド機能

  • 応答レイアウト - 完全
  • 登録、ログイン、終了 - 完全
  • カート決済ショッピングカートショッピングセンターに追加 - 完了
  • 住所、追加、削除 - 完全
  • 単一の関数 - 完全な
  • 商品の詳細 - 未完
  • カテゴリーを表示 - 未完
  • 個人センター - 未完
  • INGの思考......

バックエンド機能

  • グローバル・ログインインターセプト - 完了
  • ユーザ登録、ログイン、終了 - 完全
  • 商品フィルタリング、クエリ - 完全
  • 削除、修正、ショッピングカートのリストを増やす - 完全
  • 注文世代、クエリ - 完全
  • 画像取得のための製品の詳細 - 未完
  • 注文管理 - 未完
  • INGの思考......

おすすめ

転載: www.cnblogs.com/jlfw/p/12032155.html