Skip to content

Commit

Permalink
添加文章归档功能,格式化一下代码
Browse files Browse the repository at this point in the history
  • Loading branch information
biaochenxuying committed Mar 16, 2019
1 parent 41b08a9 commit 2bcc674
Show file tree
Hide file tree
Showing 42 changed files with 1,959 additions and 1,882 deletions.
39 changes: 9 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,12 @@
- [X] 移动端适配
- [X] 网站波浪效果(请看 http://biaochenxuying.cn/wave.html)
- [X] 第三方 github 授权登录
- [X] 文章归档

## 2.2 待实现功能

- [ ] 文章归档
- [ ] 文章分类
- [ ] 文章详情的目录
- [ ] 升级 webpack 版本到 4.X

# 3. 前端技术

Expand Down Expand Up @@ -77,7 +76,8 @@
- project 项目
- register 注册
- slider 右边栏(博主 logo 、链接和标签等)
- timeLine 时间轴
- artchive 归档
- timeLine 时间轴(历程)
- router 路由
- store redux 的状态管理
- utils 封装的常用的方法
Expand Down Expand Up @@ -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
的文章,只能有一篇就是 博主介绍 ;达到了想什么时候修改内容都可以。
Expand Down Expand Up @@ -267,8 +251,6 @@ npm run build 或者 yarn run build

其他具体的业务代码,都是些常会见到的需求,这里就不展开讲了。

如果你觉得该文章不错,欢迎到我的 github,star 一下,谢谢。

**项目地址:**
> [前台展示: https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react)
Expand All @@ -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)


9 changes: 4 additions & 5 deletions config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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]',
},
},
Expand Down Expand Up @@ -507,6 +505,7 @@ module.exports = function(webpackEnv) {
],
},
plugins: [
new BundleAnalyzerPlugin(),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
Expand Down
44 changes: 44 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
108 changes: 108 additions & 0 deletions src/components/archive/archive.js
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 15 additions & 0 deletions src/components/archive/index.less
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 2bcc674

Please sign in to comment.