添加主页拉取逻辑，改善主页结构，加入简易的媒体查询

src/App.css

@@ -74,3 +74,16 @@ button.btn {
   height: 30px;
   margin-left: 10px;
 }
+
+.content {
+  width: 1000px;
+  margin: 0 auto;
+  padding-top: 30px;
+}
+
+@media (max-width: 1080px) {
+  .content {
+    width: calc(100% - 80px);
+    margin: 0 40px;
+  }
+}

src/components/UploadUnit/UploadUnit.js

@@ -162,15 +162,18 @@ export default class UploadUnit extends Component {
     return (
       <div className="upload-wrap">
         <div className={this.state.status === -1 ? 'upload-unit' : 'upload-unit open'} style={{ width: this.state.status <= 1 ? '' : `${this.state.width}px` }}>
-          {this.state.src
+          {
+            this.state.src
             ? <img src={this.state.src} alt="压缩后的图片" style={{ filter: this.state.status === -1 ? 'opacity(0)' : '' }} ref={this.imgRef} />
             : null
           }
-          {this.state.status >= 0
+          {
+            this.state.status >= 0
             ? (
               <Fragment>
                 <div className={this.state.status === 2 ? 'upload-unit-mask hide' : 'upload-unit-mask'}>
-                  {this.state.status === 3
+                  {
+                    this.state.status === 3
                     ? (
                       <div className="upload-unit-progress">
                         <div className="progress-circle">
@@ -184,9 +187,11 @@ export default class UploadUnit extends Component {
                           上传中
                         </div>
                       </div>
-                    ) : null
+                    )
+                    : null
                   }
-                  {this.state.status <= 1
+                  {
+                    this.state.status <= 1
                     ? (
                       <div className="upload-unit-progress">
                         <Spinner />
@@ -194,34 +199,43 @@ export default class UploadUnit extends Component {
                           {this.state.status === 0 ? '加载中' : '压缩中'}
                         </div>
                       </div>
-                    ) : null
+                    )
+                    : null
                   }
-                  {this.state.status === 4
+                  {
+                    this.state.status === 4
                     ? (
                       <div style={{ color: '#FFF', fontSize: '16px' }}>上传成功</div>
-                    ) : null}
+                    )
+                    : null
+                  }
                 </div>
                 <div className="upload-btns">
-                  {this.state.status === 2
+                  {
+                    this.state.status === 2
                     ? (
                       <button className="btn btn-circle btn-ok" onClick={this.upload}>
                         <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M939.717 106.665l-304.049 324.529-78.769 85.071-225.28 240.246-123.668-115.003-129.182-121.305-78.769 84.283 129.969 121.305 33.083 31.508 129.969 121.305 44.111 40.96 304.049-324.529 78.769-85.071 304.049-324.529-84.283-78.769z" fill="#ffffff"></path></svg>
                       </button>
-                    ) : null
+                    )
+                    : null
                   }
-                  {this.state.status === 2 || this.state.status === 4
+                  {
+                    this.state.status === 2 || this.state.status === 4
                     ? (
                       <button className="btn btn-circle btn-primary" onClick={this.scale}>
                         <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path></svg>
                       </button>
-                    ) : null
+                    )
+                    : null
                   }
                   <button className="btn btn-circle btn-gray" onClick={this.handleCancel}>
                     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path></svg>
                   </button>
                 </div>
               </Fragment>
-            ) : null
+            )
+            : null
           }
         </div>
         <div className={this.state.isScaled ? 'scaled-wrap open' : 'scaled-wrap'} onClick={this.unscale}>

src/helper/apis.js

@@ -6,7 +6,7 @@ export const apis = {
   getProfile: backEndBaseURL + "/user/me",
 
   submitMessage: backEndBaseURL + "/post/submit",
-  listEssence: backEndBaseURL + "/post/listPublished",
+  listEssence: backEndBaseURL + "/post/listPublished?page=1",
 
   listAll: backEndBaseURL + "/admin/list",
   setStatus: backEndBaseURL + "/admin/setStatus"

src/index/index.css

@@ -15,24 +15,36 @@
   right: 40px;
   bottom: 20px;
 }
-.message {
+/* 这里的卡片和分栏结构就比较接近bootstrap了，可惜视觉做的太古板，如果愿意的话改成Material Design就更好了 */
-  width: calc(50% - 60px);
+.split-lg > .card {
-  margin-top: 30px;
+  width: 440px;
+  flex-shrink: 0;
+  margin: 0 5px;
 }
-
+.card-header {
-.container {
-  display: flex;
-  width: 1000px;
-  margin: 0 auto;
-  justify-content: space-between;
-}
-.cut-line {
-  display: flex;
-  height: 1px;
-  width: 100%;
-  background-color: #e6e6e6;
-}
-.little-title {
   padding: .75em .5em;
   font-size: 18px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.card-center {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.card-body {
+  padding: 10px;
+}
+
+.split-lg {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 980px) {
+  .split-lg > .card {
+    width: 100%;
+    margin-bottom: 20px;
+  }
 }

src/index/index.js

@@ -1,19 +1,84 @@
 import { Component } from 'react';
 import { Link } from '../components/SingleRouter/SingleRouter';
+import Spinner from '../components/Spinner/Spinner';
+import { alert } from '../helper/alert';
+import { apis } from '../helper/apis';
+import { get } from '../helper/axios';
 import { images } from '../resources.json';
 import './index.css';
 
 export class AppContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      essentialMessages: [],
+      essentialImages: [],
+      fetchingEssential: false,
+    };
+  }
+
+  componentDidMount() {
+    if (this.state.fetchingEssential) return;
+    this.setState({ fetchingEssential: true });
+    get(apis.listEssence).then(({ data, status, networkStatus }) => {
+      this.setState({ fetchingEssential: false });
+      if (networkStatus !== 200) return;
+      if (!status) return alert('获取精选列表失败：' + data + '，请刷新重试');
+      let messages = [], images = [];
+      data.forEach(post => {
+        if (post.content) messages.push(post.content);
+        if (post.image) images.push(post.image);
+      });
+      this.setState({ essentialMessages: messages, essentialImages: images });
+    });
+  }
+
   render() {
     return (
-      <div className="App">
+      <div className="index-container">
         <div className="poster">
           <img src={images.poster} className="img-poster" alt="海报" />
           <Link to="/upload" className="btn btn-light btn-straight btn-partIn">点击参加</Link>
         </div>
-        <div className="container">
+        <div className="content split-lg">
-          <div className="message"><div className="little-title">精选留言</div><div className="cut-line"></div>{ }</div>
+          <div className="card">
-          <div className="message"><div className="little-title">精选图片</div><div className="cut-line"></div>{ }</div>
+            <div className="card-header">
+              精选留言
+            </div>
+            <div className="card-body">
+              {
+                this.state.fetchingEssential
+                ? <div className="card-center"><Spinner /></div>
+                : (this.state.essentialMessages.length === 0
+                  ? (<div className="card-center">暂时没有精选留言</div>)
+                  : (
+                    <ul className="message-list">
+                    {this.state.essentialMessages.map(msg => (
+                      <li dangerouslySetInnerHTML={{ __html: msg }}></li>
+                    ))}
+                    </ul>
+                  )
+                )
+              }
+            </div>
+          </div>
+          <div className="card">
+            <div className="card-header">
+              精选图片
+            </div>
+            <div className="card-body">
+              {
+                this.state.fetchingEssential
+                ? <div className="card-center"><Spinner /></div>
+                : (this.state.essentialImages.length === 0
+                  ? (<div className="card-center">暂时没有精选图片</div>)
+                  : this.state.essentialImages.map(src => (
+                    <img src={src} alt="精选图片" />
+                  ))
+                )
+              }
+            </div>
+          </div>
         </div>
       </div>
     );

src/upload/upload.css

@@ -8,10 +8,6 @@
   background-color: #9D0004;
 }
 
-.content {
-  width: 800px;
-  margin: 0 auto;
-}
 .message-box {
   width: 100%;
   height: 300px;

src/upload/upload.js

@@ -77,27 +77,37 @@ export class UploadContainer extends Component {
             />
           </div>
           <div className="upload-box">
-            {this.state.file ? (
+            {
-              <UploadUnit
+              this.state.file
-                file={this.state.file}
+              ? (
-                onUpload={url => this.setState({ url })}
+                <UploadUnit
-                onUploadError={this.handleUploadError}
+                  file={this.state.file}
-                onCancel={() => this.setState({ file: null, url: "" })}
+                  onUpload={url => this.setState({ url })}
-                upload={this.state.submitting}
+                  onUploadError={this.handleUploadError}
-              />
+                  onCancel={() => this.setState({ file: null, url: "" })}
-            ) : (
+                  upload={this.state.submitting}
-              <div className="upload-image-btn">
+                />
-                <input type="file" accept="image/*" multiple={false} onChange={this.handleChange} />
+              )
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 54"><path d="M60.342,102.091l5.331-8a2.249,2.249,0,0,1,1.872-1h18a2.246,2.246,0,0,1,1.872,1l5.332,8h7.094a6.72,6.72,0,0,1,6.7,6.7v31.6a6.722,6.722,0,0,1-6.7,6.7h-46.6a6.722,6.722,0,0,1-6.7-6.7v-31.6a6.72,6.72,0,0,1,6.7-6.7h7.094Zm5.407,0H87.341l-3-4.5H68.751l-3,4.5Zm10.8,35.25a12.75,12.75,0,1,0-12.75-12.75A12.764,12.764,0,0,0,76.545,137.341Zm0-21a8.25,8.25,0,1,1-8.25,8.25A8.261,8.261,0,0,1,76.545,116.341Z" transform="translate(-46.546 -93.091)" fill="#8A8A8A"/></svg>
+              : (
-                <div className="upload-image-btn-text">添加图片</div>
+                <div className="upload-image-btn">
-              </div>
+                  <input type="file" accept="image/*" multiple={false} onChange={this.handleChange} />
-            )}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 54"><path d="M60.342,102.091l5.331-8a2.249,2.249,0,0,1,1.872-1h18a2.246,2.246,0,0,1,1.872,1l5.332,8h7.094a6.72,6.72,0,0,1,6.7,6.7v31.6a6.722,6.722,0,0,1-6.7,6.7h-46.6a6.722,6.722,0,0,1-6.7-6.7v-31.6a6.72,6.72,0,0,1,6.7-6.7h7.094Zm5.407,0H87.341l-3-4.5H68.751l-3,4.5Zm10.8,35.25a12.75,12.75,0,1,0-12.75-12.75A12.764,12.764,0,0,0,76.545,137.341Zm0-21a8.25,8.25,0,1,1-8.25,8.25A8.261,8.261,0,0,1,76.545,116.341Z" transform="translate(-46.546 -93.091)" fill="#8A8A8A"/></svg>
+                  <div className="upload-image-btn-text">添加图片</div>
+                </div>
+              )
+            }
           </div>
           <button
             className="btn btn-sdu btn-straight btn-upload"
             onClick={this.handleSubmit}
             disabled={(this.state.msg === "" && this.state.file === null) || this.state.submitting}
-          >{this.state.submitting ? (<Spinner />) : '提交'}</button>
+          >
+            {
+              this.state.submitting
+              ? (<Spinner />)
+              : '提交'
+            }
+          </button>
         </div>
       </div>
     );