[项目]Go语言与React实现图片浏览器 Day 2

首先把程序的框架搭建起来，内容在慢慢填充，下图是代码结构，第一个功能就是查询 图片列表并显示出来，在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"
        }
    ]
}

截图：