项目中总结的一些经验和思想

你睡醒了吗
144 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

1.文件读取器

  • FileReader使用步骤
 1.实例化一个FileReader对象
 const reader = new FileReader()
 2.打印reader看一下
 //console.log(reader)
 3.调用readAsDataURL
 reader.readAsDataURL(要转格式的文件)
 4.调用onload事件
 reader.onload = () => {
       //图片格式转化完毕要做什么事
   }
   5.reader.result存储的是转化好的bese64格式的文件

2.使用拦截器的时候

1.使用请求拦截器,一般用于设置请求头

2.使用响应拦截器,一般用于发送请求失败要做的事情

如果不清楚代码到底写在失败的回调还是成功的回调,可以先分别log一下,看一下会触发哪一个回调函数

3.语法

请求拦截器

axios.interceptors.request.use((config) => {
  // 请求成功要做什么
  // console.log(config)
  return config
}, (err) => {
  // 请求失败要做什么
  return err
})

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use((config) => {
  // 响应成功做什么
  // console.log('成功')
  return config
}, (err) => {
  // 响应失败做什么
  // console.dir(err)
  }
  return err
})

3.数据持久化

vuex-persistedstate

使用步骤

1.npm i vuex-persistedstate

2.引入,一般是在vuex中引入

import createPersistedState from 'vuex-persistedstate'

3.挂载到插件

plugins: [createPersistedState()],

4.表单的三层结构--校验

 el-form:表单的三层结构
        el-form: model  rules
        el-form-item: prop
        el-input: v-model
        

5.浅拷贝解决方案

1.Object.assigin({},要拷贝的对象),拷贝完成后{}数据在这里面

userForm:Object.assigin({},要拷贝的对象)

2.展开运算符:{...对象}

userForm:{...对象}

6.变量的生命周期

1.全局变量的生命周期:

生:页面加载时,死:页面关闭时

2.局部变量的生命周期:

生:函数调用时,死函数调用完毕时

3.怎么改变局部变量的生命周期

function fn(){
 let b=20
    retrun function (){
        return b
    }
}

7.ajax请求

1.简写:axios.get(地址,{params:参数}) get或delete

2.简写:axios.post(地址,{params:参数}) post或put(部分) patch(全部)

3.完整写法

  axios({
        url:'请求路径',
        method:'get',
        data: { 'post请求参数'},
        params: { 'get请求参数'}
    }).then(res=>{
        //成功回调
        console.log(res)
    })

8.vue里route和router的区别

  1. this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。

  2. route还可以拿路径后面的参数

    • query查询 字符串传参,使用场景:页面搜索

    传：/page2?a=1&b=2 收 $route.query

    • params传参 使用场景: 详情页 传: /page2/1/2 路由配置

      接：$route.params

  3. this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

9.图片转化格式

img标签的src支持base64格式和图片地址(blob二进制) 的方式赋值

1.浏览器有一个内置处理图片的API ---url可以转图片格式为blob获取到图片地址

const url = URL.createObjectURL(图片文件)

url可以得到一个图片地址.

// 图片预览--浏览器有一个内置处理图片的API ---url可以转图片格式为blob获取到图片地址
        const url = URL.createObjectURL(files[0])
        // 赋给img标签的src属性
        this.$refs.imgRef.src = url
        //如果要给图片赋值为默认的路径不能直接赋值为路径
        可以将图片作为模块导入,再付给src

