第一周:
对前后端交互,cookie,AJAX,跨域请求,promise 回调函数进行了学习和理解。
重点掌握 前后端交互的AJAX请求。
AJAX核心代码:
// 1. 创建 ajax 对象
let xhr = new XMLHttpRequest()
// 2. 配置请求信息
xhr.open(‘GET’, ‘./test.php’, true)
// 3. 发送请求
xhr.send()
// 4. 接受响应
xhr.onload = function () {
console.log(xhr.responseText)
}
ajax
全名 async javascript and XML
是前后台交互的能力
也就是我们客户端给服务端发送消息的工具,以及接受响应的工具
是一个 默认异步 执行机制的功能
ajax 状态码
- ajax 状态码 -
xhr.readyState
- 是用来表示一个 ajax 请求的全部过程中的某一个状态
readyState === 0
: 表示未初始化完成,也就是open
方法还没有执行readyState === 1
: 表示配置信息已经完成,也就是执行完open
之后readyState === 2
: 表示send
方法已经执行完成readyState === 3
: 表示正在解析响应内容readyState === 4
: 表示响应内容已经解析完毕,可以在客户端使用了
- 这个时候我们就会发现,当一个 ajax 请求的全部过程中,只有当
readyState === 4
的时候,我们才可以正常使用服务端给我们的数据 - 所以,配合 http 状态码为 200 ~ 299
- 一个 ajax 对象中有一个成员叫做
xhr.status
- 这个成员就是记录本次请求的 http 状态码的
- 一个 ajax 对象中有一个成员叫做
- 两个条件都满足的时候,才是本次请求正常完成
readyStateChange
-
在 ajax 对象中有一个事件,叫做
readyStateChange
事件 -
这个事件是专门用来监听 ajax 对象的
readyState
值改变的的行为 -
也就是说只要
readyState
的值发生变化了,那么就会触发该事件 -
所以我们就在这个事件中来监听 ajax 的
readyState
是不是到 4 了const xhr = new XMLHttpRequest() xhr.open('get', './data.php') xhr.send() xhr.onreadyStateChange = function () { // 每次 readyState 改变的时候都会触发该事件 // 我们就在这里判断 readyState 的值是不是到 4 // 并且 http 的状态码是不是 200 ~ 299 if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) { // 这里表示验证通过 // 我们就可以获取服务端给我们响应的内容了 } }
responseText
-
ajax 对象中的
responseText
成员 -
就是用来记录服务端给我们的响应体内容的
-
所以我们就用这个成员来获取响应体内容就可以
const xhr = new XMLHttpRequest() xhr.open('get', './data.php') xhr.send() xhr.onreadyStateChange = function () { if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) { // 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容 console.log(xhr.responseText) } }
发送一个带有参数的 get 请求
-
get 请求的参数就直接在 url 后面进行拼接就可以
const xhr = new XMLHttpRequest() // 直接在地址后面加一个 ?,然后以 key=value 的形式传递 // 两个数据之间以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send()
- 这样服务端就能接受到两个参数
- 一个是 a,值是 100
- 一个是 b,值是 200
发送一个带有参数的 post 请求
-
post 请求的参数是携带在请求体中的,所以不需要再 url 后面拼接
const xhr = new XMLHttpRequest() xhr.open('get', './data.php') // 如果是用 ajax 对象发送 post 请求,必须要先设置一下请求头中的 content-type // 告诉一下服务端我给你的是一个什么样子的数据格式 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') // 请求体直接再 send 的时候写在 () 里面就行 // 不需要问号,直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')
application/x-www-form-urlencoded
表示的数据格式就是key=value&key=value
第二周
对闭包继承,设计模式以及jQuery进行了学习和理解。
闭包
- 闭包就是利用了这个函数执行空间不销毁的逻辑
- 有几个条件组成闭包
闭包的特点
- 为什么要叫做特点,就是因为他的每一个点都是优点同时也是缺点
- 作用域空间不销毁
- 优点: 因为不销毁,变量页不会销毁,增加了变量的生命周期
- 缺点: 因为不销毁,会一直占用内存,多了以后就会导致内存溢出
- 可以利用闭包访问再一个函数外部访问函数内部的变量
- 优点: 可以再函数外部访问内部数据
- 缺点: 必须要时刻保持引用,导致函数执行栈不被销毁
- 保护私有变量
- 优点: 可以把一些变量放在函数里面,不会污染全局
- 缺点: 要利用闭包函数才能访问,不是很方便
- 作用域空间不销毁
闭包概念
- 有一个 A 函数,再 A 函数内部返回一个 B 函数
- 再 A 函数外部有变量引用这个 B 函数
- B 函数内部访问着 A 函数内部的私有变量
- 以上三个条件缺一不可
继承
- 继承是和构造函数相关的一个应用
- 是指,让一个构造函数去继承另一个构造函数的属性和方法
- 所以继承一定出现在 两个构造函数之间
常见的继承方式
-
我们有一些常见的继承方式来实现和达到继承的效果
-
我们先准备一个父类(也就是要让别的构造函数使用我这个构造函数的属性和方法)
function Person() { this.name = 'Jack' } Person.prototype.sayHi = function () { cosnole.log('hello') }
-
这个
Person
构造函数为父类 -
让其他的构造函数来继承他
-
当别的构造函数能够使用他的属性和方法的时候,就达到了继承的效果
原型继承
-
原型继承,就是在本身的原型链上加一层结构
function Student() {} Student.prototype = new Person()
借用构造函数继承
-
把父类构造函数体借用过来使用一下而已
function Student() { Person.call(this) }
组合继承
-
就是把
原型继承
和借用构造函数继承
两个方式组合在一起function Student() { Person.call(this) } Student.prototype = new Person
ES6 的继承
-
es6 的继承很容易,而且是固定语法
// 下面表示创造一个 Student 类,继承自 Person 类 class Student extends Person { constructor () { // 必须在 constructor 里面执行一下 super() 完成继承 super() } }
设计模式
- 设计模式是我们在 解决问题的时候针对特定问题给出的简洁而优化的处理方案
- 我们有很多的设计模式
- 单例模式
- 组合模式
- 观察者模式
- …
单例模式
- 什么是单例模式呢?
- 我们都知道,构造函数可以创造一个对象
- 我们 new 很多次构造函数就能得到很多的对象
- 单例模式: 就是使用构造函数实例化的时候,不管实例化多少回,都是同一个对象
- 也就是一个构造函数一生只能 new 出一个对象
- 也就是说,当我们使用构造函数,每一次 new 出来的对象 属性/功能/方法 完全一样 的时候,我们把他设计成单例模式
核心代码
-
单例模式的核心代码很简单
-
其实就是判断一下,他曾经有没有 new 出来过对象
-
如果有,就还继续使用之前的那个对象,如果没有,那么就给你 new 一个
// 准备一个构造函数 // 将来要 new 的 function Person() {} // 准备一个单例模式函数 // 这个单例模式函数要把 Person 做成一个单例模式 // 将来再想要 new Person 的时候只要执行这个 singleton 函数就可以了 function singleton () { let instance if (!instance) { // 如果 instance 没有内容 // 来到这里,证明 instance 没有内容 // 给他赋值为 new Person instance = new Person() } // 返回的永远都是第一次 new Person 的实例 // 也就是永远都是一个实例 return instance } const p1 = singleton() const p2 = singleton() console.log(p1 === p2) // true
组合模式
-
组合模式,就是把几个构造函数的器动方式组合再一起
-
然后用一个 ”遥控器“ 进行统一调用
class GetHome {
init () {
console.log('到家了')
}
}
class OpenComputer {
init () {
console.log('打开电脑')
}
}
class PlayGame {
init () {
console.log('玩游戏')
}
}
-
上面几个构造函数的创造的实例化对象的 启动方式 都一致
-
那么我们就可以把这几个函数以组合模式的情况书写
-
然后统一启动
-
准备一个 组合模式 的构造函数
class Compose { constructor () { this.compose = [] } // 添加任务的方法 add (task) { this.compose.push(task) } // 一个执行任务的方法 execute () { this.compose.forEach(item => { item.init() }) } }
-
我们就用我们的组合模式构造函数来吧前面的几个功能组合起来
const c = new Compose() // 把所有要完成的任务都放在队列里面 c.add(new GetHome()) c.add(new OpenComputer) c.add(new PlayGame) // 直接器动任务队列 c.execute() // 就会按照顺序执行三个对象中的 init 函数
观察者模式
- 观察者模式,通常也被叫做 发布-订阅模式 或者 消息模式
- 英文名称叫做
Observer
- 官方解释: 当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题
书写代码
-
首先我们分析功能
-
我们要有一个观察者(这里抽象为一个对象
{}
) -
需要有一个属性,存放消息的盒子(把你绑定的所有事件放在里面)
-
需要一个 on 方法,用于添加事件
-
需要一个 emit 方法,用于发布事件(触发)
-
需要一个 off 方法,把已经添加的方法取消
const observer = { message: {}, on: function () {}, emit: function () {}, off: function () {} }
-
我们把它写成一个构造函数的形式
class Observer { constructor () { this.message = {} } on () {} emit () {} off () {} }
-
jQuery
jQuery
是一个前端库,也是一个方法库- 他里面封装着一些列的方法供我们使用
- 我们常用的一些方法它里面都有,我们可以直接拿来使用就行了
jQuery
之所以好用,很多人愿意使用,是因为他的几个优点太强大了- 优质的选择器和筛选器
- 好用的隐式迭代
- 强大的链式编程
- 因为这些东西的出现,很多时候我们要做的事情被 “一行代码解决”
选择器
-
jQuery
有着相当强大的选择器// 按照 id 获取页面中的元素 const ele = jQuery('#box') const ele = $('#box')
- 上面两个都可以按照 id 来获取元素
// 按照类名来选择 const eles = jQuery('.a') const eles = $('.a')
- 上面就是按照类名来选择元素,可以获取到一组元素
const lis = jQuery('li') const lis = $('li')
- 上面就是按照标签名来获取元素,可以获取到一组元素
const eles = jQuery('ul > li') const eles = $('ul > li')
- 上面就是按照选择器来获取元素,可以获取到一组元素
特殊选择器
-
直接找到第一个
$('li:first') // 找到所有 li 中的第一个
-
直接找到最后一个
$('li:last') // 找到所有 li 中的最后一个
-
直接找到第几个
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
-
找到所有奇数个
$('li:odd') // 找到所有 li 中索引为 奇数 的
-
找到所有偶数
$('li:even') // 找到所有 li 中索引为 偶数 的
筛选器
-
jQuery 的筛选器就是在选择器选择到一组元素以后
-
对元素进行筛选,也可以对准确的某一个元素进行判断和获取
-
找到所有元素中的第一个
$('li').first()
-
找到所有元素中的最后一个
$('li').last()
-
找到某一个元素的下一个兄弟元素
$('li:eq(3)').next()
-
找到某一个元素的上一个兄弟元素
$('li:eq(3)').prev()
-
找到某一个元素的后面的所有兄弟元素
$('li:eq(3)').nextAll()
-
找到某一个元素的前面的所有兄弟元素
$('li:eq(3)').prevAll()
-
找到某一个元素的父元素
$('li:eq(3)').parent()
-
找到某一个元素的所有结构父级,一直到 html
$('li:eq(3)').parents()
-
找到一组元素中的某一个
// 在 li 的所有父级里面找到所有 body 标签 $('li').parents().find('body') // 找到 div 标签下所有后代元素中所有类名为 box 的元素 $('div').find('.box')
-
属性操作
-
给一个元素添加某个属性
// 给 div 元素添加一个 id 属性,值是 box $('div').prop('id', 'box') // 获取 div 的 id 属性 console.log($('div').prop('id'))
- prop 这个方法只能添加元素自己本身就有的属性
- 如果是添加的自定义属性,不会显示在标签上,但是可以使用
-
给一个元素添加某个自定义属性
// 给 div 添加一个 index 属性,值是 1 $('div').attr('index', 1) // 获取 div 的 index 属性 console.log($('div').attr('index'))
-
移除元素的某一个属性
// 移除元素自己本身的属性 $('div').removeProp('id') // 移除元素的自定义属性 $('div').removeAttr('index')
-
操作元素的类名
// 判断某一个元素有没有某一个 class $('div').hasClass('box') // true 表示该元素有 box 类名,false 表示该元素没有 box 类名 // 给元素添加一个类名 $('div').addClass('box2') // 给 div 元素添加一个 box2 类名 // 移除元素的类名 $('div').removeClass('box') // 移除 div 的 box 类名 // 切换元素类名 $('div').toggleClass('box3') // 如果元素本身有这个类名就移除,本身没有就添加
-
操作元素的内容
// 给元素的 innerHTML 赋值 $('div').html('<span>hello world</span>') // 获取元素的 innerHTML $('div').html() // 给元素的 innerText 赋值 $('div').text('hello world') // 获取元素的 innerText $('div').text() // 给元素的 value 赋值 $('input').val('admin') // 获取元素的 value 值 $('input').val()
操作样式
-
jQuery 操作元素的样式就是一个方法
css
// 给元素设置一个 css 样式 $('div').css('width', '100px') // 获取元素的某一个样式 $('div').css('width') // 给元素设置一组样式 $('div').css({ width: '100px', height: '200px' })
元素操作
-
创建一个元素
var div = $('<div></div>')
-
内部插入元素
// 向 div 元素中插入一个 p 元素,放在最后 $('div').append($('<p></p>')) // 把 p 元素插入到 div 中去,放在最后 $('<p>hello</p>').appendTo($('div')) // 向 div 元素中插入一个 p 元素,放在最前 $('div').prepend($('<p></p>')) // 把 p 元素插入到 div 中去,放在最前 $('<p>hello</p>').prependTo($('div'))
-
外部插入元素
// 在 div 的后面插入一个元素 p $('div').after($('<p></p>')) // 在 div 的前面插入一个元素 p $('div').before($('<p></p>')) // 把 p 元素插入到 div 元素的后面 $('div').insertAfter($('<p></p>')) // 把 p 元素插入到 div 元素的前面 $('div').insertBefore($('<p></p>'))
-
替换元素
// 把 div 元素替换成 p 元素 $('div').replaceWith($('<p></p>')) // 用 p 元素替换掉 div 元素 $('<p></p>').replaceAll($('div'))
-
删除元素
// 删除元素下的所有子节点 $('div').empty() // 把自己从页面中移除 $('div').remove()
-
克隆元素
// 克隆一个 li 元素 // 接受两个参数 // 参数1: 自己身上的事件要不要复制,默认是 false // 参数2: 所有子节点身上的事件要不要复制,默认是 true $('li').clone()
元素尺寸
-
操作元素的宽和高
// 获取 div 元素内容位置的高,不包含 padding 和 border $('div').height() // 设置 div 内容位置的高为 200px $('div').height(200) // 获取 div 元素内容位置的宽,不包含 padding 和 border $('div').width() // 设置 div 内容位置的宽为 200px $('div').width(200)
-
获取元素的内置宽和高
// 获取 div 元素内容位置的高,包含 padding 不包含 border $('div').innerHeight() // 获取 div 元素内容位置的宽,包含 padding 不包含 border $('div').innerWidth()
-
获取元素的外置宽和高
// 获取 div 元素内容位置的高,包含 padding 和 border $('div').outerHeight() // 获取 div 元素内容位置的高,包含 padding 和 border 和 margin $('div').outerHeight(true) // 获取 div 元素内容位置的宽,包含 padding 和 border $('div').outerWidth() // 获取 div 元素内容位置的高,包含 padding 和 border 和 margin $('div').outerWidth(true)
元素位置
-
元素相对页面的位置
// 获取 div 相对页面的位置 $('div').offset() // 得到的是以一个对象 { left: 值, top: 值 } // 给 div 设置相对页面的位置 $('div').offset({ left: 100, top: 100 }) // 获取定位到一个距离页面左上角 100 100 的位置
-
元素相对于父元素的偏移量
// 获取 div 相对于父元素的偏移量(定位的值) $('div').position()
-
获取页面卷去的高度和宽度
window.onscroll = function () { // 获取浏览器卷去的高度 console.log($(window).scrollTop()) } window.onscroll = function () { // 获取浏览器卷去的宽度 console.log($(window).scrollLeft()) }
元素事件
-
绑定事件的方法
// 给 button 按钮绑定一个点击事件 $('button').on('click', function () { console.log('我被点击了') }) // 给 button 按钮绑定一个点击事件,并且携带参数 $('button').on('click', { name: 'Jack' }, function (e) { console.log(e) // 所有的内容都再事件对象里面 console.log(e.data) // { name: 'Jack' } }) // 事件委托的方式给 button 绑定点击事件 $('div').on('click', 'button', function () { console.log(this) // button 按钮 }) // 事件委托的方式给 button 绑定点击事件并携带参数 $('div').on('click', 'button', { name: 'Jack' }, function (e) { console.log(this) // button 按钮 console.log(e.data) })
-
移除事件
// 给 button 按钮绑定一个 点击事件,执行 handler 函数 $('button').on('click', handler) // 移除事件使用 off $('button').off('click', handler)
-
只能执行一次的事件
// 这个事件绑定再 button 按钮身上 // 当执行过一次以后就不会再执行了 $('button').one('click', handler)
-
直接触发事件
// 当代码执行到这里的时候,会自动触发一下 button 的 click 事件 $('button').trigger('click')
可以直接使用的常见事件
-
可以直接使用的事件就是可以不利用
on
来绑定,直接就可以使用的事件方法 -
click
// 直接给 div 绑定一个点击事件 $('div').click(function () { console.log('我被点击了') }) // 给 div 绑定一个点击事件并传递参数 $('div').click({ name: 'Jack' }, function (e) { console.log(e.data) })
-
dblclick
// 直接给 div 绑定一个双击事件 $('div').dblclick(function () { console.log('我被点击了') }) // 给 div 绑定一个双击事件并传递参数 $('div').dblclick({ name: 'Jack' }, function (e) { console.log(e.data) })
-
scroll
// 直接给 div 绑定一个滚动事件 $('div').scroll(function () { console.log('我被点击了') }) // 给 div 绑定一个滚动事件并传递参数 $('div').scroll({ name: 'Jack' }, function (e) { console.log(e.data) })
-
hover
// 这个事件要包含两个事件处理函数 // 一个是移入的时候,一个是移出的时候触发 $('div').hover(function () { console.log('我会再移入的时候触发') }, function () { console.log('我会在移出的时候触发') })
动画
-
show
// 给 div 绑定一个显示的动画 $('div').show() // 如果元素本身是 display none 的状态可以显示出来 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').show(1000, 'linear', function () { console.log('我显示完毕') })
-
hide
// 给 div 绑定一个隐藏的动画 $('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').hide(1000, 'linear', function () { console.log('我隐藏完毕') })
-
toggle
// 给 div 绑定一个切换的动画 $('div').hide() // 元素本身是显示,那么就隐藏,本身是隐藏那么就显示 // 给 div 绑定一个显示的动画 // 接受三个参数 // $('div').show('毫秒', '速度', '回调函数') $('div').toggle(1000, 'linear', function () { console.log('动画执行完毕') })
-
animate
// 定义一个自定义动画 $('.show').click(function () { $('div').animate({ width: 500, height: 300 }, 1000, 'linear', function () { console.log('动画运动完毕') }) })
-
stop
// 立刻定制动画 $('div').stop() // 就停止再当前状态
-
finish
// 立刻结束动画 $('div').finish() // 停止在动画结束状态
发送 ajax 请求
-
发送 get 请求
// 直接使用 $.get 方法来发送一个请求 /* 参数一: 请求地址 参数二: 请求时携带的参数 参数三: 请求成功的回调 参数四: 返回的数据类型 */ $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
-
发送 post 请求
// 直接使用 $.post 方法来发送一个请求 /* 参数一: 请求地址 参数二: 请求时携带的参数 参数三: 请求成功的回调 参数四: 返回的数据类型 */ $.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')
-
综合发送 ajax 请求
// 使用 $.ajax 方法 // 只接受一个参数,是一个对象,这个对象对当前的请求进行所有的配置 $.ajax({ url: './ajax', // 必填,请求的地址 type: 'GET', // 选填,请求方式,默认是 GET(忽略大小写) data: {}, // 选填,发送请求是携带的参数 dataType: 'json', // 选填,期望返回值的数据类型,默认是 string async: true, // 选填,是否异步,默认是 true success () {}, // 选填,成功的回调函数 error () {}, // 选填,失败的回调函数 cache: true, // 选填,是否缓存,默认是 true context: div, // 选填,回调函数中的 this 指向,默认是 ajax 对象 status: {}, // 选填,根据对应的状态码进行函数执行 timeout: 1000, // 选填,超时事件 })
-
发送一个 jsonp 请求
// 使用 $.ajax 方法也可以发送 jsonp 请求 // 只不过 dataType 要写成 jsonp $.ajax({ url: './jsonp.php', dataType: 'jsonp', data: { name: 'Jack', age: 18 }, success (res) { console.log(res) }, jsonp: 'cb', // jsonp 请求的时候回调函数的 key jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称 })
全局 ajax 函数
- 全局的
ajax
函数我们也叫做ajax
的钩子函数 - 也就是在一个
ajax
的整个过程中的某一个阶段执行的函数 - 而且每一个
ajax
请求都会触发
ajaxStart
-
任意一个请求在 开始 的时候就会触发这个函数
$(window).ajaxStart(function () { console.log('有一个请求开始了') })
ajaxSend
-
任意一个请求在 准备 send 之前 会触发这个函数
$(window).ajaxSend(function () { console.log('有一个要发送出去了') })
ajaxSuccess
-
任意一个请求在 成功 的时候就会触发这个函数
$(window).ajaxSuccess(function () { console.log('有一个请求成功了') })
ajaxError
-
任意一个请求在 失败 的时候就会触发这个函数
$(window).ajaxError(function () { console.log('有一个请求失败了') })
ajaxComplete
-
任意一个请求在 完成 的时候就会触发这个函数
$(window).ajaxComplete(function () { console.log('有一个请求完成了') })
ajaxStop
-
任意一个请求在 结束 的时候就会触发这个函数
$(window).ajaxStop(function () { console.log('有一个请求结束了') })
第三周
对NodeJs,gulp,sass,git 学习使用方法。
NODE
-
什么是 node
- Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
-
这个是 node 官网的解释
- 其实 node 就是用 javascript 语言写 后端
- 也就是说,我们的 javascript 有了 node 以后,不光是一个前端语言,也是一个后端语言
模块化
- 在 node 的开发过程中
- 我们是把每一个功能独立做成一个模块
- 然后在使用 导入导出 的方式把他们关联在一起
- 利于维护
- 准确定位
- 我们一般把模块分为三种
- 内置模块 (node 天生就带有的模块)
- 自定义模块 (我们自己写的文件)
- 第三方模块 (从网上下载的别人写好的模块)
NPM
-
在我们安装
node
的环境的时候,会自动帮我们一起安装一个npm
环境 -
就好像我们安装一些软件的时候,会自动在帮我们安装一些什么
xxx软件管家
/xxx游戏
之类的东西 -
但是
npm
不是垃圾软件,而是一个我们超级实用的工具
检测是否安装
-
和检测 node 一样
-
在命令行输入指令
$ npm -v
-
能够得到一个版本号就可以了
了解 npm
- 什么是 npm 呢
- 我们可以把他想象成一个大超市,一个装着所有我们需要用到的
插件
/库
/框架
的超市 - 我们要下载一个
jQuery-validation
插件- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
- 我们要下载一个
bootstrap
- 我们可以选择去官网进行下载
- 可以选择去 GitHub 上查找并下载
- 也可以选择直接在命令行用 npm 下载
- 也就是说,npm 包含着我们所有的第三方的东西
- 我们需要的时候,只要打开终端,就可以使用指令来帮我们下载
- 再也不需要去官网找了
- 而且,npm 不光可以在后端使用,也可以在前端使用
- npm 只不过是一个依赖于 node 环境的大型的包管理器
使用 npm
- 我们想使用 npm 只要打开命令行就可以了
- 作为一个 包管理器
- 可以帮我们下载一些 插件 库 框架 之类的东西供我们使用
下载包
-
打开命令行
-
输入下载的指令
# 表示使用 npm 这个工具下载一个 jquery $ npm install jquery
-
下载完毕以后,就会在当前目录下多出一个文件夹
- 叫做
node_modules
- 在这个目录下就会有一个文件夹叫做
jquery
- 就是我们需要的东西了
- 叫做
-
npm 的下载默认是下载最新版本的包
-
我们也可以在下载的时候指定一下我要下载哪一个版本
# 表示使用 npm 这个工具下载一个 3.3.7 版本的 jquery $ npm install [email protected]
删除包
-
在删除包的时候,我们可以直接去
node_modules
文件夹中找到对应的包的文件夹删除掉 -
但是这样做并不好,我们还是应该使用命令行的指令来删除包
# 表示我要删除 jquery 这个包 $ npm uninstall jquery
-
这样,这个包就会被卸载了
管理项目
-
我们的每一个项目都有可能需要依赖很多的包(有插件/库/框架)
-
npm 会帮助我们记录,我们当前这个项目所使用的包
-
但是前提是,你要告诉 npm 说: “你来帮我管理整个文件夹”
-
我们依旧是使用指令在命令行来告诉 npm
# 表示告诉 npm 你来帮我们管理整个文件夹(也就是我的整个项目) $ npm init
npm 清除缓存
-
有的时候,有些包下载到一半,因为各种原因失败了(比如突然没有网了)
-
那么这个下载了一半的包 有可能 会被缓存下来
-
那么以后你再次下载的时候,就都是失败的状态
-
那么我们就要清除掉缓存以后,在重新下载
# 表示清除 npm 的缓存 $ npm cache clear -f
NRM
- 我们的
npm
虽然好用 - 但是有一个缺点
- 就是,他虽然在帮我们下载东西
- 但是他的下载地址是在国外
- 也就是说,每次使用 npm 下载的时候,都是去国外的服务器上进行下载
- 那么就会有很多不稳定的因素
- 而且相对时间比较长
nrm
就是一个用来切换npm
下载地址的工具(切换镜像源工具)
安装 NRM
-
nrm
如果想使用,那么需要我们自己安装一下 -
因为是我们的工具,所以使用
npm
就可以安装 -
依旧是使用指令的方式来进行安装
-
只不过这里要把这个
nrm
安装成一个全局的依赖,而不再是项目内部的依赖了- 全局依赖,一个电脑安装一次,就一直可以使用
-
我们使用指令安装一个全局
nrm
# 表示安装一个全局 nrm $ npm install --global nrm
检测安装
-
安装完毕之后,我们检测一下是否安装成功
-
和检测 node npm 的时候一样
-
在命令行使用指令查看一下版本号
$ nrm --version
-
能出现版本号,表示安装成功
使用 nrm
- nrm 里面存着好几个镜像源地址
- 我们要挑一个比较快的使用
检测镜像源地址
-
我们直接在命令行使用指令来查看所有镜像源地址的网速
# 表示查看 nrm 镜像源地址网速 $ nrm test
切换镜像源
-
我们检测完毕以后,就直到哪个比较快了
-
我们就使用指令切换一下镜像源地址就好了
# 表示切换到 taobao 镜像源地址 $ nrm use taobao
GULP
-
gulp
是一个项目开发的 自动化打包构建工具 -
基于
node
环境来运行的安装 GULP 环境
-
gulp
是一个运行环境 -
只不过这个环境是要依赖于
node
环境的 -
所以我们在安装
gulp
环境之前确保node
环境已经安装$ node --version
$ npm --version
-
之所以也要检测以下
npm
环境,是因为我们要使用npm
来安装gulp
环境 -
我们就直接安装一个
gulp
全局包就可以了# 打开命令行(MAC 打开终端) # 直接使用 npm 安装就好 # windows 指令 $ npm install --global gulp # MAC 指令 $ sudo npm install --global gulp
-
等待安装就好,会默认安装最新的稳定版本
-
要是想确认以下
gulp
安装成功 -
可以直接在命令行(终端)使用指令查看以下版本号就可以
$ gulp --version
- 会出现一个
CLI version: x.x.x
- 就表示安装成功了
-
安装好
gulp
环境以后,我们就可以使用了
SASS
-
世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
-
sass
是一个css
的预编译工具 -
也就是能够 更优雅 的书写
css
-
sass
写出来的东西 浏览器不认识 -
依旧是要转换成
css
在浏览器中运行 -
这个时候就需要一个工具来帮我们做
# 安装全局 sass 环境
$ npm install sass -g
GIT
git
官方名称: 分布式版本管理器- 私人解释: 就是一个管理我们文件夹的工具
- 只不过可以保留所有的版本信息
- 就是我们安装一个软件
- 然后用这个软件来管理我们的一个文件夹
- 这个文件夹被
git
管理以后,我们可以对他进行各种操作 - 保证我们写过的内容不会丢失
第四周
主要完成了 电商小项目
项目地址
项目由6个页面组成
- 1.登录页面:不用多说 用来进行登录 (测试账号 admin 密码123456)
- 2.注册页面:可以进行 邮箱注册和 手机号注册 并添加了验证功能
- 3.主页:商城的主页 点击右上角的搜索按钮可以跳转到 商品列表页
- 4.商品列表页:展示商品列表内容 进行了排序 和分页共呢(主要使用请求得到的JSON数据来渲染页面)
- 5.商品详情页:展示商品的详情 渲染的内容由商品列表点击商品后 存储到localStorage中
- 6.购物车页面:里面是你点击过加入购物车的 商品 可以选择上品数量 和 删除商品 (该页面 主要页是通过存储在localSotrage中的购物车列表内容 进行页面渲染)
注册登录功能后端php 在 src下的 server文件夹中