axios是独立HTTP客户端，与Bootstrap无耦合；只需确保其正确加载，再在Bootstrap表单提交事件中调用，如拦截submit、preventDefault、发送post请求并处理响应与错误提示。
直接在Bootstrap页面里用axios，不需要“集成”
Bootstrap只是CSS和JS组件库，不干涉网络请求；axios是独立HTTP客户端，两者没有耦合关系。你只需要确保axios可用，再在Bootstrap表单的提交逻辑里调用它就行。
常见错误现象：axios is not defined —— 这说明CDN没加载成功，或模块未正确导入。
- 用CDN时，
<script></script>标签必须放在Bootstrap JS之后、你的业务脚本之前 - 用npm安装时，不能只写
import axios from 'axios'就完事，得确保该文件被实际执行（比如绑在表单submit事件里） - 别把axios当成Bootstrap插件——它不依赖
bootstrap.js，也不需要调用bootstrap.Modal之类的方法来“启用”
登录表单提交时用axios.post发请求
Bootstrap只负责样式和结构，真正发起请求要靠你自己写JS。比如用loginForm的submit事件拦截默认跳转，再发axios请求：
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
<p>try {
const res = await axios.post('/api/login', { username, password });
console.log(res.data);
// 成功后跳转或显示提示
} catch (err) {
console.error(err.response?.data || err.message);
}
});</p>
注意点：
-
event.preventDefault()必须加，否则表单会刷新页面 - 后端接口路径（如
/api/login）要和Spring Boot等后端实际暴露的路径一致 - 如果后端要求带token或
Content-Type: application/json，axios默认已处理，不用额外设
请求失败时用Bootstrap Alert展示错误
axios报错后，别只打console.error，用户看不到。用Bootstrap的alert类动态插入提示更友好：
<div id="errorAlert" class="alert alert-danger d-none"></div>
然后在catch里填内容并显示：
catch (err) {
const msg = err.response?.data?.message || '登录失败，请重试';
const alertEl = document.getElementById('errorAlert');
alertEl.textContent = msg;
alertEl.classList.remove('d-none');
}
关键细节：
-
d-none是Bootstrap 5的隐藏类，不是hidden或display: none硬写 - 优先读
err.response.data，而不是err.message，因为后者通常是网络层错误（如超时），而前者才是后端返回的业务错误 - 别忘了在下一次提交前清空alert，否则错误消息会一直挂着
跨域请求失败？重点检查Spring Boot的CORS配置
本地开发时，前端跑http://localhost:5173，后端跑http://localhost:8080，这属于跨域。axios发请求没问题，但浏览器会拦截响应——错误信息通常是Access to XMLHttpRequest at ... has been blocked by CORS policy。
Spring Boot侧必须配好@CrossOrigin或全局CorsConfiguration：
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173") // 不能写 * + withCredentials
.allowCredentials(true)
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
容易踩的坑：
-
allowedOrigins("*")和allowCredentials(true)不能共存，否则浏览器直接拒绝 - 如果前端用了
withCredentials: true（比如要传cookie），后端allowedOrigins必须指定具体域名，不能用通配符 - axios默认不带cookie，要手动开：
axios.defaults.withCredentials = true
最常被忽略的是：错误往往不出现在axios代码里，而出现在服务端CORS头没发全，或者前端没配withCredentials却指望后端返回session。先抓包看Network面板里的Request Headers和Response Headers是否匹配，比反复改JS更快。
