摘要:于是在查找了大量资料,思考着技术选型,终于决定做一个展现商品的全栈网站。当然这个网站还有许许多多需要完善并增加的功能,在此之后也会不断去完善这个网站。所幸的是问题都已经解决,项目也顺利部署。
项目介绍
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107431.html
摘要:于是在查找了大量资料,思考着技术选型,终于决定做一个展现商品的全栈网站。当然这个网站还有许许多多需要完善并增加的功能,在此之后也会不断去完善这个网站。所幸的是问题都已经解决,项目也顺利部署。 项目介绍 1、作为前端的菜鸟,每每看到Github上有很多大神分享着自己的项目时,内心都是蠢蠢欲动,这次终于下定决心要给自己一段时间来完成属于自己的一份作品。2、于是在查找了大量资料,思考着技术选...
摘要:前言由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 前言 由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航。 由于更新比较频繁,因此隔一段时间才会更新目录导航哦~想要获取最新原创的技术文章欢迎关注我的公众号:Java3y Java3y文章目录导航 Java基础 泛型就这么简单 注解就这么简单 Druid数据库连接池...
摘要:使用签署免费证书后端掘金本文操作在操作系统下完成,需要和超文本传输安全协议英语,缩写,常称为,红黑树深入剖析及实现后端掘金红黑树是平衡二叉查找树的一种。 使用 Lets Encrypt 签署免费 Https 证书 - 后端 - 掘金 本文操作在Linux操作系统下完成,需要Python和Nginx 超文本传输安全协议(英语:Hypertext Transfer Protocol Sec...
阅读 2579·2023-04-26 03:00
阅读 1392·2021-10-12 10:12
阅读 4189·2021-09-22 15:33
阅读 2907·2021-09-22 15:06
阅读 1530·2019-08-30 15:44
阅读 2144·2019-08-30 13:59
阅读 533·2019-08-30 11:24
阅读 2406·2019-08-29 17:07