前端笔记猛猛学

Vue

Vue3的一些基本配置

  • 去掉ESLint校验:package.json中的extends去掉eslint:commends

  • 引入icon图标

    // main.js中
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    const app = createApp(App)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    
    // vue页面使用
    <el-icon><edit /></el-icon>
    

Vuex

  • state: 存放数据
  • mutations: 同步操作,写方法用于改变state里面的数据,vue可以监听数据的改变进行更新(相当于methods)
  • actions:所有异步操作都放在这里,改变的数据不能够被vue监听
  • getters: 进行逻辑处理(相当于computed属性)
  • module:单一状态树,存放所有模块
  1. 新建store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state:{
            count: 0
        },
        mutations:{
            // state是必要参数
            addCount(state, number){
                state.count+=number
            }
        },
        actions:{
        	setCount(content, payload){
        	    //增加setCount方法,默认第一个参数是content,其值是复制一份store,第二个是自定义参数
        	    return new Promise(resolve => {
        	        setTimeout(()=>{
        	            content.commit('addCount', payload);
        	            resolve();
        	        }, 1000);
        	    })
        	}
        },
        getters:{
            // 不能改变state里面的值
            alertCount(state){
                return `当前值${state.count}`
            }
        }
    })
    
    export default store;
    
  2. 页面使用

    
    
    

    简写vuex

    • 采用解构方法import {mapState, mapMutations, mapGetters} from "vuex";
    <script>
    import {mapState, mapMutations, mapGetters} from "vuex";
    
    export default {
      name: 'HelloWorld',
      mounted() {
        console.log(this.count)		// 解构后,采用this.xx调用vuex的内容
        console.log(this.name)
      },
      methods:{
        ...mapMutations(['addCount']), //mutations和actions要在methods里面解构
        ...mapActions(['setCount']),
        
        btnAdd() {
          this.addCount(1)
        }
      },
      computed:{
        ...mapState(['count', 'name']),	//state和getters要在computed里面解构
        ...mapGetters(['alertCount']),
      }
    }
    </script>
    
  3. 异步action在页面的使用

    async mounted() {
      console.log(`旧值: ${this.count}`)
      await this.$store.dispatch('setCount', 3);	// 默认写法
      await this.setCount(3);	// 解构写法
      console.log(`新值:${this.count}`)
    },
    

v-model低层原理

