vue 学习笔记2

1. vue接收springboot的数据。

vue代码：

<template>
    <table>
        <tr>
            <td>id</td>
            <td>path</td>
        </tr>
        <tr v-for="item in videos" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.path}}</td>
        </tr>
    </table>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            videos: [
                {
                    id: 1,
                    path: "path1"
                },
                {
                    id: 2,
                    path: "path2"
                }
            ]
        }
    },
    created() {
        const _this = this
        axios.get('http://localhost:7077/shortvideo/index')
        .then(response=>{
            _this.videos = response.data
        })
        .catch(error=>{
            console.log("error: "+error)
        })
    }
}
</script>

springboot解决跨域：

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