wefwef

[zhengwei1949]

前置内容

• 相关笔记

  • word目录笔记查看方式
    1. wps 视图 --> 文档结构图 --> 靠左
    2. word 视图 --> 导航窗格
  • markdown笔记

• 项目搭建

  1. 导入数据库
  2. 开启项目
  3. 测试项目是否运行正常

• 账号密码

  • 前台 http://localhost:3000/mobile/index.html itcast 111111
  • 后台 http://localhost:3000/admin/login.html root 123456

• 报错说明

  • {"message":"Not Found","error":{"status":404}}如果出现这样的错误提示，是因为你找的文件不存在

• 项目开发注意事项 1、一定要确保phpStudy是绿的启动中 2、一定要确保CMD终端不要关了 3、不能以file协议（说得直白就是不能双击打开页面） 4、js报错 --> 排除法，一行一行js的删除，直到不报错为止，再检查删了的代码哪行错了

• 项目文件说明

letao
  - public
    + mobile 演示前台代码
    + admin 演示后台代码
    + m 我们写代码的地方

• 英语单词

  • search 搜索
  • category 分类
  • index 索引、首页
  • product 商品、产品
  • common 公用的
  • user 用户
  • shopping cart 购物车
  • login 登录
  • manage 管理

• 02-开发模式.avi

  • 传统开发方式 前端写静态页面 --> php后台从数据库中查询数据 --> 修改静态页面变成php,html混编
  • 前后端分离开发方式 php后台写好接口 --> 前端写好静态页面 --> 前端使用ajax请求回来数据 --> 前端使用art-template渲染好页面
  • 传统开发方式的缺点 分工不明确、容易出现人为的错误
  • 前后端开发方式的优点 职责单一、提升开发效率
  • 查看乐淘接口文档(乐淘接口文档.doc)
  • 通过postman来测试接口数据是否ok
  • 开发思维：要数据，就去看接口文档去找，不要试图去看后台的代码，那是后台人员的事情

• bootstrap复习(bootstrap相关知识点文件夹)

  • 使用(1.基础模板.html)
    1. 引入bootstrap.css,jquery.js,bootstrap.js
  • 栅格(2.栅格.html 3.栅格-全屏.html)
    1. md指的临界断点是992px
    2. container 宽1170px,居中
    3. container-fluid 全屏
  • 文字对齐(4.文字对齐.html)
    1. text-left
    2. text-right
    3. text-center
  • 浮动(5.浮动.html)
    1. 左浮动 pull-left
    2. 右浮动 pull-right
    3. 清除浮动 clearfix
    4. 基本上样式上出现很怪异的问题都要找是不是忘记清浮动了
  • 图标(7.glyphicons图标.html)
    1. http://v3.bootcss.com/components/

• 说明

  • bootstrap是用来制作响应式的(响应式的主要目的是为了pc端服务，顺便让手机端适配)
  • 参考网址：https://products.office.com/zh-cn/compare-all-microsoft-office-products?tab=1
  • 我们这里只需要考虑移动端，所以用bootstrap不合适 ---> mui框架

