Vue3 前端萌新笔记 - Eltirosto le Tirion

⚠️ 本文最后更新于2024年04月22日，已经过了372天没有更新，若内容或图片失效，请留言反馈

莎莎写的

post 请求 headers

通过axios.post或实例化的axios发送.get,.post或其他请求，get请求只能将参数在URL中拼出或携带请求头，post和其他请求方式可以携带参数传入服务端。
如果需要通过get请求传递参数，例如访问指定用户的用户信息界面，可以将需要传递的信息在URL中拼接上去，然后发送get请求。
例如，下面的例子就是对服务端发送get请求获取用户数据，并将参数通过URL传递过去

getuser() {
  server
    .get(`/user/${this.$route.params.uid}`)
    .then((response) => {
      if (response.data.result.friends.includes(localStorage.getItem('uid'))) {
        this.ismefriend = true
      }
      this.uid = response.data.result.uid
      this.uname = response.data.result.uname
    })
    .catch((error) => {
      console.error(error)
    })
}

在代码中，已经事先实例化了server，并连接到在本地部署的后端模拟业务请求

server = axios.create({
baseURL: 'http://127.0.0.1:5000/'
})

并通过VUE3的路由功能，使用${this.$route.params.uid}获取界面跳转时通过路由传入的需要查找的用户唯一标识，然后拼接到get链接上向后端发送请求。

跨域

浏览器发送协议，域名，端口不同的地方会产生跨域问题，包括访问本地文件，因为本地文件采用file://协议，与http://或https://是两种协议类型，导致访问本地文件也会产生跨域。

如果不通过浏览器进行访问是不会产生跨域问题的，跨域问题只会存在于通过浏览器发送请求。可以通过在后端配置CORS或在前端搭建代理服务器解决

拦截器

实例化axios连接后可以为该连接配置拦截器，分别在请求发出时和请求接收时提前业务代码处理返回或发出的包，进行数据操作，如增加请求头内容，判断错误码等

例如

server.interceptors.request.use((request) => {
  console.log('拦截器使用正常 | request')

  if (!localStorage.getItem('token') && !request.headers['login']) {
    console.log('token不存在')
    return Promise.reject('缺少token')
  }
  request.headers['token'] = localStorage.getItem('token')
  return request
})

server.interceptors.response.use((response) => {
  console.log('拦截器使用正常 | response')
  if (response.data.code !== 52000) {
    return Promise.reject(`响应出错！${response.data.msg}`)
  }
  return response
})

上段代码在实例化的server连接中定义了两个拦截器，例如，在请求发出时，会先触发request拦截器，这个拦截器的功能是在控制台输出拦截器使用正常 | request之后判断本地是否储存了token数据，或是否是登陆行为，如果都为否，则说明用户未登录就在进行业务操作，将会在在控制台输出内容token不存在并抛出一个内容是缺少token的错误，可以通过相应连接的.catch捕获到错误，并根据错误内容执行相应的内容，而如果一切正常，则在请求头中加入token内容，之后正常发送请求。

css样式

style标签里如果有scoped表明该CSS样式只作用于该页面，不会透传，但包裹新页面的父模块中的CSS内容会透传

axios 读取本地文件

vue3已经配置了代理服务器访问本地文件，只需要将本地静态文件放于public目录下即可，且不必以绝对或相对路径的方式定位到public文件夹再访问下面的文件，可以直接写文件在public文件夹下所在的路径，如访问public文件夹下的A文件夹内的B.json，只需在axios get请求中输入"/A/B.json”
例如

  axios
    .get(`/json/${localStorage.getItem('uid')}/${this.uid}/messages.json`)
    .then((response) => {
      if (typeof response.data !== 'object') {
        throw Error(`聊天记录 ${this.uid} 不存在！`)
      }
      this.messages = response.data
    })
    .catch((error) => {
      alert(error)
      console.error(error)
    })

通过get方式请求项目目录下public路径中属于特定用户的聊天记录，用户标识uid储存在localStorage中

在VUE3中，如果请求失败，会以String类型返回项目目录下index.html中的内容，所以通过判断获取的json文件数据类型是否正确来判断是否获取成功
6.vue-picture-cropper图片裁切

通过<VuePictureCropper>标签调用，如果传入参数正确，将会显示裁剪图像的操作界面，:img为操作的图片，需要传入blob。
通过cropper.get来访问裁剪后图片

cropper.getDataURL//获取base64
cropper.getBlob//获取Blob 必须异步
cropper.getFile//获取File 必须异步

但参入的传输需要为blob数据，如果是在vue3中通过一个<input type='file' @change='handleFileChange'>输入框或拖动等方式传入图片，需要通过readAsDataURL()将文件转为blob格式，例如

handleFileChange(event) {
  const file = event.target.files
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    this.img = String(reader.result)
  }
}

传入的参数event为<input>传入的文件，转为blob格式后传入声明的this.img变量中。

    <VuePictureCropper
  :boxStyle="{
    width: '20%',
    height: '20%',
    backgroundColor: '#f8f8f8',
    margin: 'auto'
  }"
  :img="this.imgBinary"
  :options="{
    viewMode: 1,
    dragMode: 'crop',
    aspectRatio: 1 / 1
  }"
/>

然后在<VuePictureCropper>中使用

By 莎莎 On 2024年4月19日