Day 27 - React And BootStrap 動態橫幅廣告 Carousel

上一章做了橫幅廣告

現在加入卡片式資訊, 我們一樣使用Reactstrap套件

新增MyCard.js

import React, { Component } from 'react';
import {
    Card,
    CardGroup,
    CardText,
    CardBody,
    CardTitle,
    CardSubtitle,
    Button,
} from 'reactstrap';

class MyCard extends Component {

    constructor(props) {
        super(props);
        this.state = { exams: [] };
    }

    componentDidMount() {
        fetch('api/exams').then(response => response.json()).then(data => this.setState({ exams: data }));
    }

    render() {
        const { exams } = this.state;

        const examList = exams.map(exam => {
            return (
                    <CardBody>
                        <CardTitle>證照: {exam.certificate.name}</CardTitle>
                        <CardSubtitle>協辦單位: {exam.vendor.name}</CardSubtitle>
                        <CardText>考試日期: {exam.examDate}</CardText>
                        <Button color="outline-primary">learn more</Button>
                    </CardBody>
            )
        });

        return (
            <CardGroup>
                { examList }
            </CardGroup>
        );
    }
}

export default MyCard;

Fetch API向後端請求exams的資料

大家可以發現這次的資料跟之前不太一樣

exam.certificate.name

exam.vendor.name

為什麼會有兩層呢? 因為我們後端的Model使用JoinColumn直接回傳整個物件

所以在我們的exam裡面會包含certificate與vendor物件

這樣取資料只需要取一次, DB也只需要進出一次, 節省了很多時間

頻繁進出DB會使程式效率極差, 在設計時應特別注意

現在啟動專案, 畫面應該長這樣

下一章 Day 29 - React Tree Graph 樹狀結構圖