不一样的花朵的博客

移动App第4天组件的生命周期概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOMrender：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟

移动App第3天ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。libraryFramework前端三大主流框架Angular.

移动App第2天webpack的发布策略在实际开发中，一般会有两套项目方案：一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置

移动App第1天什么是混合移动App开发【重点】苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东前端移动 App（Application）开发技术，去开发手机端的应用程序；前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的

今日目标1.Vuex概述2.Vuex基本使用3.使用Vuex完成todo案例1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新2.Vuex的基本使用创建带有vuex的vue项目，打开终端，输入命令：vue ui当项目仪表

今日目标1.完成项目优化2.完成项目上线1 .项目优化实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制2.添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'....

今日目标1.完成商品添加2.完成订单列表3.完成数据统计展示1.添加商品A.完成图片上传使用upload组件完成图片上传在element.js中引入upload组件，并注册因为upload组件进行图片上传的时候并不是使用axios发送请求所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性//在页面中添加upload组件，并设置对应的事件和属性<el-tab-pane label="商品图片" name="3"> <!--

今日目标1.完成参数管理2.推送代码到码云3.制作商品列表页面4.制作商品添加页面1.参数管理A.展示动态参数可选项动态参数可选项展示及操作在获取动态参数的方法中进行处理。//将获取到的数据中的attr_vals字符串转换为数组res.data.forEach(item => { item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] //添加一个bool值控制文本框的显示或者隐藏 item.in

今日目标1.完成商品分类2.完成参数管理1.商品分类A.新建分支goods_cate新建分支goods_cate并推送到码云git checkout -b goods_categit push -u origin goods_cateB.创建子级路由创建categories子级路由组件并设置路由规则import Cate from './components/goods/Cate.vue'path: '/home', component: Home, redirect: '/welc

今日目标1.修改用户,删除用户2.推送代码到码云3.权限列表4.角色列表5.分配角色1.修改用户信息A.为用户列表中的修改按钮绑定点击事件B.在页面中添加修改用户对话框，并修改对话框的属性C.根据id查询需要修改的用户数据//展示编辑用户的对话框async showEditDialog(id) { //发送请求根据id获取用户信息 const { data: res } = await this.$http.get('users/' + id) //判断如果添加

今日目标1.实现后台首页的基本布局2.实现左侧菜单栏3.实现用户列表展示4.实现添加用户1.后台首页基本布局打开Home.vue组件，进行布局：<el-container class="home-container"> <!-- 头部区域 --> <el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header>

1.电商业务概述客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈：Node.js,Express,Jwt(模拟session),Mysq

1.模块化的分类A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.jsB.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成

1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路

接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函数promise主要解决异步深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容

组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-

Vue常用特性表单基本操作获取单选框中的值通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了 --> <input type="radio" id="m

Vue 是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */

1. 模板引擎文档：http://aui.github.io/art-template/zh-cn/Github: https://github.com/aui/art-template1.1 Ajax 项目中存在的问题数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。业务逻辑和用户界面混合，代码不易维护。for (var i = 0; i < result.length; i++) { html += '<!DOCTYPE html>\ &

项目简介阿里百秀，内容管理系统，分为内容管理和内容展示两大核心功能。1. 功能模块1.1 内容管理模块功能用户登录、退出、用户增删改查文章文章管理分类分类管理评论评论管理网站设置关键字、描述、网站logo、轮播图1.2 内容展示模块功能首页导航、文章数据展示列表页根据分类显示文章列表详情页文章详情数据展示、实现评论功能2. 开发模式2.1 前后端混合开发模式所有HTML代码和数据在服务器端拼

1. Git基础1.1 版本管理1.1.1 什么是版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制，不方便多人同时编辑同一个文档，容易产生覆盖1.2 Git 是什么Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。1.3 Git 安装下载地址在安装的过程中，所

ES6语法目标能够说出使用let关键字声明变量的特点能够使用解构赋值从数组中提取值能够说出箭头函数拥有的特性能够使用剩余参数接收剩余的函数参数能够使用拓展运算符拆分数组能够说出模板字符串拥有的特性ES6相关概念（★★）什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加

JavaScript高级第04天1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式，本阶段

JavaScript高级第03天1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数

JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的

JavaScript高级第01天笔记1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低

03 - jQuery学习目标：能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册​ jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，

02 - jQuery学习目标：能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置1.1. jQuery 属性操作​ jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop()​ 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。语法​ 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled /

