仅用Maven开发SPA：能否像Vue.js一样引入Axios及替代方案问询

当然可以！完全符合你的需求——不用任何npm/yarn/webpack这类工具，只用Maven管理项目，同时像引入本地Vue文件那样引入Axios（或者用替代方案）来开发你的小型SPA。咱们一步步拆解解决：

你已经下载了Vue的本地文件，那Axios也完全可以用同样的方式处理：

• 先下载Axios的UMD格式文件（比如axios.min.js）
• 把它和你的Vue.js文件放在同一个目录下，然后在index.html的<script>标签里按顺序引入（先Vue，后Axios）

举个简单的示例结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小型SPA示例</title>
</head>
<body>
    <div id="app">
        <button @click="fetchData1">按钮1：获取数据1</button>
        <button @click="fetchData2">按钮2：获取数据2</button>
        <button @click="fetchData3">按钮3：提交数据</button>
        <div class="info-box">信息：{{ infoText }}</div>
    </div>

    <!-- 引入本地Vue文件 -->
    <script src="./vue.js"></script>
    <!-- 引入本地Axios文件 -->
    <script src="./axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    infoText: '等待操作...'
                }
            },
            methods: {
                async fetchData1() {
                    try {
                        const response = await axios.get('/api/data1'); // 假设你的后端接口
                        this.infoText = `按钮1返回：${response.data}`;
                    } catch (error) {
                        this.infoText = `请求失败：${error.message}`;
                    }
                },
                fetchData2() {
                    axios.get('/api/data2')
                        .then(res => this.infoText = `按钮2返回：${res.data}`)
                        .catch(err => this.infoText = `请求失败：${err.message}`);
                },
                fetchData3() {
                    axios.post('/api/submit', { content: '测试提交' })
                        .then(res => this.infoText = `按钮3提交成功：${res.data.msg}`)
                        .catch(err => this.infoText = `提交失败：${err.message}`);
                }
            }
        })
    </script>
</body>
</html>

如果不想用Axios，还有几个纯前端原生或轻量的选择：

原生Fetch API #

浏览器自带的API，不需要引入任何额外文件，语法简洁：

async fetchData1() {
    try {
        const response = await fetch('/api/data1');
        if (!response.ok) throw new Error('请求异常');
        const data = await response.json();
        this.infoText = `按钮1返回：${data}`;
    } catch (error) {
        this.infoText = `请求失败：${error.message}`;
    }
}

手写XMLHttpRequest（最原生） #

虽然代码稍繁琐，但完全不需要依赖任何外部库：

fetchData2() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data2');
    xhr.onload = () => {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            this.infoText = `按钮2返回：${data}`;
        } else {
            this.infoText = `请求失败：状态码${xhr.status}`;
        }
    };
    xhr.onerror = () => {
        this.infoText = '请求发生错误';
    };
    xhr.send();
}

jQuery的$.ajax（可选） #

如果你不介意引入jQuery的话，它的ajax方法也很成熟，只需下载jQuery本地文件并引入即可：

fetchData3() {
    $.post('/api/submit', { content: '测试提交' })
        .done(res => this.infoText = `按钮3提交成功：${res.msg}`)
        .fail(err => this.infoText = `提交失败：${err.statusText}`);
}

因为你只用Maven，只需把这些前端静态文件（Vue.js、Axios.min.js、index.html等）放在项目对应目录：

• 若为Spring Boot项目，放在src/main/resources/static目录下
• 若为普通Web项目，放在src/main/webapp目录下

Maven打包时会自动包含这些静态资源，不需要额外配置前端构建工具，完全契合你的需求。

内容的提问来源于stack exchange，提问作者Hayami Pysh