springboot+vue+bootstrap 前后端分离进行数据交互

1、后端springboot配置

        个人技术总结：vue使用axios传接口参数 - MEating - 博客园

2、前端vue配置

        下载-->创建基于webpack的新项目-->连接到后端

        Vue.js 安装 | 菜鸟教程

        难点一——连接后端：

                index.js中配置后端地址，main.js中import导入vue页面中用到的bootstarp，axios等包；

                vue+Springboot 前后端数据交互(1)_梁青风的博客-CSDN博客

        难点二——跨域问题：

                前端和后端不能同时使用一个端口号，故本次实验中前端vue采用localhost:7070，后端springboot采用localhost:8080，因此出现跨域问题。

                在spring 创建config类，把下面的代码复制粘贴就可以解决跨域问题了。不需要知道为什么，复制粘贴就完事

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

http://t.csdn.cn/ZizI5

        难点三——把两个vue放到同一个文件中：

                写的vue页面放在components文件夹中，在app.vue中利用如下代码导入组件

3、利用bootstrap让页面组件美观

        下载安装bootstrap：

        使用下面的命令将Bootstrap-Vue插件添加到项目中。选项提示时，选择 "Y"。

vue add bootstrap-vue

        用Vue 和Bootstrap 4 来构建Web前端界面

        -->导入包：

        用户对问题“为什么BootstrapVue不能渲染？”的回答 - 问答 - 腾讯云开发者社区-腾讯云

        -->样式使用：

        表单 · BootstrapVue     

4、最终结果

        通过这次实验，可算是对前后端的开发都有了基本的了解了。