个人的web商城网站

2024年3月9日 166次阅读 来源: husky0601

项目引见

1、作为前端的菜鸟，往往看到Github上有许多大神分享着本身的项目时，心田都是捋臂张拳，此次终究下定决心要给本身一段时间来完成属于本身的一份作品。
2、因而在查找了大批材料，思索着手艺选型，终究决议做一个展现商品的web全栈网站。
3、此网站的商品名称、商品价钱、商品价钱等商品信息均是经由过程node爬虫猎取到，然后依据本身需求设想数据库模子，并将其导入而猎取到的数据并展现出来。该网站完成了平常商城最最最基本的功用：注册、登录与退出功用，购物车的增添与修正，前端及时盘算购物车数目并展现，地点列表的增添与删除，定单列表的天生，下单以及查询下单胜利等功用。固然这个网站另有许许多多须要完美并增添的功用，在此之后也会不断去完美这个网站。
4、在此过程当中碰到许多难题，当往往申饬本身须要静下心来，明白题目所在，并多检察相干文档与题目，找到题目所在，并记录下来，之后会整顿一下在这个项目中个人碰到的题目及处理的要领。所幸的是题目都已经处理，项目也顺遂布置。

线上地点展现

线上前端项目地点：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
    原文作者：husky0601
    原文地址: https://segmentfault.com/a/1190000013273272
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