01 - jQuery学习目标：能够说出什么是 jQuery能够说出 jQuery 的优点能够简单使用 jQuery能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 jQuery 选择器能够操作 jQuery 样式能够写出常用的 jQuery 动画1.1. jQuery 介绍1.1.1 JavaScript 库​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函

07 - Web APIs学习目标:能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（

06 - Web APIs学习目标:能够封装简单动画函数能够理解缓动动画的封装能够使用动画函数能够写出网页轮播图案例能够写出移动端触屏事件**1.1. **动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是： 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整1.1.

05 - Web APIs学习目标:能够说出常见 offset 系列属性的作用能够说出常见 client 系列属性的作用能够说出常见 scroll 系列属性的作用能够封装简单动画函数**1.1. **元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位1.

04 - Web APIs学习目标：能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用history提供的方法实现页面刷新1.1. 常用的键盘事件1.1.1 键盘事件 <script>

03 - Web APIs学习目标：能够使用removeChild()方法删除节点能够完成动态生成表格案例能够使用传统方式和监听方式给元素注册事件能够说出事件流执行的三个阶段能够在事件处理函数中获取事件对象能够使用事件对象取消默认行为能够使用事件对象阻止事件冒泡能够使用事件对象获取鼠标的位置能够完成跟随鼠标的天使案例1.1. 节点操作1.1.1 删除节点node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button&g

02 - Web APIs学习目标：能够说出排他操作的一般实现步骤能够使用html5中的dataset方式操作自定义属性能够根据提示完成百度换肤的案例能够根据提示完成全选案例能够根据提示完成tab栏切换案例能够区分元素节点、文本节点、属性节点能够获取指定元素的父元素能够获取指定元素的所有子元素能够说出childNodes和children的区别能够使用createElement创建页面元素1.1. 排他操作1.1.1 排他思想如果有同一组元素，我们想要某一个元素实现某种样式

01 - Web APIs学习目标：能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改元素的内容能够区分innerText和innerHTML的区别能够修改像div这类普通元素的属性能够修改表单元素的属性能够修改元素的样式属性1.1. Web API介绍1.1.1 API的概念API（Application Programming Interface，应用程序编程接口）是

JavaScript基础第06天笔记1 - 内置对象1.1 内置对象​ JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象​ 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发​ JavaScript 提供了多个内置对象：Math、 Da

JavaScript基础第05天笔记1 - 作用域1.1 作用域概述通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（es6前）中的作用域有两种：全局作用域局部作用域（函数作用域）1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。1.3 局部作用域作用于函数内的代码环境，就

JavaScript基础第04天笔记1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.2 创建数组JS 中创建数组有两种方式：利用 new 创建数组var 数组名 = new Array() ；var arr = new Array(); // 创建一个新的空数组注意 Array () ，A 要

JavaScript基础第03天笔记1 - 循环1.1 for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){//循环体}| 名称 | 作用 || ---------- | ------------------------------------------------------------ || 初始化变量 | 通常被用于初始化一个计数

JavaScript基础第02天1 - 运算符（操作符）1.1 运算符的分类运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有：算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.2 算数运算符算术运算符概述概念：算术运算使用的符号，用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。var result =

JavaScript基础第01天1 - 编程语言1.1 编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。1.2 计算机语言计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。

移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和

移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size:

移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活

移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Web

一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤：给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(transform-origin)transform-origin 基础语法transform-origin: x y;重要知

一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值二、3D 转换3D 转换知识要点3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom-style

一、什么是 HTML5HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 的现状绝对

1. 品优购项目(四)1). 详情页 detail.html 常用单词名称说明主体de_container面包屑导航crumb_wrap产品介绍product_intro （ introduction介绍）预览包preview_wrap（左侧部分）预览缩略图preview_img预览列表preview_list左按钮arrow_prev右按钮arrow_next小图列表preview_items产品详细信息

品优购项目(三)1. 首页制作1). 楼层区 floor注意这个floor 一个大盒子 包含， 不要给高度，内容有多少，算多少2). 家用电器模块这个模块 jiadian 不需要写样式版心居中对齐 因为这些模块 基本相同，下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是：1号盒子 box-hd 给一个高度， 有个下边框 里面分为左右2个盒子2号盒子 box-bd 不要给高度。3). box-hd 模块有高度左边 h3 盒子

