基于前后端协作的教材发放系统设计与实现

<template>

<div>

<h1>教材列表</h1>

<ul>

<li v-for="book in books" :key="book.id">

{{ book.name }} - {{ book.author }}

实训管理系统

</li>

</ul>

</div>

</template>

<script>

export default {

data() {

return {

books: []

};

},

created() {

this.fetchBooks();

},

methods: {

async fetchBooks() {

const response = await fetch('/api/books');

this.books = await response.json();

}

}

};

</script>

@RestController

@RequestMapping("/api")

public class BookController {

@Autowired

private BookService bookService;

@GetMapping("/books")

public List getAllBooks() {

return bookService.findAll();

}

}