<h2>v-model低层原理</h2>
<input placeholder="请输入数值" id="username" />
<p id="uName"></p>
<script>
    let obj={}
    Object.defineProperty(obj, 'username', {
        // 取值
        get:function (){
            console.log("取值")
        },
        // 设置值
        set(val) {
          console.log(val)
          document.getElementById('uName').innerText = val
        }
    document.getElementById('username').addEventListener('keyup', function (){
        // 监听事件
        obj.username = event.target.value;
        // console.log(event)
    })
 </script>

vue理解

  • 渐进式框架,声明式渲染,借鉴MVVM思想
  • 采用虚拟dom(不会重新渲染所有页面,先进行对比,有更新的部分会进行重新渲染(render函数))
  • 高内聚,低耦合,使用组件化开发
  • computed属性:如果多次调用某个方法,computed里面只会计算一次,减少了资源消

vue2.0生命周期

  1. 创建前后:组件实例被创建
  2. 挂载前后 :组件挂载到实例
  3. 更新前后 :组件数据更新
  4. 销毁前后:组件实例销毁

vue性能优化

  • 数据层级不能过深,合理设置响应数据
  • v-if 和 v-show合理选择
  • 使用数据缓存,不频繁取值
  • 分页、虚拟滚动

vue组件通信

  • props通信:子组件通过props接受来自父级组件的参数

  • $emit: 子组件传递数据给父组件

  • ref:父组件使用子组件的时候设置ref(ref = ‘foo’),通过 this.$refs.foo 获取子组件实例

  • EventBus: 兄弟组件传值

  • $parent 或 $root: 通过共同祖辈搭建通信桥梁

  • provide 与 inject
    父级组件:

    provide(){  
        return {  
            foo:'foo'  
        }  
    }  
    

    子组件:

    inject:['foo'] // 获取到祖先组件传递过来的值
    

    父组件向子组件动态传参

    需求

    • 父组件是文章管理列表,带有一个编辑按钮
    • 子组件(editor)是一个内嵌的富文本编辑器:点击编辑按钮,弹出Dialog框,富文本编辑器的内容显示为当前文章内容(暂且设为content属性)
    • 我们需要传递content属性到子组件(editor),但是子组件中v-model无法绑定props中的content,因此子组件中的文本内容绑定的是data中的html属性,我们需要将content传递并且赋值给html。

    当前问题

    • 按照props传参(子组件第一次可以接收content并且更新页面内容,当时当我们点击编辑其他文章,这时候content虽然有变化,但是无法更新到子组件html属性上面(相当于没有监听变化),导致页面无法更新到当前文章的content,仍然显示的是之前的content)

      父组件

      
        
      
      

      子组件

      
      
      

    解决办法

    在子组件加上content的监听,当content变化,再给文本编辑器内容绑定的html属性赋值.

    watch:{
      content(newVal, oldVal){
        console.log('content change')
        console.log(newVal)
        this.html = this.content
      }
    },
    

vue-router

1.路由守卫

A.全局路由

全局使用

  • router.beforeEach((to, from, next)=>{}):路由跳转前执行的操作
    to:需要跳转的路径
    from:当前页面路径
    next:执行当前操作

    // 登录拦截器
    router.beforeEach((to, from, next) =>{
      if(to.path == '/login' || to.path == '/front/home'){
        next();
      }else{
        // 不是登录页面
        localStorage.getItem("user")?next():next("/login")
      }
    
    })
    
  • router.beforeResolve

  • router.afterEach((to, from) =>{}):路由跳转后
    一般用于跳转后更改页面标题声明页面等辅助功能

B.路由独享守卫

某个单页面渲染使用

  • boforeEnter(路由独享的守卫)

    const routes = [
      {
        path: '/users/:id',
        component: UserDetails,
        beforeEnter: (to, from) => {
          // reject the navigation
          return false
        },
      },
    ]
    
    

C.组件路由

组件渲染的时候使用

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

2.hash和history的区别

hash模式
  • 带#号,改变URL时,页面不会重新加载

  • 利用window.onhashchange事件实现,每次改变hash值,浏览器访问历史会新增一个记录

  • hash值是URL中#后面的值,不会传递给服务器

  • 使用"后退"按钮,返回上一个页面

    history模式

  • 通过window.history实现页面无刷新跳转

  • 路径会随http请求发送给服务器,因此前端URL必须和请求的后端URL一致,否则404

  • 404举例
    当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析,拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向,此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话,浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口,那么就会返回404。

    3.this.$router.push打开新页面

	// 默认写法(会覆盖当前页面)
      this.$router.push({
        path: '/news',
        query:{
          a_id: val.a_id, title: '旅游资讯', sub_title: val.title, date: val.date
        }
      })
	// 打开新页面的写法(使用resolve + window.open)
      let routeData = this.$router.resolve({
        name: 'news',
        query: { a_id: val.a_id, title: '旅游资讯', sub_title: val.title, date: val.date }
      })
      window.open(routeData.href, '_blank')

computed和watch的区别

  • computed是计算属性,函数内的变量可以缓存,除非变量发生变化,才会重新进行计算
  • watch主要是监听,每次值变化就会立即进行回调。

v-show和v-if的区别

  • v-show是控制display来让元素隐藏(会渲染到页面,不会触发生命周期)
  • v-if显示隐藏时是把整个元素删除(为true才会渲染组件,会触发生命周期)

created和mounted请求数据,有什么区别

  • created:渲染前调用,先初始化属性,再做渲染

  • mounted:渲染完成之后,先初始化页面,再对元素节点进行操作 (这里请求数据,可能会出现闪屏问题)

vue中的修饰符

  • 事件修饰符
    • .stop 阻止冒泡
    • .prevent 阻止默认行为
    • .self 只有在event.target是当前元素触发
    • .capture
    • .once 事件只触发一次
    • .passive 立即触发默认行为
  • 按键修饰符
    • .keyup .keydown
  • 系统修饰符
  • 鼠标修饰符
  • 表单修饰符

MVC

view(视图层)-controller(控制器)-model(数据模型)

view主要用于UI界面展示和响应用户交互,controller用于监听数据改变和处理用户交互,model用于存放数据

MVVM

model-viewmodel-viewcontroller

在MVC的基础上,把contrler的数据和逻辑处理部分抽离出来,放到viewmodel中,是model与controller沟通的桥梁。

JS

JS组成三部分

  • ECMAScript: JS的核心内容,描述了JS的基础语法(var for 数据类型…)
  • 文档对象模型(DOM)
  • 浏览器对象模型(BOM): 对浏览器窗口访问和操作

location对象

包含了当前url的属性,主要有

  • protocol(‘http:’)协议
  • host(‘www.xx.com’) 网址
  • hostname(带了端口号)
  • path (/home/list) 访问路径
  • search (‘?id=123456&sort=discount’) 参数
  • hash (‘#title’)

innerText 和 innerHTML的区别

  • innerText不识别html标签,不保留空格和换行
  • innerHTML识别html标签,保留空格和换行

构造函数

  • 函数名首字母大写
  • 不需要return就可以返回结果
  • 调用函数必须使用关键字new
// 构造函数
function Star(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
var dz = new Star('DZ', 18, 'male');
console.log(dz.age)

cookie sessionStorage localStorage的区别

  • 三者均保存在本地浏览器
  • cookie:存储量小,由服务器写入,若设置了固定的时间,时间过后失效
  • session:页面关闭自动清除(主要用于检测用户刷新页面)
  • localStorage:一直保存在本地(存储不易变动的数据),不会自动清除

token的登录流程

  • 客户端用账号密码请求登录
  • 服务器验证请求,成功之后,给客户端签发一个token,
  • 客户端将token保存在本地(localstorage或者cookie中)
  • 每次客户端发送请求,都要携带token
  • 服务端收到请求,需要先验证token,验证成功,给客户端返回请求数据

Token存localStorage还是session里面?

  • 存localStorage里面,每次请求接口都需要把它当做字段传到服务器(容易被XSS攻击)
  • 存cookie中,会自动发送,不能跨域(CSRF攻击)

基本&引用数据类型(JS内置对象)

  • 基本数据类型:string,number,undefined,null,boolean,symbol,bigint
    保存在栈内存中,保存的是一个值

  • 引用类型:object(普通对象)Array Function Date
    保存在堆内存中,保存的是引用数据类型的地址(多个引用会同时改变)。例如下:

    let obj = {
        name: 'xm',
        age: 18
    }
    let obj1 = obj
    obj1.name = 'change'
    console.log(obj)
    console.log(obj1)
    

常用的对象

  • Math(abs, ceil, sqrt, max, min…)
  • Date(getYear, getMonth…)
  • Array(push, foreach)
  • String(concat, length, slice, split)

操作数组的方法

  • push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter() reduce() isArray() findIndex()
  • 改变原数组的方法:push() pop() sort() reverse() unshift() shift() splice()

数据类的检测方法

  • typeof() 判断基本数据类型

  • instanceof() 判断引用数据类型

  • constructor 基本可以判断基本数据类型和引用数据类型

    console.log(('abc').constructor === String)
    
  • Object.prototype.toString.call() 可以判断所有数据类型

    var opt = Object.prototype.toString
    console.log(opt.call(2))     // [object Number]
    console.log(opt.call('abc')) // [object String]
    console.log(opt.call([]))   // [object Array]
    console.log(opt.call({}))   // [object Object]
    console.log(opt.call(true)) // [object Boolean]
    

闭包

  • 优点:可以重复利用内部变量,不会污染全局变量,一直保存在内存中,不会被垃圾机制回收

  • 缺点:闭包较多的时候,会消耗内存,导致页面性能下降,在IE浏览器会导致内存泄漏

  • 应用:防抖(防止重复点击,n秒后执行事件,在n秒内重复点击,从最后一次点击开始计时 — 点击事件)节流(n秒内重复点击,只有一次生效 – 滚动条)

  • function fn(){
        let name = 'xiaoxie'
        function getName(){
            alert(name)
        }
        getName()
    }
    fn()
    

内存泄漏

JS里已经分配内存地址对象,但由于长期没办法回收和清除释放,造成长期占有资源的情况,导师运行速度缓慢甚至崩溃。

因素

  • 未清空的定时器
  • 过度的闭包
  • 一些元素没被清除

事件委托(事件代理)

原理:利用事件冒泡的机制实现,把子元素的事件绑定到父元素身上

父元素添加addEventListener('click', 函数名, true/false) 默认true, false代表阻止(子元素)冒泡

原型链

原型链:一个实例对象在调用属性和方法的时候,会以此从实例本身=》构造函数原型 =》原型的原型 去查找

以下例子的原型链:p1 -> Person -> Object -> null

原型就是一个普通的对象,它是为构造函数的实例共享属性和方法,所有实例中引用的原型都是同一个对象

<!--原型-->
function Person(){
    this.say = function (){
        console.log('sing')
    }
}
let p1 = new Person()
let p2 = new Person()
p1.say()
p2.say()

例:say调用了两次,在内存中占用了两个(如果多次使用,会造成资源浪费),为了解决这个问题,原型:将方法挂载到prototype上,所有实例共享这个方法,减少了内存消耗。

__proto__: 可以理解为指针,实例对象中的属性,指向了构造函数的原型(prototype)

p1.__proto__ === Person.prototype // 返回true

例如下:

<!--原型-->
function Person(){
    this.say = function (){
        console.log('sing')
    }
}
Person.prototype.run = function (){
    console.log('跑步')
}
let p1 = new Person()
let p2 = new Person()
//p1.say()
//p2.say()
p1.run();
p2.run();

new关键字

实现new关键字

    function newFun(Fun, ...args){
        // 1.创建空对象
        let obj = {}    // 引用类型
        // 2.把空对象和构造函数通过原型链进行连接
        obj.__proto__ = Fun.prototype
        // 3.把构造函数的this绑定到新的空对象身上
        const res = Fun.apply(obj, args)    // 值类型
        // 4.根据构造函数返回的类型判断,如果是值类型,返回对象;是引用类型,返回这个引用类型
        return res instanceof Object ? res:obj;
    }
    // 测试newFun
    function Person(name){
        this.name = name
    }
    Person.prototype.printName = function (){
        console.log(this.name)
    }
    let p1 = newFun(Person, 'xym')
    p1.printName()

JS的继承

  • 原型链继承(子类继承父类,new出来的实例拥有父类相同的属性和方法)
    缺点:无法向父类传参

        function Person(){
            this.info={
                name: '张三',
                age: 12
            }
        }
        function Child(){}
        Child.prototype = new Person();
    
  • 构造函数继承(使用call / apply 方法实现继承,在子类里面调用父类)
    缺点:无法实现函数的复用

    function Person(){
        this.info={
            name: '张三',
            age: 12
        }
    }
    function Child(){
        Person.call(this)
    }
    let c1 = new Child();
    c1.info.nick = 'nick name'
    console.log(c1.info)
    
  • 组合继承(调用了两次父类构造函数)

    function Person(gender){
        this.info={
            name: '张三',
            gender: gender,
            age: 19
        }
    }
    Person.prototype.getInfo = function (){
        console.log(this.info)
    }
    function Child(gender){
        Person.call(this, gender)   // 构造函数继承
    }
    Child.prototype = new Person()  // 原型链继承
    let c1 = new Child('男')
    c1.info.nickname = '小张'
    c1.getInfo()
    
    let c2 = new Child('女')
    c2.info.nickname = '小红'
    // c1 和 c2 互不影响
    c1.getInfo()
    c2.getInfo()
    
  • ES6使用class关键字继承父类
    某些浏览器可能不支持

    class Animal{
        constructor(kind) {
            this.kind = kind
        }
        getKind(){
            return this.kind
        }
    }
    
    // 继承animal类
    class Cat extends Animal{
        constructor(name) {
            // 子类构造方法必须调用super方法
            super('cat');
            this.name = name
        }
        getCatInfo(){
            console.log(this.name+' : '+this.getKind())
        }
    }
    let cat = new Cat('buding')
    cat.getCatInfo()
    
  

## JS设计原理

- JS引擎
- 运行上下文
- 调用栈
- 事件循环
- 回调

## JS中的this指向

- 全局对象的this指向window
- 全局作用域/普通函数中this指向window
- this永远指向最后调用他的对象
- apply call bind可以改变this指向
- 箭头函数this指向箭头函数外的一层

## setTimeout和setInterval最小时间

- setTimeout   4ms
- setInterval   10ms

## promise

- 解决回调问题

​```js
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('foo');
    }, 300);
});

myPromise.then(value => {
    console.log(value)
})

跨域?如何解决跨域?

跨域:当前页面接口访问的 协议/域名/接口 不同,(浏览器的同源策略)。(浏览器能发出请求,服务器能响应数据,返回的时候被浏览器拦截了)

解决办法

  • script调用js文件
  • 服务器实现cors接口,前端正常访问就行。服务器收到前端请求,设置Access-Control-Allow-Origin

异步操作实现

  • 回调函数callback

    function f(x){
        console.log(x)
    }
    function printTime(){
        setInterval(function (){
            console.log('print fn exe')
            c = 1
        }, 3000)
    }
    var c = 0
    printTime()
    f(c)
    

    js内部执行不是按照顺序的,因此这里先打印0,再输出"print fn exe"。采用回调函数实现异步

    <script type="text/javascript">
        <!--回调函数,实现异步操作-->
        function f(x){
            console.log(x)
        }
    
        function printTime(callback){
            setInterval(function (){
                console.log('print fn exe')
                c = 1
                callback(c)
            }, 3000)
        }
        var c=0
        //方法一
        printTime(f)
        // 方法二
        printTime(function (x){
            console.log(x)
        })
    </script>
    
  • async / await

    function print(time){
        setTimeout(function(){
            console.log(time);
            return 1;
        },time)
    }
    async function fun(){
        let a = await print(1000);
        // let b = await print(3000);
        // let c = print(2000);
        console.log(a);
        // console.log(1)
    
        setTimeout(()=>{
            alert(a)
        }, 3000)
    }
    fun();
    
  • setTimeout(利用定时器实现异步操作)

ES6新特性有哪些?

  1. 新增了箭头函数
    不能作为构造函数使用,不能使用new
    没有arguments
    不能用call,apply,bind改变this指向
    this指向外层第一个函数的this
  2. 新增块级作用域(let 和 const)
    不存在变量提升(在变量声明之后才能使用)
    存在暂时性死区问题
    块级作用域的内容
    不能在同一个作用域内重复声明
  3. Promise
    解决回调地狱问题
    自身有all,reject,resolve,race等方法
    原型上有then,catch
    把异步操作队列化
    三种状态:pending-初始状态,fulfilled-操作成功,rejected-操作失败
    async/await
    同步代码做异步操作
  4. 解构赋值
    从对象或者数组中取值,然后给变量赋值
  5. set和map
    set:数组去重
    map的key类型不受影响
  6. 定义类语法糖(class)
  7. 数据结构(symbol)
  8. 模块化(export,import)

call、aply、bind区别

  • 都能改变this的指向
  • call和aply功能类似,传参方法不同
  • call传的是一个参数列表
  • aply传的数组

实现深拷贝

深拷贝就是完全拷贝一个新的对象,会在堆内存开辟新空间,拷贝的对象被修改后,原对象不受影响

主要针对引用数据类型

  • 扩展运算符

  • JSON.parse(JSON.stringify())

  • 递归实现

    // 深拷贝
    let obj = {
        name: '张三',
        age: 18,
        say(){console.log('say name')},
        arr:[[1, 2], 3, 4, 5]
    }
    // let obj1 = {...obj}     // 方法一:扩展运算符
    // obj1.name = 'xxx'
    // console.log(obj)        // name : "张三"
    // console.log(obj1)       // name : 'xxx'
    
    // 方法二:json.parse   =>  不能拷贝函数,即say没有拷贝进来
    // let obj2 = JSON.parse(JSON.stringify(obj))
    // obj2.name = 'aaa'
    // console.log(obj)
    // console.log(obj2)
    
    // 方法三 递归实现深拷贝
    function exten(origin, deep){
        let res = {}
        if(origin instanceof Array) res = []    // 判断数组, 更改返回类型
        for(let key in origin){
            let value = origin[key]
            res[key] = (deep && typeof value == 'object' && value != null) ? exten(value, deep):value
        }
        return res
    }
    let obj3 = exten(obj, true)
    obj3.name = 'bbb'
    obj3.arr[0].push('ccc')
    console.log(obj)
    console.log(obj3)
    

ajax

ajax:交互式网页开发技术,在不重新加载整个页面的情况下,与服务器交换数据并更新部分内容

通过XmlHttpRequest对象向服务器发送异步请求,然后从服务器拿到数据,最后通过js操作dom更新页面

  1. 创建XmlHttpRequest对象 xml
  2. xml.open()和服务器建立连接
  3. xml.send()发送数据
  4. xml.onreadystate() , xml.change()事件监听服务器和通信状态
  5. 接收并处理服务器响应的数据
  6. 更新数据到html页面

axios封装

vue2.0

npm install axios  // 安装
  1. 创建service.js配置文件

    import axios from 'axios'
    import { Message, Loading } from 'element-ui'
    const ConfigBaseURL = 'http://localhost:8080/' //默认路径,这里也可以使用env来判断环境
    let loadingInstance = null //这里是loading
    //使用create方法创建axios实例
    export const Service = axios.create({
        timeout: 7000, // 请求超时时间
        baseURL: ConfigBaseURL,
        method: 'post',
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    })
    // 添加请求拦截器(请求前执行)
    Service.interceptors.request.use(config => {
        loadingInstance = Loading.service({
            lock: true,
            text: 'loading...'
        })
        return config
    })
    // 添加响应拦截器(服务器响应后执行)
    Service.interceptors.response.use(response => {
        loadingInstance.close()
        return response.data
    }, error => {
        console.log('TCL: error', error)
        const msg = error.Message !== undefined ? error.Message : ''
        Message({
            message: '网络错误' + msg,
            type: 'error',
            duration: 3 * 1000
        })
        loadingInstance.close()
        return Promise.reject(error)
    })
    
  2. main.js使用

    import {Service} from '@/utils/service'
    
    Vue.prototype.request = Service	//将axios放在vue的this上(vue2)
    app.config.globalProperties.request = Service //(vue3)
    
  3. 使用

    // post方法
    this.request.post(`/menu/delete?id=${val}`).then(res=>{
      	// 请求成功
      }else{
        // 请求失败
      }
    });
    // get方法
    this.request.get("/echarts/getList").then(res =>{
         console.log(res)
    })
    

vue3.0

  1. 创建http.js

    import axios from "axios";//创建一个axios的对象
    //生成一个axios的实例
    const http=axios.create({
        baseURL:"http://localhost:8080/",// baseURL会在发送请求的时候拼接在url参数前面
        timeout:3000,//请求超时
    });
    export default http;//导出
    
  2. main.js使用

    import axios from "axios";
    const app = createApp(App)
    app.config.globalProperties.axios = axios
    
  3. 单页面使用

    getWeather:function (){
          this.axios.get(url).then(res =>{
            // console.log(res)
          })
        }
    
  4. 封装API的js文件使用(异步调用)
    封装函数js文件

    import http from "./http";
    export const getWeather = ()=>{
        return new Promise((resolve, reject)=>{
            http.get(url).then(res =>{
                resolve(res)
            })
        })
    }
    
      页面调用
    
    // 1.引入
    import  {getWeather} from '../request/HomeHeader.js'
    // 2.获取返回值
    let res = getWeather()
    // 方法一 采用promise实现异步
    res.then((res)=>{
      console.log(res)
    })
    // 方法二 采用async/await实现异步
      async created() {
        let res = await getWeather()
        console.log(res)
      }
    

get和post请求

  • get是请求数据,post是提交数据
  • get的请求参数放在url中,不安全,post请求参数放在body中
  • get请求会缓存,post不会缓存
  • 刷新或回退页面get不会重新请求,post会重新请求
  • get请求只能进行url编码,post支持多种编码方式

promise和async/await的区别是什么

  • 都是处理异步请求的方式
  • async/await是基于promise实现的
  • promise是返回对象,使用then,catch方法处理和捕获异步请求,链式书写,造成代码重叠,维护下差
  • async/await使用try,catch捕获异常

SVG格式

基于XML语法的图像格式,可缩放矢量图,本质是文本文件,无论缩放都不会失真

JWT

JSON Web Token 通过JSON形式作为在web应用中的令牌

JWT认证流程

  1. 前端发送登录请求给接口
  2. 服务器核对账号密码成功,把用户id等信息作为jwt负载,和他和头部进行base64编码,形成jwt
  3. 前端每次请求都会把jwt放在http请求头的Authorization字段内
  4. 服务器验证jwt的有效性,返回对应结果

JSON

JSON是一种纯字符串形式的数据,适合网络传输

  • JSON.parse()
  • JSON.stringfy()

数据没有请求过来时,该怎么做?

给数据设默认值,最后进行判断

无感登录

用户不需要重新登录,优化用户体验

方案如下

  • 在响应器中拦截,判断token过期后,调用刷新token的接口
  • 后端返回过期时间,前端判断token过期时间,去调用刷新token的接口
  • 设置定时器,定时刷新token

大文件上传

采用分片上传思想

  1. 把文件按照一定规则分块,分割成相同大小的数据
  2. 初始化一个分块上传,返回本次上传唯一标识
  3. 按照一定规则把各个数据上传
  4. 服务器判断文件完整性,完整就把文件块合并

断点续传

websocket(vue2.0实现)

  • 前端
    登录页:输入用户信息,进入聊天室
    聊天页:输入消息,点击按钮发送

    
    
    
    
    
  • 后端
    新建index.js文件

    const Ws = require('ws')
    
    // 立即执行函数
    ;((Ws)=>{
        const server = new Ws.Server({port: 8080});	// 要和前端监听同一个端口
    	
        // 初始化函数
        const init = ()=>{
            bindEvent();
        }
    
        function bindEvent(){
            server.on('open', handleOpen);
            server.on('close', handleClose);
            server.on('error', handleError);
            server.on('connection', handleConnection);
        }
    
        function handleOpen(){
            console.log('wb open')
        }
        function handleClose(){
            console.log('wb close')
        }
        function handleError(){
            console.log('wb error')
        }
        // 消息接收
        function handleConnection(ws){
            console.log('wb connection')
            ws.on('message', handelMsg)
        }
        // 消息处理
        function handelMsg(msg){
            // c : 表示每个客户端
            let oMsg = msg.toString()
            server.clients.forEach((c)=>{
                c.send(oMsg)
            })
        }
        init()
    })(Ws);
    

HTTP协议以及浏览器原理

http协议

web端发送请求报文(请求头、URL、请求方法、请求数据、协议版本) ==》 服务器端返回数据(响应头、协议版本、响应数据、响应代码(success/error)、服务器信息)

http协议是无状态协议 导致了 cookies的产生(用于验证服务器的合法性)

http协议版本

  • 1.0 只能
  • 1.1
  • 2.0

浏览器原理

  1. 输入网址
  2. DNS域名解析(有该网页则返回,没有返回错误信息)
  3. TCP三次握手(建立连接)
  4. HTTP请求(获取资源) =》 HTTP响应
  5. 浏览器渲染页面。HTML解析 =》 DOM树,css =》css规则树,两者结合渲染成render树,浏览器通过render对页面进行渲染布局

http缓存

  • 强缓存(本地缓存)和协商缓存(弱缓存)
  • 网页请求资源
    • 没有缓存 =》 使用服务器资源 =》返回请求资源。
    • 有缓存 =》强缓存命中 =》使用缓存内容 =》返回资源。
    • 强缓存未命中 =》协商缓存命中,使用缓存内容;未命中 =》服务器资源 =》返回资源

浏览器如何渲染页面

  • html解析成DOM树,CSS解析成CSS规则树
  • 浏览器将CSS规则树附着在DOM树上,结合生成Render渲染树
  • 生成布局:浏览器解析渲染树节点的位置和大小,在屏幕上渲染出所有节点(重排)
  • 将布局绘制在屏幕上,生成整个页面(重绘)

Http请求头和响应头

  • 请求头
    • Accept(浏览器可接受服务器返回数据类型, text/html, ‘/’ 代表所有)
    • Accept-Encoding(gzip, deflate 申明浏览器接受的编码方法)
    • Connection(keep-alive / close , 当浏览器与服务器建立了TCP连接,keep-alive表示不断开,下次请求服务器使用相同的TCP连接)
    • Host(服务器ip和端口)
    • Referer(浏览器的地址)
    • User-Agent(浏览器的操作系统和名称、版本)
    • Cookie(存储用户信息)
  • 响应头
    • Content-Type(Content-Type:text/html;charset=UTF-8):资源文件的类型以及编码方式
    • Content-Encoding: 编码格式
    • Date:服务器时间
    • Server:服务器信息
    • Connection(keep-alive/ close)
    • Access-Control-Allow-Origin:指定可以访问服务器的网址(Access-Control-Allow-Origin: *代表所有网站可以跨域资源共享)
    • Access-Control-Allow-Methods(GET, POST, DELETE, PUT)
    • Access-Control-Allow-Credentials(是否允许发送cookie)

同源策略

协议(http)+域名(www.a.com)+端口号(8080)三者一致,其中一个不同就不是同源,需要跨域

跨域的方法

  • JSONP(利用script标签不存在跨域的方式)
  • CORS(服务器配置响应头Access-Control-Allow-Origin)
  • websocket
  • 反向代理(中间件)

CSS

flex布局

flex 表示 flex-grow(设置扩展比例), flex-shrink(设置收缩比例), flex-basis(不伸缩的情况下子容器的原始尺寸)

flex:1: (1, 1, 0%) 不管内容多少,都是平分空间

flex:auto: (1, 1, auto) 根据内容的大小来分,不是均分的(除非内容都是一样,才均分)

flex:0: (0, 1, 0%)可缩小,不可扩大

flex:none:(0, 0, auto) 不可扩大 不可缩小

CSS样式优先级(权重)

  • !import > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符

盒子模型

在html页面中所以元素都可以看成是一个盒子

盒子组成

  • 内容content
  • 内边距padding
  • 边框border
  • 外边距margin

盒模型类型

  • 标准盒模型 margin+border+padding+content
  • IE盒模型 margin+content(padding + border)

控制盒模型的模式:box-sizing:content-box(默认值), border-box(IE盒模型)

隐藏元素的方法

  • display: none(元素消失,不占空间)
  • opacity: 0 (透明度,占空间)
  • visibility: hidden(元素消失,占空间)
  • position: absolute(将元素移除页面)
  • clip-path(将元素剪掉)

px和rem区别

  • px: 像素,绝对单位长度,每个显示器像素大小一样
  • rem:相对单位,相对于html根节点font-size的值来改变,html的根节点font-size = 62.5% => 1rem = 10px (16px * 62.5% = 10px)

重绘和重排(回流)

  • 重排(回流):布局引擎根据所有样式计算出盒模型在页面的位置和大小
  • 重绘:计算好盒模型在页面的位置和大小以及其他属性,然后根据每个盒模型的特性进行绘制
  • 对DOM的大小、位置修改,重排
  • 对DOM的样式修改,重绘

元素水平居中方式

  • 定位+margin
  • flex布局
  • grid布局
  • table布局

例:

<div id="app">
    <div id="sub">div>
div>
	 
        #app{
            width: 400px;
            height: 400px;
            position: relative;
            border: 3px solid royalblue;
        }
        #sub{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }

H5C3新特性

H5新特性

  1. 语义化标签
  2. 新增音频视频
  3. 画布canvas
  4. localStorage和sessionStorage
  5. 表单控件email url search
  6. 拖拽释放api

css3的新特性

  1. 选择器:属性选择器、伪类选择器、伪元素选择器
  2. 增加了媒体查询
  3. 文字阴影
  4. 边框
  5. 盒子模型box-sizing
  6. 渐变
  7. 过度
  8. 自定义动画
  9. 2D和3D

rem做适配

CSS属性继承

css三大特性 继承(子元素继承父元素属性)、层叠、优先级

CSS可以继承的属性

  • 文字:font
  • 文本:line-height
  • 元素可见性:visibility: hidden
  • 列表属性: list-style

预处理器

css的预处理器增加了函数、变量等,便于维护

  • SASS
  • LESS

例:

#app
{ span{ // 这里写span的样式 } } @global: #eee; // 定义全局变量,利于维护使用 #app{ color: @global; }

Node.js

入门

数据库连接,登录小案例

<form action="http://localhost:8080" method="post">
    <input type="text" class="username" name="username" />
    <input type="password" class="password" name="password"/>
    <input type="submit" value="提交" />
form>
const mysql = require('mysql')
const http = require('http')
const queryString = require('querystring')

const server = http.createServer((req, res)=>{
    let postVal = "";
    req.on("data", (chunk)=>{
        postVal+=chunk;
    })
    req.on('end', ()=>{
        let formVal = queryString.parse(postVal)
        let username = formVal.username;
        let pwd = formVal.password;
        console.log(username, pwd)

        // 连接数据库
        const conn = mysql.createConnection({
            host: 'localhost',
            port: 3306,
            user: 'root',
            password: '116054',
            database: 'test'
        })
        conn.connect();
        conn.query('select * from user where username=? and password=?', [username, pwd], (err, result, fields)=>{
            if(err) throw err;
            console.log(result);
            if(result.length>0){
                res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'});
                res.write('登录成功')
                res.end();      // 关闭http连接
            }
        });
        conn.end();     // 关闭数据库连接
    })
})

server.listen(8080)     // 端口监听

express

处理404

// catch 404 and forward to error handler
// 方法一
var createError = require('http-errors');
app.use(function(req, res, next) {
  next(createError(404));
});
// 方法二
// 所有路由之后配置处理404
app.use((req, res, next)=>{
  console.log('错误', err)
  res.status(404).send('404 Not Found')
})

你可能感兴趣的:(前端,vue.js,笔记,前端,笔记,vue.js)