品优购项目(二)目标：能课堂跟上pink老师的节奏完成品优购项目1. 品优购首页布局命名集合：名称说明快捷导航栏shortcut头部header标志logo购物车shopcar搜索search热点词hotwrods导航nav导航左侧dropdown 包含 .dd .dt导航右侧navitems页面底部footer页面底部服务模块mod_service页面底部帮助模块mod_hel

品优购项目(一)目标：能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 )能说出我们css属性书写顺序能课堂跟上pink老师的节奏完成品优购项目1. 品优购项目介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作2. 项目背景现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，复习、总结、提高前面所学布局技术。3. 设计目标保证浏览器 ie7及以上,

代码规范1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代

CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！1.1 display 显示（重点）display 设置或检索对象是否及如何显示。display: none 隐藏对象display：b

定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：普通流（标准流）浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置 自由的漂浮在其

1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。pink老师：取义学有所成，为师之期望，君等成才者也，故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件开发工具 = PS（切图） + sublime（代码） + chrome（测试）1.2 前期准备工作

1. 浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：di

盒子模型（CSS重点）css学习三大重点： css 盒子模型 、 浮动 、 定位主题思路：目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整

今日重点：复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个

第01阶段.前端基础CSS 第二天今天我们围绕一个 导航栏案例进行学习知识点。今日重点：复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快.

CSS字体样式属性调试工具目标应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常用的emment语法能够使用开发人员工具代码调试1.font字体1.1 font-size:大小作用：font-size属性用于设置字号p { font-size:20px; }单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。注意：我们文字大小以后，

第01阶段.前端基础.CSS基础选择器CSS选择器（重点）学习目标：理解能说出选择器的作用id选择器和类选择器的区别应用能够使用基础选择器给页面元素添加样式1. CSS选择器作用（重点）如上图所以，要把里面的小黄人分为2组，最快的方法怎办？很多， 比如 一只眼睛的一组，剩下的一组选择器的作用​ 找到特定的HTML页面元素pink老师一句话说出他们： ※※※※**CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来 ** 必须记住的css.

第01阶段.前端基础.CSS初识CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.HTML的局限性说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义，比如表明这是一个大标题，用 表明这是一个段落，用 表明这儿有一个图片， 用 表示此处有链接。很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： 丑。这个是一个外国比较早的购物网站有些人就忍受不了了，你就不能把自己.

第01阶段.前端基础.列表和表单1. 列表标签（重点）学习目标理解无序列表的应用场景自定义列表的应用场景应用无序列表语法自定义列表语法问？前面我们知道表格一般用于数据展示的，但是网页中还是有很多跟表格类似的布局，如下图~~ 我们用什么做呢？答：答案是列表， 那什么是列表？ 表格是用来显示数据的，那么列表就是用来布局的。 因为非常整齐和自由概念：容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表特点：列表最大的特点就是 整齐 、整洁、.

HTML 第二天目标能够利用表格、列表和表单完成注册页面的综合案例能出说表格用来做什么的能说出列表用来做什么的能说出表单用来做什么的为了让我们页面显示的更加整齐，我们需要学习三个表（表格、表单、列表）表格 table(会使用)目标：理解：能说出表格用来做什么的表格的基本结构组成应用：能够熟练写出n行n列的表格能简单的合并单元格​表格作用：存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显

学习目标:了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签掌握H5新增表单和表单属性typora-copy-images-to: media认识网页网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。思考： 网页是如何形成的呢?常见浏览器介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷.

scrapy的crawlspider爬虫学习目标：了解 crawlspider的作用应用 crawlspider爬虫创建的方法应用 crawlspider中rules的使用1 crawlspider是什么回顾之前的代码中，我们有很大一部分时间在寻找下一页的url地址或者是内容的url地址上面，这个过程能更简单一些么？思路：从response中提取所有的满足规则的url地址自动的构造自己requests请求，发送给引擎对应的crawlspider就可以实现上述需求，能够匹配满

13.Gerapy学习目标了解 什么是Gerapy掌握 Gerapy的安装掌握 Gerapy配置启动掌握 通过Gerapy配置管理scrapy项目1.Gerapy介绍:​ Gerapy 是一款 分布式爬虫管理框架，支持 Python 3，基于 Scrapy、Scrapyd、Scrapyd-Client、Scrapy-Redis、Scrapyd-API、Scrapy-Splash、Jinjia2、Django、Vue.js 开发，Gerapy 可以帮助我们：​更方便地控制爬虫运行更直

