区分Vue2和Vue3的配置读取（附Demo）

码农研究僧

于 2024-05-03 08:00:00 发布

阅读量549

点赞数 10

分类专栏：前端/小程序文章标签： Vue 配置读取前后端

本文链接：https://blog.csdn.net/weixin_47872288/article/details/138335894

版权

前端/小程序专栏收录该内容

58 篇文章 3 订阅

订阅专栏

前言

版本差异，此处着重做一个区分

1. 差异

读取配置时，两者版本的表示还是有些差异

Vue2的示例：

request 函数来发送 HTTP 请求，通过给定的 configKey 构建了一个 URL 来获取配置值

export function getConfigKey(configKey) {
  return request({
    url: '/xxx?key=' + configKey,
    method: 'get'
  })
}

Vue3示例：
箭头函数，使用了 Vue 3 的写法，并且使用 TypeScript 进行类型声明
通过构建 URL 来获取配置值，但是在发送请求时使用了一种不同的方式

export const getConfigKey = (configKey: string) => {
    return request.get({ url: '/xxx?key=' + configKey })
}

2. 完整示例

以下示例讲解两者使用的差异

对于后端都差不多，先给后端代码：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

@RestController
class ConfigController {

    @GetMapping("/infra/config/get-value-by-key")
    public ConfigResponse getConfigValueByKey(@RequestParam String key) {
        // 这里应该根据 key 查询相应的配置值
        String configValue = "Example Config Value";
        return new ConfigResponse(configValue);
    }
}

class ConfigResponse {

    private String value;

    public ConfigResponse() {
    }

    public ConfigResponse(String value) {
        this.value = value;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}

如果采用node.js的形式，具体如下：

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.get('/xxx', (req, res) => {
  const configKey = req.query.key;
  // 这里应该根据 configKey 查询相应的配置值
  const configValue = 'Example Config Value';
  res.json({ value: configValue });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

2.1 Vue2

前端如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 2 Example</title>
</head>
<body>
  <div id="app">
    <h1>{{ configValue }}</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="app.js"></script>
</body>
</html>

// app.js
new Vue({
  el: '#app',
  data() {
    return {
      configValue: ''
    };
  },
  mounted() {
    this.getConfigValue();
  },
  methods: {
    getConfigValue() {
      getConfigKey('example_key')
        .then(response => {
          this.configValue = response.data.value;
        })
        .catch(error => {
          console.error('Error fetching config value:', error);
        });
    }
  }
});

function getConfigKey(configKey) {
  return axios.get('/xxx?key=' + configKey);
}

2.2 Vue3

前端如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Example</title>
</head>
<body>
  <div id="app">
    <h1>{{ configValue }}</h1>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="app.js"></script>
</body>
</html>

// app.js
const app = Vue.createApp({
  data() {
    return {
      configValue: ''
    };
  },
  mounted() {
    this.getConfigValue();
  },
  methods: {
    getConfigValue() {
      getConfigKey('example_key')
        .then(response => {
          this.configValue = response.data.value;
        })
        .catch(error => {
          console.error('Error fetching config value:', error);
        });
    }
  }
});

app.mount('#app');

async function getConfigKey(configKey) {
  const response = await fetch('/xxx?key=' + configKey);
  return await response.json();
}