# WMSC_project

**Repository Path**: htmhl/wmsc_project

## Basic Information

- **Project Name**: WMSC_project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-19
- **Last Updated**: 2021-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#完美商城官方网站
这是一个pc端官网，所用到的技术有 jquery gulp require 等等
- 首页
- 列表页
- 详情页
- 购物车
- 登录
- 注册

改造项目
    1.把所有的路径全部改成绝对路径
    2.记得每次开始改造项目，要先gulp一下
    3.记得每次完成一个项目改造，都要上传到git仓库
    4.在改造项目之前，记得必须全局安装一下gulp

##首页
  ### 头尾部复用
   - 在index.html里面，把header和footer部分分别提出来
   - 记得在此之前，去js文件夹里面新建一个config.js文件(用来管理所有路径的)
   - 在html文件夹里新建header和footer的html文件
   - 把index.html里头尾部分分别移到这两个文件夹里
  ### 头尾部复用-list改造
  - 把首页里导航部分的a标签地址改成list关联地址
  - 把list里面的路径改为绝对路径
  - 新建list.js文件(注意：一个页面引入一个js文件)
  - 按照之前头尾部复用方法引用即可
  ### 项目集成Swiper
  - 去swiper官网，找到所需的文档演示
  - 找到源代码部分
  - 复制html部分的Swiper代码
  - 来到index.html首页，找到banner轮播部分
  - 删掉之前banner部分代码，并把复制的代码粘贴至此处
  - 记得引入swiper-bundle.min.css文件
  - 去index.js文件，把官网里面script部分里面的代码复制粘贴至此处
  - 记得在require里引入swiper,并在后面箭头函数里接收一个参数，(首字母大写哦)

  ### 请求数据，渲染页面
  - lib文件夹下，新建mock.json
  - (注意：里面是一个对象，且不能使用单引号)
  - 去到index.js文件init()方法下添加发送$.ajax请求代码
  - 记得引用jquery
  - 注意：只要在lib 文件夹里有改动，都需要在后台gulp一下

  ### art-template渲染页面
  - 模板引擎
  - 去config.js里面先配置一下template
  - 去index.js里面引入template，要接收一个参数哦、
  - 在获取数据下面添加渲染函数，并定义一个html，template里面的参数('id',{模板参数})
  - 模板参数形式：属性名：属性值 eq:{res:list}
  - 在init()里面添加判断函数，引入渲染函数
  - 在index.html里面，把要渲染的部分剪切
  - 在渲染框架外面，用script渲染模板，
  - 改造开始时要循环遍历一遍{{each list item}} 把剪切内容放这里 {{/each}}
  - 把mock.json里面的内容引入过来，
  - 在需要修改的地方用这种形式{{item.xx}}修改
  - 注意：xx可以是img、title、desc  (反正是mock.json里面的东西)
  - 最后不要忘了gulp一下哦

  ### rap2模拟数据
 - 首先注册登录该网站
 - 其次新建仓库和接口
 - 点击编辑，模拟数据
 - 创建完成，点击保存
 - 点开链接，复制地址
 - 去index.js文件粘贴到请求数据url部分
 - 记得去constructor调用一下
 - 接着记得渲染
 - 对了，还要去index.html里面定义模板

  ### 熊猫优选，请求真实数据(渲染导航栏)
  - 把优选官网改成移动端
  - 去network 后端查看数据
  - header.js请求数据
  - 记得引用template,并传参
  - 因数据太多，可使用split截取所需数据
  - 渲染调用

  ### 改造请求集中管理
   - 在js文件夹里面新建request.js文件
   - define一个函数对象
   - 把之前请求数据部分全部剪切拿过来
   - 记得在$.ajax之前return
   - 把他们的地址相同的部分拿到constructor里面用this.baseUrl=''
   - 把要使用的地址的相同部分，用模板字符串包裹
   - 把相同部分用${this.baseUrl}表示
   - 记得要去config.js里面配置一下req
   - 并去各个页面要用到req的js里面引入req并传参
   - 在原先请部分位置即.then前面调用req.getxxx

## 读取列表页数据(通过地址栏传id)
   - 去request.js里面请求数据
   - 去list.js里面引用传参并调用req
   - 记得还要引用一下template，并传参
   - 去list.html里面定义模板即可
   - 最后还要引用一下jquery哦（去list.js）

## 读取详情页数据
  - 头尾部复用
  - 新建details.js 并在details.html里引入
  - 在details.js里面添加require获取调用渲染
  - 去request.js里面请求数据
  - 返回.js里面引入req和template
  - 去details.html里面定义改部分模板，即可

## 改造购物车页面
  - 绑定事件点击改变数量
  - 点击加入购物车
  - 渲染购物车页面
  - 计算总量和总价
  - 绑定事件，点击删除

  ### gulp解决跨域问题
  - 使用插件http-proxy-middleware (中间插件)
  - 现在后台npm i http-proxy-middleware 安装一下
  - 去gulpfile.js里面修改配置文件
  - 引入、调用
  - 重新gulp

  ### 头部购物车数量显示
  - 与之前计算总量和总价一样的步骤
  - 注意：每次都要先清空一下
  - 即就是让this.count和this.price刚开始都为0哦

  ### 全选功能
  - 与之前步骤一样
  - 需要注意的是：
  - 多个设计选项，类名不要重复，否则会被覆盖
  - 如果相同设计选项，获取时要么用循环
  - 要么[0],[1]......写

## 登录、注册
 - 记得要先把页面的路径改为绝对路径
 - 记得要引入跳转页面的路径 

## 修整部分
 - 要认真检查每一个页面代码的“{}”
 - 一定要注意的是：遇到问题不要慌，慢慢来
 - 相信我，到最后幸运女神一定会眷顾你的！
 - 欲速则不达哦