scrapyd部署scrapy项目学习目标了解 scrapyd的使用流程1. scrapyd的介绍scrapyd是一个用于部署和运行scrapy爬虫的程序，它允许你通过JSON API来部署爬虫项目和控制爬虫运行，scrapyd是一个守护进程，监听爬虫的运行和请求，然后启动进程来执行它们所谓json api本质就是post请求的webapi2. scrapyd的安装scrapyd服务:pip install scrapydscrapyd客户端:pip install scrap

scrapy的日志信息与配置学习目标：了解 scrapy的日志信息掌握 scrapy的常用配置掌握 scrapy_redis配置了解scrapy_splash配置了解scrapy_redis和scrapy_splash配合使用的配置1. 了解scrapy的日志信息2. scrapy的常用配置ROBOTSTXT_OBEY 是否遵守robots协议，默认是遵守关于robots协议在百度搜索中，不能搜索到淘宝网中某一个具体的商品的详情页面，这就是robots协议在起作用Ro

scrapy_splash组件的使用学习目标了解 scrapy_splash组件的作用了解 scrapy_splash组件的使用1. 什么是scrapy_splash？scrapy_splash是scrapy的一个组件scrapy-splash加载js数据是基于Splash来实现的。Splash是一个Javascript渲染服务。它是一个实现了HTTP API的轻量级浏览器，Splash是用Python和Lua语言实现的，基于Twisted和QT等模块构建。使用scrapy-spla

scrapy_redis原理分析并实现断点续爬以及分布式爬虫学习目标了解 scrapy实现去重的原理了解 scrapy中请求入队的条件掌握 scrapy_redis基于url地址的增量式单机爬虫掌握 scrapy_redis分布式爬虫1. 下载github的demo代码clone github scrapy-redis源码文件git clone https://github.com/rolando/scrapy-redis.git研究项目自带的demomv scrapy-r

scrapy_redis概念作用和流程学习目标了解 分布式的概念及特点了解 scarpy_redis的概念了解 scrapy_redis的作用了解 scrapy_redis的工作流程在前面scrapy框架中我们已经能够使用框架实现爬虫爬取网站数据,如果当前网站的数据比较庞大, 我们就需要使用分布式来更快的爬取数据1. 分布式是什么简单的说 分布式就是不同的节点（服务器，ip不同）共同完成一个任务2. scrapy_redis的概念scrapy_redis是scrapy框架的

scrapy中间件的使用学习目标：应用 scrapy中使用间件使用随机UA的方法应用 scrapy中使用代理ip的的方法应用 scrapy与selenium配合使用1. scrapy中间件的分类和作用1.1 scrapy中间件的分类根据scrapy运行流程中所在位置不同分为：下载中间件爬虫中间件1.2 scrapy中间的作用：预处理request和response对象对header以及cookie进行更换和处理使用代理ip等对请求进行定制化操作，但在scrapy默认

scrapy模拟登陆学习目标：应用 请求对象cookies参数的使用了解 start_requests函数的作用应用 构造并发送post请求1. 回顾之前的模拟登陆的方法1.1 requests模块是如何实现模拟登陆的？直接携带cookies请求页面找url地址，发送post请求存储cookie1.2 selenium是如何模拟登陆的？找到对应的input标签，输入文本点击登陆1.3 scrapy的模拟登陆直接携带cookies找url地址，发送post请求存储co

scrapy数据建模与请求学习目标：应用 在scrapy项目中进行建模应用 构造Request对象，并发送请求应用 利用meta参数在不同的解析函数中传递数据1. 数据建模通常在做项目的过程中，在items.py中进行数据建模1.1 为什么建模定义item即提前规划好哪些字段需要抓，防止手误，因为定义好之后，在运行过程中，系统会自动检查配合注释一起可以清晰的知道要抓取哪些字段，没有定义的字段不能抓取，在目标字段少的时候可以使用字典代替使用scrapy的一些特定组件需要Item

scrapy的入门使用学习目标：掌握 scrapy的安装应用 创建scrapy的项目应用 创建scrapy爬虫应用 运行scrapy爬虫应用 scrapy定位以及提取数据或属性值的方法掌握 response响应对象的常用属性1 安装scrapy命令:    sudo apt-get install scrapy或者：    pip/pip3 install scrapy2 scrapy项目开发流程创建项目:    scrapy startproject mySpider