2.图片转base64格式

        // new FileReader()文件读取器
        const reader = new FileReader()
        // console.log(reader) //readAsDataURL图片转数据路径函数
        reader.readAsDataURL(e.target.files[0])
        // 数据读取完毕后触发这个回调
        reader.onload = () => {
        //   console.log(reader.result)
          //   把转化格式后的值赋给avatar存起来
          this.avatar = reader.result
        //   console.log(this.avatar)

10.数据转化FormDate格式

        // 数据转换格式
        //实例化一个FormData对象
        const fd = new FormData()
        //循环向fd对象中赋值
        Object.keys(this.pubForm).forEach(el => {
          fd.append(el, this.pubForm[el])
        })
        // console.log(...fd) 查看是否赋值成功
        //或者是通过dir展开利用fd中forEach,打印查看所有元素
  • this.pubForm要遍历的数组

11.过滤器

1.局部过滤器

• 局部过滤器只能在当前 Vue 实例中使用。

1.引入
import dayjs from 'dayjs'
2.使用
filters: {
    过滤器名字: function (value) {
      return 要过滤的业务代码
    }

2.全局过滤器--以dayjs为例

// 引入dayjs
import dayjs from 'dayjs'
​
// 定义全局过滤器
Vue.filter('dateFormat', (value) => {
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
})

  • 使用 {{ 实参| 过滤器名称}}

  • 可以传多个参数 {{ 实参1,实参2| 过滤器名称}}

12.路由懒加载

是什么: 延迟加载或按需加载，就是用到的时候再进行加载

作用： 1.主页的加载速度更快

2.提高用户的体验感

3.减轻服务器的压力

语法:

image.png 触发: 用户点击了某个路径就会自动触发

13.promise

是什么:

  1. promise代表的是一个异步的操作,它是构造函数 new promise

2.new promise() 时,要穿一个参数,这个参数一般都是回调函数,这个 函数会立即触发。

3.回调函数一般都写异步的代码

4.promise的原型上一些方法,这些方法是可以被实例调用的 then catch finally

promise的三种状态

1.pending 等待

2.fulfilled 成功

3.rejected 失败

方法

14.native修饰符

将组件的原生事件绑定到组件内部的根元素上原理是冒泡,会触发同名事件

1.背景: 我们在使用别人的框架时,如果添加了点击事件没有被触发,是因为其内部没有做this.$emit('事件名')的触发.

2.解决: 此时就可以使用.native修饰符,将原生事件绑定到组件的根元素上

15.跨域的解决方案

1.jsonp 缺点:只发送get请求 不能发送post请求

原理: 动态的创建script标签,添加src属性(但是这个请求是异步的),需要我们在页面声明一个函数,后端(服务器端)调用,把数据作为函数返 回给我们。

2.cors

原理:在响应头中添加 Access-Control-Allow-Origin:*

3.方向代理

原理: 服务器与服务器之间不存在跨域,可以相互同信

在vue.config.js中做以下配置

devServer:{
proxy: {
      /* 它会自动匹配路径中是否包含api,包含走target,它会把axios的本地路径偷偷替换成目标路径
          http://localhost:8888/api/sys/login  => http://ihrm-java.itheima.net/api/sys/login
​
                                     不包含api的话,它会走pathRewrite,用''空字符串替换/api
                                     =>http://ihrm-java.itheima.net/sys/login
      */
      // '/api': {
      //   // 目标路径,
      //   target: 'http://ihrm-java.itheima.net',
      //   // 路径重写
      //   pathRewrite: {
      //     '^/api': ''
      //   }
      // }
  }

16.includes()方法

语法: A.includes(B),判断A是否包含B

返回值: 此方法返回一个布尔值

17.进度条-NProgress

使用步骤

1.下载 npm i NProgress

2.导入插件和样式

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

3.常用的方法

开启进度条 : NProgress.start()

结束进度条 : NProgress.done()

4.注意点: 一般会使用在路由后置守卫里,但是如果在前置守卫跳转到其他页面的话,就不会走后置路由,这时候就需要手动停止进度条 。

image.png

18.路由守卫

1.前置路由守卫

// 路由前置守卫
router.beforeEach((to, from, next) => {
    to:到哪里去
    from:从哪儿来
    next:放行
}

2.后置路由守卫

// 路由后置守卫
router.beforeEach((to, from) => {
    to:到哪里去
    from:从哪儿来
}

19.自定义指令

1.全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('指令名', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el,binding) {
    // el 指令所绑定的元素，可以用来直接操作 DOM。
    //binding 一个对象，包含  A:   value：指令的绑定值
                            B:   oldValue：指令绑定前一个值
                            name：指令名，不包括 v- 前缀。
  }
})

2.局部注册

directives: {
  指令名: {
    // 指令的定义
    inserted: function (el) {
     // el 指令所绑定的元素，可以用来直接操作 DOM。
    }
  }
}

3.使用: 和vue系统自带的指令使用一样

文档地址:cn.vuejs.org/v2/guide/cu…

补充:

在项目较大的时候,可以用单独的文件放自定义指令对象, 1.如:image.png

2.在main.js中全部导入

image.png

3.循环遍历注册全局指令

image.png

后面会陆续补充~~

avatar
文章
阅读
粉丝