项目引见
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