前后端联调相关知识点

需要准备一个后端服务，不会后端也没关系，可以使用apifox的mock功能

apifox工具简单使用

简单请求可以使用fetch，浏览器原生支持

<script setup>

function getData1(){
  fetch("http://127.0.0.1:4523/m1/7589623-7328062-default/api/get_data").then((response)=>{
    response.json().then(res=>{
      console.log(res)
    })
  })
}
getData1()

async function getData(){
  const response = await fetch("http://127.0.0.1:4523/m1/7589623-7328062-default/api/get_data")
  const res = await response.json()
  console.log(res)
}
getData()

</script>

但是如果要修改请求头就稍微麻烦一点，后面用axios会更简单一点

环境变量配置

通常情况下，我们在开发的时候会有不同的环境

如果我想实现根据不同的环境生效不同的配置，可以使用vite的环境变量

需要在package.json里面指定mode

  "scripts": {
    "dev": "vite --mode dev",
    "dev1": "vite --mode dev1",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build"
  },

npm run dev默认的mode是development

然后在根目录下创建对应环境的文件

VITE_SERVER_URL = http://127.0.0.1:8000
VITE_DATA = xxx

默认环境变量得以 VITE_ 开头

vue中读取环境变量

console.log(import.meta.env)

ts声明文件

/// <reference types="vite/client" />

interface ImportMetaEnv {
    VITE_SERVER_URL: string
}

vite中读取环境变量

因为后面配置跨域的时候，需要在vite.config.ts里面拿到后端路径做代理

import {fileURLToPath, URL} from 'node:url'

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import {vitePluginForArco} from '@arco-plugins/vite-vue'

// https://vite.dev/config/
export default defineConfig(({mode}) => {
    console.log(loadEnv(mode, process.cwd()))
    return {
        plugins: [
            vue(),
            vueDevTools(),
            vitePluginForArco({
                style: 'css'
            })
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            },
        },
    }
})

跨域配置

通常情况下，开发环境下的跨域问题都是前端配置代理

部署的时候，通过nginx做反向代理，是不会有跨域问题的

import {fileURLToPath, URL} from 'node:url'

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import {vitePluginForArco} from '@arco-plugins/vite-vue'

// https://vite.dev/config/
export default defineConfig(({mode}) => {
    console.log(loadEnv(mode, process.cwd()))
    return {
        plugins: [
            vue(),
            vueDevTools(),
            vitePluginForArco({
                style: 'css'
            })
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            },
        },
        server: {
            proxy: {
                "/api": {
                    target: "https://www.fengfengzhidao.com",
                    changeOrigin: true,
                },
                "/xxx": {
                    target: "https://www.fengfengzhidao.com",
                    changeOrigin: true,
                    rewrite(path) { // 重写请求路径（可选）
                        return path.replace("/xxx", "")
                    },
                },
                "/ws": {
                    target: "https://www.fengfengzhidao.com",
                    changeOrigin: true,
                    ws: true, // websocket 加上这个
                }
            }
        }
    }
})

/api1 ⇒ api1服务

/api2 ⇒ api2服务

Axios数据请求

axios入门教程

https://www.bilibili.com/video/BV1pu4y11793/?spm_id_from=333.1387.search.video_card.click&vd_source=d26aaf9cd661f32d35974fafdac0de5b

在api文件里面创建axios实例，然后配置请求、响应拦截器

import axios from "axios";

export const useAxios = axios.create({
    timeout: 6000,
    baseURL: "", // 如果你前端配置了代理，这个就不要填了
})

useAxios.interceptors.request.use((config)=>{
    config.headers["token"] = "xxx"
    return config
})

// 响应拦截器
useAxios.interceptors.response.use((config)=>{
    return config.data
})


export interface baseResponse<T> {
    code: number
    data: T
    msg: string
}

后续请求的接口，封装到一个函数里面

import {type baseResponse, useAxios} from "@/api/index.ts";

export interface dataType {
    "id": string
    "name": string
    "addr": string
    "avatar": string
    "ip": string
}

export function getDataApi(): Promise<baseResponse<dataType[]>> {
    return useAxios.get("/api/get_data")
}

在组件里面使用

<template>
  <div>
    <div v-for="item in data">
     <div>name: {{item.name}}</div>
     <div>addr: {{item.addr}}</div>
     <div>avatar: <img :src="item.avatar" :width="20" alt=""></div>
     <div>ip: {{item.ip}}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {type dataType, getDataApi} from "@/api/data_api.ts";
import {ref} from "vue";
const data = ref<dataType[]>([])

async function getData(){
  const res = await getDataApi()
  if (res.code){
    return
  }
  // 如果是ref类型
  data.value = res.data

  // 如果是reactive类型
  // Object.assign(data, res.data)
}

getData()

</script>

websocket联调

1. webscoket是没有跨域的
2. https环境应该使用wss

<template>

</template>

<script lang="ts" setup>
const websocket = new WebSocket("wss://www.fengfengzhidao.com/ws/api/chat_groups")
websocket.onopen = function (){
  console.log("连接成功")

  // 发送消息
  // const msg = JSON.stringify({content: "113",  msg_type: 2})
  // websocket.send(msg)
  // console.log("发送消息成功", msg)
}
websocket.onerror = function (ev){
  console.log("连接失败", ev)
}
websocket.onclose = function (ev){
  console.log("服务端断开", ev)
}

websocket.onmessage = function (ev){
  console.log("收到消息", ev)
}



</script>