jquery搭建电商管理平台项目--笔记

第一章 课程介绍与开发前的准备工作
第二章 开发环境搭建与开发工具使用技巧
第三章 项目初始化与基于模块化的脚手架搭建
第四章 项目通用功能开发
第五章 用户模块开发
第六章 商品模块开发
第七章 购物车模块开发
第八章 订单模块开发
第九章 支付模块开发
第十章 数据统计和SEO优化
第十一章 后台管理系统介绍
第十二章 项目线上部署与自动化发布
第十三章 总结与展望

通用部分
footer:底部,包含链接,版权
在这里插入图片描述
header-common:关键词、描述
在这里插入图片描述
header:logo、输入框、搜索按钮
在这里插入图片描述
nav-side:侧边导航

jquery搭建电商管理平台项目--笔记_第1张图片
nav-simple:就是一个头部logo
在这里插入图片描述
nav:包括登录、注册、购物车、订单链接等
在这里插入图片描述
另外:面包屑部分,镶嵌在每个页面中
在这里插入图片描述


用户模块

User-register:用户注册
jquery搭建电商管理平台项目--笔记_第2张图片
User-login:用户登录
jquery搭建电商管理平台项目--笔记_第3张图片
User-center:用户中心
jquery搭建电商管理平台项目--笔记_第4张图片
User-center-update:用户中心修改
jquery搭建电商管理平台项目--笔记_第5张图片
User-pass-update:修改密码
jquery搭建电商管理平台项目--笔记_第6张图片
User-pass-reset:找回密码
jquery搭建电商管理平台项目--笔记_第7张图片
Result:结果页,操作成功,注册成功,找回密码成功,都会跳到这一页
在这里插入图片描述


商品模块

index首页:包括轮播图,商品展示
jquery搭建电商管理平台项目--笔记_第8张图片
List:列表页面,搜索后或者点击链接后跳转到此页,可以选择价格排序

jquery搭建电商管理平台项目--笔记_第9张图片
Detail:商品详情页
jquery搭建电商管理平台项目--笔记_第10张图片


购物车模块
Cart:购物车
jquery搭建电商管理平台项目--笔记_第11张图片


订单模块
Order-comfirm:订单确认页,在购物车点击“去结算按钮”,跳转到此页,包括收货地址和商品清单
jquery搭建电商管理平台项目--笔记_第12张图片
Order-list:订单列表
jquery搭建电商管理平台项目--笔记_第13张图片
Order-detail:订单详情
jquery搭建电商管理平台项目--笔记_第14张图片


支付模块
Payment
出现一个二维码
jquery搭建电商管理平台项目--笔记_第15张图片
通用:
Footer-底部
Header-common:共用的头部标签
Header:头部
Nav-side:侧边导航
Nav-simple:一个logo
Nav:头部导航

用户:
User-login:登录
User-register:注册
User-center:用户中心
User-center-update:用户中心信息修改
User-pass-reset:找回密码
User-pass-update:修改密码

商品:
Index:首页
List:列表页
Detail:详情页

购物车:
Cart

订单:
Order-confirm
Order-detail
Order-list

支付:
Payment

结果页:result
关于页:about

问题总结:
1.跨域问题的解决

课程中使用的是charles和fiddler,但是自己尝试的时候调试有问题,所以采用了在webpack.config.js文件中添加以下代码
jquery搭建电商管理平台项目--笔记_第16张图片
这样在请求服务器数据时,就将从http://localhost:8080发出的请求,变成了http://test.happymmall.com,就解决了跨域问题
jquery搭建电商管理平台项目--笔记_第17张图片
并将所有请求中的url进行如上的修改。

2.模板引擎-hogan.js
https://github.com/twitter/hogan.js
hogan基本语法:
jquery搭建电商管理平台项目--笔记_第18张图片
在这里插入图片描述
模板放在.string后缀的文件中,用html-loader解析

3 input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值
autocomplete =”off”将记住输入值关闭

4.unslider插件不能实现无缝滚动,swiper或者flexslider

5.在上面点击,是关键字搜索

jquery搭建电商管理平台项目--笔记_第19张图片
在这里插入图片描述
下面点击,是类别搜索
jquery搭建电商管理平台项目--笔记_第20张图片
在这里插入图片描述
6.将分页组成一个构造函数,使用时,用该构造函数新建一个对象

jquery搭建电商管理平台项目--笔记_第21张图片
7.省份城市的二级联动
jquery搭建电商管理平台项目--笔记_第22张图片

你可能感兴趣的:(jquery搭建电商管理平台项目--笔记)