添加文章归档功能，格式化一下代码

Author: biaochenxuying

README.md

@@ -37,13 +37,12 @@
 - [X] 移动端适配
 - [X] 网站波浪效果(请看 http://biaochenxuying.cn/wave.html)
 - [X] 第三方 github 授权登录
+- [X] 文章归档
 
 ## 2.2 待实现功能
 
-- [ ] 文章归档
 - [ ] 文章分类 
 - [ ] 文章详情的目录
-- [ ] 升级 webpack 版本到 4.X
 
 # 3. 前端技术 
 
@@ -77,7 +76,8 @@
   - project 项目
   - register 注册
   - slider 右边栏（博主 logo 、链接和标签等）
-  - timeLine 时间轴
+  - artchive 归档
+  - timeLine 时间轴(历程)
 - router 路由
 - store redux 的状态管理
 - utils 封装的常用的方法
@@ -219,23 +219,7 @@ p img{
 
 # 7. 注意点
 
-## 7.1  打包的配置
-
-因为项目是用了 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案) 来打包了，所以如果你想修改 webpack.config.dev.js 和 webpack.config.prod.js 的配置，打包后可能看不到想要的效果，因为 react-app-rewired 打包时，是根据根目录的 config-overrides.js 来进行打包，**所以要修改 webpack 的配置的话，请修改 config-overrides.js 。**
-
-比如：关闭 sourceMap 和 支持装饰器 
-```
-config.devtool = false; // 关闭 sourceMap 
-config = injectBabelPlugin('babel-plugin-transform-decorators-legacy', config); // 支持装饰器
-```
-
-因为 linux 和 window 的设置端口的打包命令有点不同，如果 window 下打包出错，请把 package.json 修改成如下的命令：
-
-```
-"start": "set PORT=3001 && react-app-rewired start",
-```
-
-## 7.2 关于 页面
+## 7.1 关于 页面
 
 对于 关于 的页面，其实是一篇文章来的，根据文章类型 type 来决定的，数据库里面 type 为 3 
  的文章，只能有一篇就是 博主介绍 ；达到了想什么时候修改内容都可以。
@@ -267,8 +251,6 @@ npm run build 或者 yarn run build
 
 其他具体的业务代码，都是些常会见到的需求，这里就不展开讲了。
 
-如果你觉得该文章不错，欢迎到我的 github，star 一下，谢谢。
-
 **项目地址：**
 > [前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react)
 
@@ -285,22 +267,19 @@ npm run build 或者 yarn run build
 - 3. [基于 node + express + mongodb 的 blog-node 项目文档说明](http://biaochenxuying.cn/articleDetail?article_id=5bf8c57185e0f13af26e7d0d)
 - 4. [服务器小白的我,是如何将node+mongodb项目部署在服务器上并进行性能优化的](http://biaochenxuying.cn/articleDetail?article_id=5bfa728bb54f044b4f9da240)
 - 5. [github 授权登录教程与如何设计第三方授权登录的用户表](http://biaochenxuying.cn/articleDetail?article_id=5c7bd34e42b55e2ecc90976d)
+- 6. [一次网站的性能优化之路 -- 天下武功，唯快不破](http://biaochenxuying.cn/articleDetail?article_id=5c8ca2d3b87b8a04f1860c9a)
 
 
 
 # 10. 最后
 
 
-鉴于问问题的人有点多，小汪时间有限，处理不过来，大家可以加入 QQ 群：**186045338**，加群暗号：**全栈修炼** ，一起相互交流学习。
-
-
-对 **全栈开发** 有兴趣的朋友可以扫下方二维码关注我的公众号，我会不定期更新有价值的内容。
-
-关注公众号并回复 **福利** 便免费送你视频资源，绝对干货。
+鉴于问问题的人有点多，笔者时间有限，处理不过来，大家可以加入 QQ 群：**186045338**，加群暗号：**全栈修炼** ，一起相互交流学习。
 
-福利详情请点击：  [免费资源分享--Python、Java、Linux、Go、node、vue、react、javaScript](https://mp.weixin.qq.com/s?__biz=MzA4MDU1MDExMg==&mid=2247483711&idx=1&sn=1ffb576159805e92fc57f5f1120fce3a&chksm=9fa3c0b0a8d449a664f36f6fdd017ac7da71b6a71c90261b06b4ea69b42359255f02d0ffe7b3&token=1560489745&lang=zh_CN#rd)
+如果您觉得本项目和文章不错或者对你有所帮助，请给个星呗，你的肯定就是我继续创作的最大动力。
 
-![BiaoChenXuYing](https://upload-images.jianshu.io/upload_images/12890819-091ccce387e2ea34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+欢迎关注公众号，并回复 **福利** 可领取免费学习资料，福利详情请猛戳：  [免费资源获取--Python、Java、Linux、Go、node、vue、react、javaScript](https://mp.weixin.qq.com/s?__biz=MzA4MDU1MDExMg==&mid=2247483711&idx=1&sn=1ffb576159805e92fc57f5f1120fce3a&chksm=9fa3c0b0a8d449a664f36f6fdd017ac7da71b6a71c90261b06b4ea69b42359255f02d0ffe7b3&token=1560489745&lang=zh_CN#rd)
 
+![BiaoChenXuYing](https://upload-images.jianshu.io/upload_images/12890819-0fc16a9e50276521.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 

config/webpack.config.js

@@ -23,12 +23,10 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 // const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-console.log('process.env :', process.env)
-console.log('process.env.GENERATE_SOURCEMAP :', process.env.GENERATE_SOURCEMAP)
 const shouldUseSourceMap = process.env.NODE_ENV === 'production' ? false : true;
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
@@ -322,10 +320,10 @@ module.exports = function(webpackEnv) {
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/,/\.jpg$/,/\.svg$/],
               loader: require.resolve('url-loader'),
               options: {
-                limit: 10000,
+                limit: 40000,
                 name: 'static/media/[name].[hash:8].[ext]',
               },
             },
@@ -507,6 +505,7 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      new BundleAnalyzerPlugin(),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(

package-lock.json

@@ -85,7 +85,8 @@
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "babel-plugin-import": "^1.11.0",
-    "http-proxy-middleware": "^0.19.1"
+    "http-proxy-middleware": "^0.19.1",
+    "webpack-bundle-analyzer": "^3.1.0"
   },
   "jest": {
     "collectCoverageFrom": [

package.json

@@ -0,0 +1,108 @@
+import './index.less';
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Timeline, Icon, message } from 'antd';
+import https from '../../utils/https';
+import urls from '../../utils/urls';
+import { timestampToTime } from '../../utils/utils';
+import LoadingCom from '../loading/loading';
+
+class Archive extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      isLoadEnd: false,
+      article: 1,
+      // keyword: '',
+      // pageNum: 1,
+      // pageSize: 10,
+      total: 0,
+      list: [],
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleSearch();
+  }
+
+  handleSearch = () => {
+    this.setState({
+      isLoading: true,
+    });
+    https
+      .get(urls.getArticleList, {
+        params: {
+          // keyword: this.state.keyword,
+          // pageNum: this.state.pageNum,
+          // pageSize: this.state.pageSize,
+          article: this.state.article,
+        },
+      })
+      .then(res => {
+        let num = this.state.pageNum;
+        if (res.status === 200 && res.data.code === 0) {
+          this.setState({
+            list: this.state.list.concat(res.data.data.list),
+            total: res.data.data.count,
+            pageNum: ++num,
+            isLoading: false,
+          });
+          if (this.state.total === this.state.list.length) {
+            this.setState({
+              isLoadEnd: true,
+            });
+          }
+        } else {
+          message.error(res.data.message);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  render() {
+    const list = this.state.list.map((item, i) => (
+      <Timeline.Item
+        key={i}
+        color={'red'}
+        dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}
+      >
+        <h1>{item.year}</h1>
+        {item.list.map(ele => {
+          return (
+            <Timeline key={ele._id}>
+              <Timeline.Item>
+                <Link
+                  className="title"
+                  target="_blank"
+                  to={`/articleDetail?article_id=${ele._id}`}
+                >
+                  <h3>{ele.title}</h3>
+                </Link>
+                <p>
+                  <span>
+                    {ele.create_time
+                      ? timestampToTime(ele.create_time, true)
+                      : ''}
+                  </span>
+                </p>
+              </Timeline.Item>
+            </Timeline>
+          );
+        })}
+      </Timeline.Item>
+    ));
+
+    return (
+      <div className="archive">
+        <Timeline>{list}</Timeline>
+        {this.state.isLoading ? <LoadingCom /> : ''}
+      </div>
+    );
+  }
+}
+
+export default Archive;

src/components/archive/archive.js

@@ -0,0 +1,15 @@
+.archive {
+  padding: 50px 5px;
+  h1{
+    position: relative;
+    top: -15px;
+    font-size: 36px;
+    padding: 0 0 20px 10px;
+  }
+  h3:hover{
+    color: #1890ff;
+  }
+}
+.clearfix {
+  clear: both;
+}