图书馆-前端

Knowledge>FrontEnd
3.6k words

axios

代理 & 跨域

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7090',
        ws: true,
        changeOrigin: true,
      }
    }
  },
  ..
})

axios配置

1
axios.defaults.baseURL = ""; // 基础请求地址

请求
http.$_post("/api/sendEmail", data)
请求地址
axios.defaults.baseURL + /api/sendEmail
http://localhost:5173/api/sendEmail
匹配
/api
代理到
http://127.0.0.1:7090/api/sendEmail

错误使用

axios配置

1
axios.defaults.baseURL = "http://127.0.0.1:7090"; // 基础请求地址

请求地址
http://localhost:7090/api/sendEmail
跨域报错，不会被正确代理！



前端

同时传入子组件和父组件参数

  1. 使用箭头函数带入参数
    先接收子组件参数e，带入父组件参数row
    （实际上，这里的row是另一个子组件a-table-col传来的参数，参见Vue作用域插槽）
    1
    2
    3
    4
    5
    6
    <a-table-col>
      <template #default="{ row }">
        <input v-model="row.score"
                        @ok="(e) => scoreOk(e, row)"><input/>
      </template>
    </a-table-col>

select组件传递多个值

Ant Design Vue
使用labelInValue属性

1
2
3
4
5
6
7
8
9
10
11
<a-select
  v-model="ruleForm.foodItem"
  labelInValue
  @change="foodChange"
  placeholder="请选择">
  <a-select-option v-for="item in foodList"
                    :key="item.foodId"
                    :value="item.foodId">
    {{ item.foodName }}
  </a-select-option>
</a-select>

使得value变为了{key: item.foodId, label: item.foodName}
故v-model绑定的值ruleForm.foodItem也应该为Object，满足{key: xxx, label: xxx}
同时foodChange(e)，其中e也同样

选取一段时间时，获取起止时间

使用@change
1
<a-range-picker @change="changeInvDate"/>
声明起止时间
1
2
3
4
5
6
7
8
9
data() {
  return {
    // 查询数据模型
    queries: {
      billDateBegin: undefined,
      billDateEnd: undefined,
    }
  }
}
选取时间段后，赋值起止时间
1
2
3
4
changeInvDate(data) {
  this.queries.billDateBegin = data[0];
  this.queries.billDateEnd = data[1];
}

前端接收图片

设置responseType为blob

1
responseType: 'blob'

转换blob为url

1
2
3
4
// 返回的对象
const checkCodeImg = await user.getCheckCode({ type: 1 })
// blob转换为url
this.checkCodeUrl = window.URL.createObjectURL(checkCodeImg.data)

绑定url

1
<el-image :src="checkCodeUrl" fit="fill"/>

实现sleep()函数

1
2
3
sleep(time) {
  return new Promise(resolve => setTimeout(resolve, time))
}

const that = this

this用以指代当前对象
它的指向取决于函数的调用方式和上下文环境

  • 在一个普通函数中，this 指向全局对象（window 或 global）。
  • 在一个对象的方法中，this 指向该对象。
  • 在一个箭头函数中，this 指向定义时所在的对象。
  • 在一个事件处理函数中，this 指向触发事件的元素。
  • 在一个构造函数中，this 指向新创建的实例等等。

使用场景：需要在其他函数或回调函数中访问 Vue 实例的属性或方法时

批量添加元素/合并数组

  • Array.prototype.push()
    使用展开语法

    1
    2
    3
    this.baseList.forEach((item) => {
      this.goodList.push(...item.goodList)
    })

  • Array.prototype.concat()

    1
    2
    3
    this.baseList.forEach((item) => {
      this.goodList.concat(item.goodList)
    })

三元表达式多条件判断

1
row.isSend === '0' ? 'orange' : row.isSend === '1' ? 'green' : 'red'

数字转字符串开头/结尾按长度左右补”0”

1
2
3
4
5
6
// 开头补
'1'.padStart(3, '0') //001
'82'.padStart(5, '7') //77782

// 结尾补
'abc'.padEnd(5, '.') // abc..

数组转字符串用逗号分割

  • array.toString()
  • array.join(separator)

深拷贝、浅拷贝

  • 深拷贝 拷贝的是数据实体，新的内存空间
  • 浅拷贝 拷贝的是引用类型的指针，和原对象指向同一内存空间
Vue深拷贝的实现
  1. JSON.parse(JSON.stringify())
    1
    let newObj = JSON.parse(JSON.stringify(obj))
  2. 递归遍历原对象，逐个赋值

下面的方法仅一级属性为深拷贝，二级之后为浅拷贝
3. 使用扩展运算符...

1
2
3
4
5
6
var obj = {
    a: 1,
    b: 2
}
 
var obj1 = {...obj}

  1. Object.assign()

  2. 使用数组方法concat(), slice()


async/await 异步任务

async

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个
Promise 对象，而 await 会等待这个 Promise 完成

await

await 等待的是一个Promise对象，或者是其他值（也就是说可以等待任何值），如果等待的是Promise对象，则返回Promise的处理结果；如果是其他值，则返回该值本身

两种export

  • export

使用import时，需要知道所要加载的变量名或函数名
使用{}导入

  • export default
    为模块指定默认输出
    输出一个叫做default的变量或方法，系统允许你为它取任意名字

使用import时，不需要知道所要加载的变量名或函数名
不需要使用{}导入


通用

使用集合Set进行唯一性校验

1
2
3
4
5
6
7
8
// 唯一性校验
const idSet = new Set()
// list->set
this.list.forEach((item) => { idSet.add(item.id + item.name) })
// 对比集合和列表大小
if (idSet.size < this.list.length) {
  // 不唯一时逻辑
}