全部完成

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.16.13",
+    "json-loader": "^0.5.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

public/log/_0_log.json

@@ -0,0 +1,26 @@
+[
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211332,
+        "message": "hello world",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211334,
+        "message": "hi",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211335,
+        "message": "hey",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211340,
+        "message": "home work",
+        "term": 1
+    }
+]

public/log/_0_persistent.json

@@ -0,0 +1,4 @@
+{
+    "current_term": 1,
+    "voted_for": "1"
+}

public/log/_1_log.json

@@ -0,0 +1,26 @@
+[
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211332,
+        "message": "hello world",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211334,
+        "message": "hi",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211335,
+        "message": "hey",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211340,
+        "message": "home work",
+        "term": 1
+    }
+]

public/log/_1_persistent.json

@@ -0,0 +1,4 @@
+{
+    "current_term": 1,
+    "voted_for": null
+}

public/log/_2_log.json

@@ -0,0 +1,26 @@
+[
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211332,
+        "message": "hello world",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211334,
+        "message": "hi",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211335,
+        "message": "hey",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211340,
+        "message": "home work",
+        "term": 1
+    }
+]

public/log/_2_persistent.json

@@ -0,0 +1,4 @@
+{
+    "current_term": 1,
+    "voted_for": "1"
+}

public/log/_3_log.json

@@ -0,0 +1,26 @@
+[
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211332,
+        "message": "hello world",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211334,
+        "message": "hi",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211335,
+        "message": "hey",
+        "term": 1
+    },
+    {
+        "type": "client_append_entries",
+        "timestamp": 1636211340,
+        "message": "home work",
+        "term": 1
+    }
+]

public/log/_3_persistent.json

@@ -0,0 +1,4 @@
+{
+    "current_term": 1,
+    "voted_for": "1"
+}

public/log/log.json

@@ -0,0 +1,108 @@
+{
+    "log": [
+        [
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211332,
+                "message": "hello world",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211334,
+                "message": "hi",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211335,
+                "message": "hey",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211340,
+                "message": "home work",
+                "term": 1
+            }
+        ],
+        [
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211332,
+                "message": "hello world",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211334,
+                "message": "hi",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211335,
+                "message": "hey",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211340,
+                "message": "home work",
+                "term": 1
+            }
+        ],
+        [
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211332,
+                "message": "hello world",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211334,
+                "message": "hi",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211335,
+                "message": "hey",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211340,
+                "message": "home work",
+                "term": 1
+            }
+        ],
+        [
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211332,
+                "message": "hello world",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211334,
+                "message": "hi",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211335,
+                "message": "hey",
+                "term": 1
+            },
+            {
+                "type": "client_append_entries",
+                "timestamp": 1636211340,
+                "message": "home work",
+                "term": 1
+            }
+        ]
+    ]
+}

src/App.css

@@ -1,38 +1,41 @@
+@import '~antd/dist/antd.css';
+
+
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }

src/App.js

@@ -1,25 +1,11 @@
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
+import Log from "./log";
 
-function App() {
-  return (
+const App = () => (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <Log/>
     </div>
-  );
-}
+);
 
-export default App;
+export default App;

src/layout.css

@@ -0,0 +1,28 @@
+.site-layout-content {
+    min-height: 280px;
+    padding: 24px;
+    background: #fff;
+    margin-top: 5vh;
+}
+
+#components-layout-demo-top{
+    float: left;
+    width: 120px;
+    height: 31px;
+    margin: 16px 24px 16px 0;
+    background: rgba(255, 255, 255, 0.3);
+}
+.logo{
+    color: white;
+    font-size: xx-large;
+    font-weight: bolder;
+    align-items: center;
+    width: 80vh;
+    margin-left: 45vh;
+    /*background: rgba(248, 6, 6, 0.3);*/
+}
+
+.ant-row-rtl #components-layout-demo-top .logo {
+    float: right;
+    margin: 16px 0 16px 24px;
+}

src/log.js

@@ -0,0 +1,89 @@
+import React, {Component} from "react";
+import {Layout, Table} from "antd";
+import './layout.css'
+
+const { Header, Content, Footer } = Layout;
+
+class Log extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: [
+                [
+                    {
+                        type: 'client_append_entries',
+                        term: 1,
+                        timestamp: '1636211332',
+                        message: '233ok',
+                    },
+                ],
+            ],
+            columns: [
+                {
+                    title: '操作类型',
+                    dataIndex: 'type',
+                    key: 'type',
+                },
+                {
+                    title: '任期',
+                    dataIndex: 'term',
+                    key: 'term',
+                },
+                {
+                    title: '时间戳',
+                    dataIndex: 'timestamp',
+                    key: 'timestamp',
+                },
+                {
+                    title: '消息记录',
+                    dataIndex: 'message',
+                    key: 'message',
+                },
+            ]
+        }
+    }
+
+    componentDidMount() {
+        fetch('log/log.json')
+            .then((res) => res.json())
+            .then((data) => {
+                this.setState({
+                    data: data['log']
+                })
+                console.log(data['log'])
+            })
+    }
+
+
+    renderTable = (dataList) => {
+        return dataList.map((ele, index) => {
+            return (
+                (
+                    <Table dataSource={ele} columns={this.state.columns}/>
+                )
+            )
+        })
+    }
+
+    render() {
+        return (
+            <Layout className="layout">
+                <Header>
+                    <div className="logo">
+                        RAFT模拟作业 by-Shellmiao
+                    </div>
+                </Header>
+                <Content style={{ padding: '0 50px' }}>
+                    <div className="site-layout-content">
+                        {
+                            this.renderTable(this.state.data)
+                        }
+                    </div>
+                </Content>
+                <Footer style={{ textAlign: 'center' }}>Raft Homework ©2021 Created by Shellmiao</Footer>
+            </Layout>
+        )
+    }
+}
+
+export default Log;

yarn.lock

@@ -6813,6 +6813,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+json-loader@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.npm.taobao.org/json-loader/download/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+  integrity sha1-3KFKcCNf+C8KyaOr62DTN6NlGF0=
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"