Web学员作品-服装商城项目

项目名称： 服装商城

项目描述：这是一个售卖服装的商城，用户可以进行登录，注册，在登录后，用户可以在商城中选购服装，搜索到适合的码数，款式，加入购物车，下单购买。

功能模块：

首页——商品的展示，活动的展示

登录页面——商城用户登录的页面

注册页面——商城用户注册的页面

商品列表页面——商城所有商品的展示页面

商品详情页面——某一个商品的详情页面

购物车页面——加入购物车后所有的商品

每个模块实现的功能：

首页：首页包含了轮播图;商品搜索的组件，输入关键词，可以在数据库中查询相应的商品，同时跳转到商品列表页面展示出来;楼层滚动。

登录页面：根据用户输入的账号密码，判断是否登录成功。

注册页面：如果用户没有登录，是不能加入购物车的，则会跳转到注册页面，需要输入账号名和密码进行注册。

商品列表页面：根据数据库查询出来的数据，显示在网页中，如数据超过12条，会分页显示。每一个商品对应不同的商品id，点击后都会根据相应的id跳转到相应的商品详情页面中。

商品详情页面：有小图片和中图片的切换，还有放大镜的功能，可以选择相应的尺寸和数量，加入购物车。在下方还有3个选项卡，商品详情和商品评论页面，商品咨询页面。

购物车页面：实现了所有商品的全选和价格计算，最后根据最终的商品点击提交订单按钮。

数据库设计：

用户表，商品表，商品详情表，购物车表，商品评论表，商品咨询表

所用框架和技术：

该项目数据库使用mysql，后端使用node.js，前端使用vue脚手架搭建而成。

后端使用express搭建服务器，引入mysql模块，使用连接池连接mysql数据库，同时引入cors解决跨域的问题，express-sesiion写入服务器缓存，body-parse中间件。

前端使用vue-cli脚手架搭件项目，组件化开发，分为header,footer,body,login,register,details,products,searchDetails,selectAll,cart这些组件。引入了router模板实现路由跳转，axios发送http请求，vueX状态管理，vue2.0-zoom放大镜。

登录后会将登录状态和用户名写入vueX中，在其他组件中获取到数据和登录状态。服装的大小有5种，在数据库中以数字的形式存在，所以还设置了全局的过滤器。

在购物车中绑定全选按钮时，使用了watch深度监听。

引用了stylus完成css代码的编写。