1、后端springboot配置
个人技术总结:vue使用axios传接口参数 - MEating - 博客园
2、前端vue配置
下载-->创建基于webpack的新项目-->连接到后端
难点一——连接后端:
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("*");
}
}
难点三——把两个vue放到同一个文件中:
写的vue页面放在components文件夹中,在app.vue中利用如下代码导入组件
<script>
// 导入组件
import get from './components/get'
import add from './components/add'
export default {
name: 'app',
components: {
get,
add
}
}
</script>
3、利用bootstrap让页面组件美观
下载安装bootstrap:
使用下面的命令将Bootstrap-Vue插件添加到项目中。选项提示时,选择 "Y"。
vue add bootstrap-vue
-->导入包:
用户对问题“为什么BootstrapVue不能渲染?”的回答 - 问答 - 腾讯云开发者社区-腾讯云
-->样式使用:
4、最终结果
通过这次实验,可算是对前后端的开发都有了基本的了解了。