• 07-mui框架基本介绍1.avi

  • 1.1倍速度
  • mui：移动端UI框架
  • http://dev.dcloud.net.cn/mui
  • 如何使用mui的代码
    1. 去看文档参考代码
       • http://dev.dcloud.net.cn/mui/ui/#icon
       • 制作helloworld案例(见sample_code/1.mui_helloworld.html文件)
       • 再好的文档也可能写得马虎，有些东西查不到怎么用(轮播图 见sample_code/2.mui_helloworld.html文件(不能连接轮播)+见sample_code/3.mui_helloworld.html文件(可以连接轮播，但没有小圆点))
    2. 如果是纯静态 --> 审查元素 --> copy outer html(比如图标)
    3. 如果涉及到动态 --> 审查元素 --> 查看对应的源代码(比如轮播图上的小圆点)
    4. 代码报错的原因：缓存 > 使用错了 > 版本不一致 > mui自身存在的问题
    5. 如果遇到了问题，去论坛 http://ask.dcloud.net.cn/explore/category-3
    6. 论坛上查不到的话去使用google,百度搜索自己遇到的问题
  • mui使用注意事项(http://ask.dcloud.net.cn/article/122)
    1. 点击：忘记click
    2. 页面跳转：抛弃href跳转(http://ask.dcloud.net.cn/question/8607) 见sample_code/4.mui_helloworld.html

前台

制作思路说明

制作静态页面 --> 使用ajax根据接口文档从后台获取数据 --> 渲染页面 --> 添加事件

静态页面布局

• 说明：

  1. 这里没有提供750或640的设计稿，所以rem布局没办法用，同时这块的布局比较简单，所以用了百分比布局
  2. 视频中的思路并不是唯一的，因为是在做移动端，所以不考虑兼容性，大家不一定都用float来实现，可以用flex布局自己来写，并不一定要按视频中思路来写

• 07-头部底部公共样式制作_2.avi(视频不用看)

  • 说明要制作哪块区域
  • 思路 (参考hello-mui/examples/tabbar.html)
    • 头部
    • 底部
  • 制作步骤

• 08-1-项目公共样式制作.avi

  • 制作步骤
    1. m/css/目录创建base.css文件
    2. 给头部添加类名myheader,修改头部和底部的背景颜色(#006699;)
    3. 修改头部文字颜色(.my-header h1{color:#fff;})
    4. 删除左侧返回图标，添加右侧搜索图标
    5. 修改图标颜色
    6. 添加图标
       • 关于图标录有一个视频(四种字体图标的用法.wmv)
       • 这块大家可以和视频中一样使用font-awesome图标
       • 或者使用mui扩展图标(examples/icons-extra.html)
         1. 第一步、引入icons-extra.css
         2. 第二步、添加图标(<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>)
    7. 修改mui-active的颜色

• 08-2-控制台提示说明.avi

  • 参考链接：https://www.cnblogs.com/ziyunfei/p/5545439.html
  • 理解：
    1. touchstart默认行为阻止掉是页面不能滚动了(sample_code/5.passive.html)
    2. 浏览器需要花时间确定是否touchstart事件的默认行为被阻止了
    3. 基本上没有人会阻止touchstart的默认行为
    4. 所以这个浏览器的等待时间浪费了
    5. 可以通过{passive:true}来设置忽略检测默认行为(sample_code/6.passive.html)
    6. 解决办法:为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。(sample_code/7.passive.html)
    7. 如果想去掉，也是可以的，但是没有意义((sample_code/8.passive.html))

• 09-实现首页轮播图.avi

  • 制作步骤
    1. 把template.html的代码拷贝一份给index.html
    2. 在hello-mui文件夹中找到轮播对应的代码，拷贝过来
    3. 修改图片路径
    4. 添加js代码让其自动轮播

• 10-实现首页导航链接.avi

  • 思路：
    1. 可参考：http://m.duba.com --> 左浮动 参考：sample_code/9.jiugongge_1.html
    2. 可以用flex布局：参考sample_code/10.jiugongge_1.html
  • 制作步骤

• 11-实现首页品牌专区布局.avi

  • 思路：
  • 制作步骤

• 12-实现产品布局.avi

  • 思路：
    1. 制作阴影工具：http://tools.jb51.net/aideddesign/css3_boxshadow
  • 制作步骤

• 01-实现分类页面架构布局.avi

  • 思路：(把这块原理搞懂，接下来几个视频就好理解)
    1. 往右拖动发现这个页面的布局是左侧固定宽度，右侧自适应
       • 思路：左侧浮动+右侧margin-left
    2. 左侧的高度和右侧高度只有去掉最上头和最下头的高，里面的内容在中间进行区域滚动
    3. 掌握mui的区域滚动如何实现
       • 参考sample_code/11.mui_scroll.html
       • 区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）--> 中间区域高度要排除掉上面和下面的高度 --> 假如我们要让中间区域高度是100%的话，有两种思路：
         1. 利用height:100%; 参考sample_code/12.html
         2. 利用position:absolute 参考sample_code/13.html
       • 实现头部、中间部分、底部三等分的方法：参考sample_code/14.html
  • 制作步骤
    1. 拷贝template.html到category.html

• 02-实现分类页面区域滚动.avi

  • 思路：
  • 制作步骤

• 03-实现分类页面左侧布局.avi

  • 思路：
  • 制作步骤

• 04-实现分类页面右侧布局_1.avi

  • 思路：
  • 制作步骤

• 后面涉及到样式布局这块不看视频了，大家自行参考示例代码完成

  • 搜索中心页
    1. 左右拖动可以发现form表单是自适应的，最右边的提交按钮固定宽度
  • 搜索结果页
    1. 筛选条百分比布局
    2. 下面部分和首页的产品区域一样，直接拷贝过来即可
  • 登录静态页面
    1. 参考：http://dev.dcloud.net.cn/mui/ui/#input
  • 个人中心页面
    1. 参考hello-mui/examples/media-list.html
  • 商品详情页
    1. 参考：http://dev.dcloud.net.cn/mui/ui/#numbox
  • 购物车静态页
    1. 参考：hello-mui/examples/tableviews-with-swipe.html

art-template原生语法学习

• 参考地址：http://aui.github.io/art-template/zh-cn/docs/syntax.html
• 如何理解：和php的php,html混写有点类似

分类功能模块

• 思路
  1. 左侧一级分类在页面加载的时候就通过ajax从后台获取数据渲染
  2. 右侧二级分类点击的时候根据左侧对应的id值去后台获取数据
  3. 默认第一个一级分类对应的二级分类的数据显示在右侧

     搜索中心

• 思路
  1. 我们如果对一个功能不知道怎么做的，可以没事看一看网上的一些知名的网站，
     • B站
     • https://www.zhihu.com
  2. 复习localStorage
     • localStorage.setItem
     • localStorage.getItem
     • localStorage.clear
  3. localStorage只能用于存储字符串类型的数据，如果想要存储复合数据类型怎么办??
  4. 当搜索中心页打开的时候，从本地存储中把数据读取出来，解析成功之后，渲染到页面当中
  5. 在input输入框输入内容，点击搜索，在跳转之前，把最新的搜索数据记录到本地存储当中

     搜索结果

• 思路
  1. 后台php接收数据用$_GET
  2. 前端如何获取参数值?
     • URLSearchParams构造函数(参考code_sample/15.urlSearchParams.html)
  3. 上拉加载 (参考code_sample/16.html)
  4. 分页
  5. 筛选

     会员中心模块

商品详情模块

购物车模块

TODO:

1. 商品排序
2. 个人中心
3. 商品详情

后台