项目介绍1.作为一个前端菜鸟,每次看到很多高手在Github上分享自己的项目,心都快要动起来了。这次我终于下定决心,要给自己一段时间,完成我的项目一个属于自己的作品。2.于是在查了很多资料,思考了技术选型后,最终决定做一个web全栈网站来展示产品。3、通过节点爬虫获取本网站的商品名称、商品价格、商品价格等商品信息,然后根据自身需求设计数据库模型,将获取的数据导入展示。网站实现了一般商场最基本的功能:注册、登录和退出功能,购物车的添加和修改,前端实时计算和显示购物车数量,地址列表的添加和删除,生成订单列表,下单和查询下单成功等功能。当然,本网站还有很多功能需要完善和增加,之后我们会继续完善本网站。4.在这个过程中遇到了很多困难,当我经常告诫自己需要冷静下来,理清问题,并查阅相关文件和问题,找到问题,记录下来,然后整理这个项目的个人经验。遇到的问题和解决办法。幸运的是,问题已经解决,项目已经部署成功。线上地址展示线上前端项目地址:HuskyMarketGithub地址:Husky代码安装部署#克隆地址gitclonehttps://github.com/husky0601/js-full-stack-mall.git#进入项目文件cdjs-full-stack-mall#安装依赖npminstall#运行项目npmrundev技术栈前端:SVG+Sass+Flex+Vue全家桶(vue+vuex+vue-router+axios)+webpack后端JS:Node.js+ExpressDatabase:Mongodb+mongoose项目架构前端vue项目架构├──build//webpack配置文件├──config//项目打包路径├──src//源码目录├──assets//style目录│├──components//通用组件│├──Header.vue//头部组件││├──Bread.vue//面包屑导航组件││├──Footer.vue//底部组件││├──模态。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//表达主文件├──package.json//依赖文件基础功能前端功能响应式布局--完成注册,登录、注销--完成加入购物车、购物车结算--完成地址增删--完成订单功能--完成商品详情--未完成商品分类展示--未完成个人中心--未完成.....想想ING后台功能全局登录拦截--完成用户注册、登录、注销--完成商品筛选、查询--完成购物车列表的增、改、删--完成订单生成、查询--完成商品详情图片的获取--未完成订单管理——未完成...思考
