14、springboot+vue概述

1、Book.vue

点击查看代码

<template>
<div>
  <table>
    <tr>
      <td>编号</td>
      <td>图书名称</td>
      <td>作者</td>
    </tr>
    <tr v-for="item in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.author}}</td>
    </tr>
  </table>

</div>
</template>

<script>
export default {
  name: "Book",
  data(){
    return{
      msg: '这是一本书',
      books:[
        {
          id:1,
          name: 'Java零基础实战',
          author: '宁楠'
        },
        {
          id:2,
          name: 'vue零基础实战',
          author: '张三'
        },
        {
          id:3,
          name: 'SpringBoot零基础实战',
          author: '李四'
        },

      ]
    }
  },
  // axios前后端交互
  created() {
    const _this = this
    axios.get('http://localhost:8181/book/findAll').then(function (resp){
      _this.books = resp.data

    })

  }
}
</script>


<style scoped>

</style>

2、springboot解决跨域问题

点击查看代码

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


    }
}