vue连接spring boot

<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: "user_01",
        data(){
            return{
                msg:'hello',
                books:[
                    {
                        id: 1,
                        name: 'alex',
                        author:'alexs'
                    },
                    {
                        id: 2,
                        name: 'blex',
                        author:'blexs'
                    },
                    {
                        id: 3,
                        name: 'clex',
                        author:'clexs'
                    }
                ]
            }
        },
        created() {
            const _this = this
            axios.get('http://localhost:8181/book/findAll').then(function (resp) {
                _this.books = resp.data
                // console.log(resp)
                //上边http://localhost:8181/book/findAll的就是spring boot从数据库拿到数据的地址，语法固定
            })
        }

    }
</script>

跨域问题

在该处新建文件

例码：

package com.example.springboottest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

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

    }
}
//写法固定，再遇到跨域问题直接复制粘贴即可