项目介绍

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

个人的web商城网站的更多相关文章

  1. 建设商城网站ecshop如何开启伪静态

    ecshop是国内一款比较流行的商城网站建设系统,它拥有比较完善的电子商务交易流程,其使用PHP+网站建设者的喜爱.   商城网站也需要网站优化,开启伪静态是个比较好的方法.   ECSHOP的伪静态 ...

  2. Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径

    Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径 (2015/07/08更新) JDK下载地址(JDK官网下载地址) 下载地址为:http://www.oracle.co ...

  3. Web UI 网站用户界面设计命名规范

    Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...

  4. 解析汽车B2C商城网站四种盈利模式

    汽车已成为家庭的日常用品,汽车的配套设施也成为销售的热点,汽车B2C电子商城为行业营销的新平台,汽车B2C电子商务网站盈利的模式是怎样的?创新的盈利模式才能在行业竞争中生存. 资讯产品一体模式 网站的 ...

  5. YiShop_商城网站设计应该注意什么

    商城网站的建设,不是一件简单的事情,当然,也不要把商城网站的建设想得那么的复杂,在建设商城网站的时候 ,只要考虑到以下这些因素,定能把商城网站建设工作做好.那么商城网站建设要考虑哪些因素:(1)风格 ...

  6. YiShop_商城网站建设应该注意什么

    现在电子商务迅速发展,而专门搭建商城网站的第三方开发商也很多.现在搭建一个商城网站容易,如何运营一个商城网站才是重点.下面就由YiShop说说电子商城网站建设要思考什么呢(1)建设网站的目的是什么首先 ...

  7. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  8. ECSHOP商城网站建设之自定义调用广告方法(二)

    原文地址:http://www.cnblogs.com/zgzy/p/3598991.html 使用ecshop进行商城网站建设时,ecshop默认的很多功能对于我们个性化设计之后不太使用.今天我们主 ...

  9. 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

    Web GIS系列: 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 使用GeoServer+QGIS发布WMTS服务 使用GeoSe ...

随机推荐

  1. vue $refs获取dom元素

    1.今天做vue项目有个获取dom节点,主要目的是获取节点让滚动到顶部 首先在滑动容器去添加ref <div class="contentScroll" ref=" ...

  2. 二叉树(Java实现)

    一.常见用语 1.逻辑结构:描述数据之间逻辑上的相关关系.分为线性结构(如,字符串),和非线性结构(如,树,图). 2.物理结构:描述数据的存储结构,分为顺序结构(如,数组)和链式结构. 3.结点的度 ...

  3. P1417 烹调方案(思维+01背包)

    (点击此处查看原题) 题意 有n种食材,每种食材有三个属性,ai,bi和ci,如果在t时刻完成第i样食材则得到ai-t*bi的美味指数,用第i件食材做饭要花去ci的时间.问在T时间内,什么样的烹调方案 ...

  4. 2019年十一月(CSP S游记及AFO)

    DAY-4 晚自习和班里以及搞OI的两个dalao商量了下决定停课了,当时觉得停得好晚,有的dalao都停一个月了.(现在感觉是明智的选择,我OI辣么菜还不如专注文化课) 晚上回家洗了个澡. DAY- ...

  5. Symfony4框架中单元测试和接口测试中的一些小坑

    前提说明: symfony 版本 4.1.*,使用  composer create-project symfony/website-skeleton  进行安装. 目标:在一个单元测试用例中对当前工 ...

  6. phpstudy 最新版linux 面板 web防火墙后门防护功能教程

    phpstudy linux 面板针对服务器和网站做了全面的安全防护措施,尽可能的防范网站被入侵,留置后门风险,本篇文章着重介绍phpstudy linux 面板其中的一项安全功能 [网站防火墙]之[ ...

  7. Java Volatile关键字(转)

    出处:  Java Volatile关键字 Java的volatile关键字用于标记一个变量“应当存储在主存”.更确切地说,每次读取volatile变量,都应该从主存读取,而不是从CPU缓存读取.每次 ...

  8. js变量声明提升

    1.变量提升 根据javascript的运行机制和javascript没有块级作用域这个特点,可以得出,变量会声明提升移至作用域 scope (全局域或者当前函数作用域) 顶部的. 变量声明提升至全局 ...

  9. 排好序的数组中,找出两数之和为m的所有组合

    public static void main(String[] args) { int[] a = {1,2,2,3,3,4,5,6}; int m = 6; normal(a, m); } //正 ...

  10. latex中文环境配置(针对北大模板,开题报告+中期答辩+毕业论文)

    最近自己在忙着开题,中文环境真的是emm 以下只针对北大的毕业论文模板,至于其他的中文环境没有尝试 主要是用不同的latex编辑器会报不同的错误,当然我最后还是统一成了pdflatex,经过无数次尝试 ...