什么是前后端分离？

• 前后端分离就是将⼀个应⽤的前端代码和后端代码分开写。

前后端分离的好处

• 前端只需要独⽴编写客户端代码，后端也只需要独⽴编写服务端代码提供数据接⼝即可。
• 前端通过Ajax请求来访问后端的数据接⼝，将 Model展示到View 中即可。
• 前后端开发者只需要提前约定好接⼝⽂档（URL、参数、数据型…），然后分别独⽴开发即可，前端可以造假数据进⾏测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应⽤的解耦合，极⼤地提升了开发效率。

前后端分离结构

传统的单体应用

核心代码

后端

@RestController
@RequestMapping("/book")
public class BookHandle {
    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll(){
        return bookRepository.findAll();
    }
}

前端

<template>
    <div>
        <table class="t_center">
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
                <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>
                <td>{{item.publish}}</td>
                <td>{{item.price}}</td>
                <td>{{item.pages}}</td>
            </tr>
        </table>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){
            return{
                msg: 'hello Vue',
                books: [{
                    id: 1,
                    name: '忘忧',
                    author: '忘忧',
                    publish: '中信出版社',
                    price: '123',
                    pages: '200'
                }]
            }
        },
        created() {
            const _this =this
      axios.get('http://localhost:8181/book/findAll').then(function (resp) {
                _this.books =resp.data
          })
        }
    }
</script>

<style scoped>
.t_center{
    text-align: center;
    margin: 0 auto;
}
</style>

解决跨域问题

@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("*");
    }
}

效果图