现在数据库、表和接口我们都已经完成了，这集可以试着从数据接口获得数据，显示在页面上了。实现这个需求，我们将使用 Axios 模块来实现。
安装 Axios 模块
先进入前台的文件夹，如果你和我写的文件名是一样的，应该是blog，引入后就可以使用npm命令进行安装了:
npm install --save axios
当然你用yarn来进行安装也是完全可以的。
yarn add axios
安装完成后可以到package.json里看一下现在安装的结果，我目前安装的 0.21.0 版本，你们学习的时候可以跟我的不太一样。
新建 getInitialProps 方法并获取数据
当Axios安装完成后，就可以从接口获取数据了。打开/blog/pages/index.js文件，在文件下方编写getInitialProps。
Home.getInitialProps = async () => {
const promise = new Promise((resolve) => {
axios('http://127.0.0.1:7001/default/getArticleList').then(
(res) => {
resolve(res.data)
}
)
})
return await promise
}
这里使用了经典的async/await的异步方法。
把数据放入到界面中
当我们在getInitialProps方法里获得数据后，是可以直接传递到正式方法里，然后进行使用:
const Home = (list) =>{
//---------主要代码-------------start
const [ mylist , setMylist ] = useState(list.data);
//---------主要代码-------------end
const IconText = ({ icon, text }) => (
<Space>
{React.createElement(icon)}
{text}
</Space>
);
return (
<>
<Head>
<title>Home</title>
</Head>
<Header />
<Row className="comm-main" type="flex" justify="center">
<Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14} >
<div>
<List
header={<div>最新日志</div>}
itemLayout="vertical"
dataSource={mylist}
renderItem={item => (
<List.Item>
<div className="list-title">{item.title}</div>
<div className="list-icon">
<IconText icon={ClockCircleOutlined} text={item.addTime} key="list-vertical-star-o" />
<IconText icon={VideoCameraOutlined} text={item.typeName} key="list-vertical-like-o" />
<IconText icon={FireOutlined} text={item.view_count} key="list-vertical-message" />
</div>
<div className="list-context">{item.introduce}</div>
</List.Item>
)}
/>
</div>
</Col>
<Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
<Author />
<Advert />
</Col>
</Row>
<Footer/>
</>
)
}
做完这步，我们的内容就应该正确的显示在页面上了，但是还是有点小问题，比如我们的日期格式还是不正确。