scrapy的概念和流程学习目标：了解 scrapy的概念了解 scrapy框架的作用掌握 scrapy框架的运行流程掌握 scrapy中每个模块的作用1. scrapy的概念Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。Scrapy 使用了Twisted['twɪstɪd]异步网络框架，可以加快我们的下载速度。Scrapy文档地址：http://scrapy-chs.readthedocs.io/zh_CN/1.0

mongodb和python交互学习目标掌握 mongdb和python交互的增删改查的方法掌握 权限认证的方式使用pymongo模块1. mongdb和python交互的模块pymongo 提供了mongdb和python交互的所有方法安装方式: pip install pymongo2. 使用pymongo2.1 导入pymongo并选择要操作的集合数据库和集合能够自动创建2.1.1 无需权限认证的方式创建连接对象以及集合操作对象from pymongo import M

Mongodb的权限管理学习目标1.了解 mongodb的权限管理1. 为什么要进行权限管理的设置刚安装完毕的mongodb默认不使用权限认证方式启动，与MySQL不同，mongodb在安装的时候并没有设置权限，然而公网运行系统需要设置权限以保证数据安全，所以我们要学习mongodb的权限管理2. mongodb的权限管理方案MongoDB是没有默认管理员账号，所以要先添加管理员账号，并且mongodb服务器需要在运行的时候开启验证模式用户只能在用户所在数据库登录(创建用户的数据库)，包

Mongodb的索引操作学习目标掌握 mongodb索引的创建，删除操作掌握 mongodb查看索引的方法掌握 mongodb创建唯一索引的方法1. 为什么mongdb需要创建索引加快查询速度进行数据的去重2. mongodb创建简单的索引方法语法：db.集合名.ensureIndex({属性:1})，1表示升序， -1表示降序3. 创建索引前后查询速度对比测试：插入10万条数据到数据库中插入数据：for(i=0;i<100000;i++){db.t1.in

mongodb的聚合操作学习目标了解 mongodb的聚合原理掌握 mongdb的管道命令掌握 mongdb的表达式1 mongodb的聚合是什么聚合(aggregate)是基于数据处理的聚合管道，每个文档通过一个由多个阶段（stage）组成的管道，可以对每个阶段的管道进行分组、过滤等功能，然后经过一系列的处理，输出相应的结果。语法：db.集合名称.aggregate({管道:{表达式}})2 mongodb的常用管道和表达式知识点：掌握mongodb中管道的语法掌握mongo

Mongodb的的增删改查学习目标掌握 mongodb插入数据的方法掌握 mongodb保存数据的方法掌握 mongodb查询数据的方法掌握 mongodb查询结果的处理方法掌握 mongodb更新数据的方法掌握 mongodb删除数据的方法1. mongodb插入数据命令：db.集合名称.insert(document)db.stu.insert({name:'gj', gender:1})db.stu.insert({_id:"20170101", name:'gj', ge

mongodb的简单使用学习目标掌握 服务端的启动掌握 客户端的使用掌握 mongodb的数据库和集合命令了解 文档中的_id字段1. mongodb服务端的启动默认端口：27017默认配置文件的位置：/etc/mongod.conf默认日志的位置：/var/log/mongodb/mongod.logmongodb服务端启动分别两种方式：本地测试方式的启动（只具有本地数据增删改查的功能）生产环境启动（具有完整的全部功能）1.1 测试方式启动启动: sudo se

Mongodb的介绍和安装学习目标了解 非关系型数据库的优势了解 mongodb的安装1. mongodb的介绍1.1 什么是mongodbmongodb 是一个功能最丰富的NoSQL非关系数据库。由 C++ 语言编写。mongodb 本身提供S端存储数据，即server；也提供C端操作处理（如查询等）数据，即client。1.2 SQL和NoSQL的主要区别在SQL中层级关系： 数据库>表>数据而在NoSQL中则是： 数据库>集合>文档1.2.1

JS的解析学习目标：了解 定位js的方法了解 添加断点观察js的执行过程的方法应用 js2py获取js的方法1 确定js的位置对于前面人人网的案例，我们知道了url地址中有部分参数，但是参数是如何生成的呢？毫无疑问，参数肯定是js生成的，那么如何获取这些参数的规律呢？通过下面的学习来了解1.1 观察按钮的绑定js事件通过点击按钮，然后点击Event Listener，部分网站可以找到绑定的事件，对应的，只需要点击即可跳转到js的位置1.2 通过search all file 来

chrome浏览器使用方法介绍学习目标了解 新建隐身窗口的目的了解 chrome中network的使用了解 寻找登录接口的方法1 新建隐身窗口浏览器中直接打开网站，会自动带上之前网站时保存的cookie，但是在爬虫中首次获取页面是没有携带cookie的，这种情况如何解决呢？使用隐身窗口，首次打开网站，不会带上cookie，能够观察页面的获取情况，包括对方服务器如何设置cookie在本地2 chrome中network的更多功能2.1 Perserve log默认情况下，页面

验证码处理学习目标了解 验证码的相关知识掌握 图片识别引擎的使用了解 常见的打码平台掌握 通过打码平台处理验证码的方法1.图片验证码1.1 什么是图片验证码验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。1.2 验证码的作用防止恶意破解密码、刷票、论坛灌水、刷

常见的反爬手段和解决思路学习目标了解 服务器反爬的原因了解 服务器常反什么样的爬虫了解 反爬虫领域常见的一些概念了解 反爬的三个方向了解 常见基于身份识别进行反爬了解 常见基于爬虫行为进行反爬了解 常见基于数据加密进行反爬1 服务器反爬的原因爬虫占总PV(PV是指页面的访问次数，每打开或刷新一次页面，就算做一个pv)比例较高，这样浪费钱（尤其是三月份爬虫）。三月份爬虫是个什么概念呢？每年的三月份我们会迎接一次爬虫高峰期，有大量的硕士在写论文的时候会选择爬取一些往网站，并进行舆

selenium的其它使用方法知识点：掌握 selenium控制标签页的切换掌握 selenium控制iframe的切换掌握 利用selenium获取cookie的方法掌握 手动实现页面等待掌握 selenium控制浏览器执行js代码的方法掌握 selenium开启无界面模式了解 selenium使用代理ip了解 selenium替换user-agent1. selenium标签页的切换当selenium控制浏览器打开多个标签页时，如何控制浏览器在不同的标签页中进行切换呢？需要

selenium提取数据知识点：了解 driver对象的常用属性和方法掌握 driver对象定位标签元素获取标签对象的方法掌握 标签对象提取文本和属性值的方法1. driver对象的常用属性和方法在使用selenium过程中，实例化driver对象后，driver对象有一些常用的属性和方法driver.page_source 当前标签页浏览器渲染之后的网页源代码driver.current_url 当前标签页的urldriver.close() 关闭当前标签页，如果只有一个标签

selenium的介绍知识点：了解 selenium的工作原理了解 selenium以及chromedriver的安装掌握 标签对象click点击以及send_keys输入1. selenium运行效果展示Selenium是一个Web的自动化测试工具，最初是为网站自动化测试而开发的，Selenium 可以直接调用浏览器，它支持所有主流的浏览器（包括PhantomJS这些无界面的浏览器），可以接收指令，让浏览器自动加载页面，获取需要的数据，甚至页面截屏等。我们可以使用selenium很容易

数据提取-lxml模块知识点了解 lxml模块和xpath语法的关系了解 lxml模块的使用场景了解 lxml模块的安装了解 谷歌浏览器xpath helper插件的安装和使用掌握 xpath语法-基础节点选择语法掌握 xpath语法-节点修饰语法掌握 xpath语法-其他常用语法掌握 lxml模块中使用xpath语法定位元素提取属性值或文本内容掌握 lxml模块中etree.tostring函数的使用1. 了解 lxml模块和xpath语法对html或xml形式的文本提取特

数据提取-jsonpath模块知识点了解 jsonpath模块的使用场景掌握 jsonpath模块的使用1. jsonpath模块的使用场景如果有一个多层嵌套的复杂字典，想要根据key和下标来批量提取value，这是比较困难的。jsonpath模块就能解决这个痛点，接下来我们就来学习jsonpath模块jsonpath可以按照key对python字典进行批量数据提取知识点：了解 jsonpath模块的使用场景2. jsonpath模块的使用方法2.1 jsonpath模块的安

数据提取概述知识点了解 响应内容的分类了解 xml和html的区别1. 响应内容的分类在发送请求获取响应之后，可能存在多种不同类型的响应内容；而且很多时候，我们只需要响应内容中的一部分数据结构化的响应内容json字符串可以使用re、json等模块来提取特定数据json字符串的例子如下图xml字符串可以使用re、lxml等模块来提取特定数据xml字符串的例子如下<bookstore><book category="COOKING