个人的web商城网站

pingink 发布于2019-08-01 18:36 / 536人阅读

摘要：于是在查找了大量资料，思考着技术选型，终于决定做一个展现商品的全栈网站。当然这个网站还有许许多多需要完善并增加的功能，在此之后也会不断去完善这个网站。所幸的是问题都已经解决，项目也顺利部署。

项目介绍

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

idc机房托管私有云个人商城网站源码个人商城源码个人域名的网站个人网站的域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51853.html

个人的web商城网站

摘要：于是在查找了大量资料，思考着技术选型，终于决定做一个展现商品的全栈网站。当然这个网站还有许许多多需要完善并增加的功能，在此之后也会不断去完善这个网站。所幸的是问题都已经解决，项目也顺利部署。项目介绍 1、作为前端的菜鸟，每每看到Github上有很多大神分享着自己的项目时，内心都是蠢蠢欲动，这次终于下定决心要给自己一段时间来完成属于自己的一份作品。2、于是在查找了大量资料，思考着技术选...

quietin 2019-08-26 11:43 评论0 收藏0
Java3y文章目录导航

摘要：前言由于写的文章已经是有点多了，为了自己和大家的检索方便，于是我就做了这么一个博客导航。前言由于写的文章已经是有点多了，为了自己和大家的检索方便，于是我就做了这么一个博客导航。由于更新比较频繁，因此隔一段时间才会更新目录导航哦～想要获取最新原创的技术文章欢迎关注我的公众号：Java3y Java3y文章目录导航 Java基础泛型就这么简单注解就这么简单 Druid数据库连接池...

KevinYan 2019-08-15 15:13 评论0 收藏0
后端技术精选 - 收藏集 - 掘金

摘要：使用签署免费证书后端掘金本文操作在操作系统下完成，需要和超文本传输安全协议英语，缩写，常称为，红黑树深入剖析及实现后端掘金红黑树是平衡二叉查找树的一种。使用 Lets Encrypt 签署免费 Https 证书 - 后端 - 掘金本文操作在Linux操作系统下完成，需要Python和Nginx 超文本传输安全协议（英语：Hypertext Transfer Protocol Sec...

Meils 2019-08-16 10:31 评论0 收藏0
后端技术精选 - 收藏集 - 掘金

摘要：使用签署免费证书后端掘金本文操作在操作系统下完成，需要和超文本传输安全协议英语，缩写，常称为，红黑树深入剖析及实现后端掘金红黑树是平衡二叉查找树的一种。使用 Lets Encrypt 签署免费 Https 证书 - 后端 - 掘金本文操作在Linux操作系统下完成，需要Python和Nginx 超文本传输安全协议（英语：Hypertext Transfer Protocol Sec...

时飞 2019-07-16 16:26 评论0 收藏0
一次Oday提权批量拿取商城服务器root权限

摘要：通过多年的开发经验和之前的渗透常识，很明显漏洞还在于是在百度上找来一张图片，并通过的合并命令将图片与一句话木马捆绑在一起。咚咚咚此处省略分钟捡懒直接在百度搜了一个过狗马传了上去经理人分享有。最后感谢指尖安全网友提供的本次测试漏洞。此问题影响范围巨大，涉及到所有通过niushop开发的商城，希望通过这篇文章能够引起大家的重视。（注：演示的所用商城已经修复了此漏洞）严重性：特级解决方...

TANKING 2019-07-31 14:51 评论0 收藏0