首先把程序的框架搭建起来,内容在慢慢填充,下图是代码结构,第一个功能就是查询 图片列表并显示出来,在PhotoList.js文件中实现。已经提交到GitHub:React Photo,功能已经实现了剩下就是调整页面效果了,边学习React边优化,毕竟主要的目的还是学习React开发嘛,要是深入学习还是有很多功能的,这只是刚刚迈出了一小步而以,加油鸭!
App.js
import React from 'react';
import './App.css';
import PhotoList from './components/PhotoList';
import Header from './components/Header';
import Footer from './components/Footer';
function App() {
return (
<div className="App">
<Header />
<main>
<PhotoList />
</main>
<Footer />
</div>
);
}
export default App;
PhotoList.js
import React from 'react';
class PhotoList extends React.Component{
constructor(){
super()
this.state = {
isLoaded: false,
items: []
};
}
handleclick(){
fetch('http://127.0.0.1:8000/albums/all', {
method: "GET",
})
.then(response => response.json())
.then(data => {
this.setState({
isLoaded: true,
items: data.Data
});
console.log(this.state.items)
})
}
render(){
const { isLoaded, items } = this.state;
if(isLoaded) {
return (
<div className="App">
<button onClick={this.handleclick.bind(this)}>Get photos</button>
<h1>Photos List</h1>
<ul>
{items.map(item => (
<li key={item.NameSha256}>
<a target="_blank" rel="noopener noreferrer" href={'http://127.0.0.1:8000/show/'+item.FilePath +'/'+item.FileName}>
<img src={'http://127.0.0.1:8000/show/'+item.FilePath +'/'+item.Preview} alt={item.FileName} />
</a>
</li>
))}
</ul>
</div>
);
}else return (
<div className="App">
<button onClick={this.handleclick.bind(this)}>Get photos</button>
</div>
);
}
}
export default PhotoList;
服务器返回的数据:
{
"State": 1,
"Msg": "",
"Data": [
{
"FileSize": 1209856,
"FileName": "1565061018014040600.jpg",
"FilePath": "201908",
"FileType": "image/jpeg",
"Preview": "1565061018014040600_300.jpg",
"NameSha256": "f984dc523d994288a9f5d0e8d18d3dffb1e61dd18442d6f9074afd7a43ee14f4",
"CTime": "1565060905"
},
{
"FileSize": 2090800,
"FileName": "1565061020499320200.jpg",
"FilePath": "201908",
"FileType": "image/jpeg",
"Preview": "1565061020499320200_300.jpg",
"NameSha256": "8bb1c78f408427f4b5e700529064ccda71b9b37a2d74de9a574ff5464de022fa",
"CTime": "1565060906"
},
{
"FileSize": 2102843,
"FileName": "1565061023504761800.jpg",
"FilePath": "201908",
"FileType": "image/jpeg",
"Preview": "1565061023504761800_300.jpg",
"NameSha256": "7866fbf782f1fec80b73314d3e70bc497b90856da19060f2bd337fd9b0bbd748",
"CTime": "1565060907"
}
]
}
截图: