前言
版本差异，此处着重做一个区分
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();
}