前后端分离学习笔记：1-3 springboot+vue概述--前后端分离

目录

一、前端页面展示（此处按照讲课的顺序进行展示）

二、后端代码编写

三、前后端连通

---

一、前端页面展示（此处按照讲课的顺序进行展示）

目的：创建前端书籍展示列表

 

首先创建book.vue

（此处只是简单测试能不能展示）

 然后在路由中配置

最后界面显示如下

 接下来造假数据

创建books数组，将数据写入

通过v-for遍历books

<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: 'hello vue',
                books: [
                    {
                        id: 1,
                        name: 'java零基础',
                        author: '张三'
                    },
                    {
                        id: 2,
                        name: 'VUE',
                        author: '李四'
                    },