1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>封面url</td>
                <td>书名</td>
                <td>作者</td>
                <td>出版日期</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.cover}}</td>
                <td>{{item.title}}</td>
                <td>{{item.author}}</td>
                <td>{{item.date}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){ // data是一个函数对象
            return{
                books: [
                    {
                        id: 1,
                        cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
                        title: '红楼梦',
                        author: '清婉儿',
                        date: '2020-06-14'
                    },
                    {
                        id: 2,
                        cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
                        title: '那一夜',
                        author: '卓文君',
                        date: '2020-06-14'
                    },
                    {
                        id: 3,
                        cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
                        title: '飞上你的床',
                        author: '上官飞燕',
                        date: '2020-06-14'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

// 引入 Book.vue
import Book from '../views/Book'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // 下面这是 vue3 的写法，这里我们还用vue2的写法注册组件
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/book',
        component: Book
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

spring:
    datasource:
        url: jdbc:mysql://localhost:3306/virgin show?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
        username: root
        password: 123456
        driver-class-name: com.mysql.cj.jdbc.Driver
    jpa:
        show-sql: true
        properties:
            hibernate:
                format_sql: true
server:
    port: 8181

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

package com.springboot.demo.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

/**
 * @author: latinos-bub
 * @date: 2020/6/14 20:51
 * @description:
 * @className: Book
 */
@Entity // 采用jpa依赖后，使用该注解，会自动将该类与数据库中的相同名字的表进行映射(注意：类与表名必须一样，首字母除外)
@Data // lomback 自动提供getter/setter
public class Book {

	@Id // 标注 数据库表中的主键字段
	private Integer id;
	String cover;
	String title;
	String author;
	String date;

    // ... 这里的字段属性最多可以等于 表的字段，这里我们只取5个演示即可

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

package com.springboot.demo.repository;

import com.springboot.demo.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;

/**
 * @author: latinos-bub
 * @date: 2020/6/14 20:55
 * @description:
 * @className: BookRepository
 */
public interface BookRepository extends JpaRepository<Book, Integer> {
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

package com.springboot.demo.repository;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;


@SpringBootTest
class BookRepositoryTest {

	@Autowired // 一定要将接口注入
	private BookRepository book;

	@Test
	void findAll(){

		System.out.println(book.findAll());

	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package com.springboot.demo.controller;

import com.springboot.demo.entity.Book;
import com.springboot.demo.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author: latinos-bub
 * @date: 2020/6/14 21:53
 * @description:
 * @className: BookHandler
 */
@RestController // restful 风格的 controller
@RequestMapping("/book")
public class BookHandler {


	@Autowired // 一定要自动注入这个 接口
	private BookRepository bookRepository;


	@GetMapping("/findAll") // spring boot 独有的
	public List<Book> findAll(){

		return bookRepository.findAll();
	}
}