Merge pull request #9 from Reaper622/dev

添加侧边栏热榜功能

Author: Reaper622

.eslintrc.js

@@ -19,6 +19,8 @@ module.exports = {
         "react/jsx-uses-react": 1, // 防止在 JSX 中使用的变量被错误的标记为未使用
         "react/jsx-uses-vars": 1, // 防止 React 被错误的标记为未使用
         "react/react-in-jsx-scope": 2, // 使用 JSX 时防止丢失 React
+        'no-tabs': 'off',
+        'indent': 'tab'
     },
     "plugins": [
         "react"

server/controllers/articles-handler.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const fs = require('fs')
-const { insertBlogs, getData, getBlogPage, getBlogCount, getSingleBlog, setBlogRead } = require('../services/db')
+const { insertBlogs, getData, getBlogPage, getBlogCount, getSingleBlog, setBlogRead, getHotArticle } = require('../services/db')
 
 const sourceHandler = require('../utils/source-handler')
 const articleRoot = path.join(__dirname, '../../articles')
@@ -45,11 +45,16 @@ async function getSingleBlogContent(id) {
 
 async function plusVisit(id) {
   const result = await setBlogRead(id)
-  console.log(result)
+  return result
+}
+
+// 获取热榜
+async function hotArticle() {
+  const result = await getHotArticle()
   return result
 }
 
 
 
 
-module.exports = { updateBlog, getBlogs, getBlogByPage, getSingleBlogContent, plusVisit }
+module.exports = { updateBlog, getBlogs, getBlogByPage, getSingleBlogContent, plusVisit, hotArticle }

server/routers/blog-router.js

@@ -22,6 +22,10 @@ router.get('/plusvisit/:id', async (ctx) => {
   ctx.body = await articleHandler.plusVisit(id)
 })
 
+router.get('/gethotarticle', async (ctx) => {
+  ctx.body = await articleHandler.hotArticle()
+})
+
 // router.get('/getarchives', async (ctx) => {
 //   ctx.set('Content-Type', 'application')
 //   ctx.body = await archives.getBlogsArchives()

server/services/db.js

@@ -53,19 +53,27 @@ async function getData() {
   return dataList
 }
 
-
+// 获取全部文章
 async function getArchives() {
   let sql = `select * from blog group by YEAR(time)`
   let result = await query(sql)
   return result
 }
 
+// 获取文章热榜
+async function getHotArticle() {
+  let sql = `select * from blog order by visit desc limit 5`
+  let result = await query(sql)
+  return result
+}
+
 module.exports = {
   getData, 
   insertBlogs, 
   getArchives, 
   getBlogPage,
   getBlogCount,
   getSingleBlog,
-  setBlogRead
+  setBlogRead,
+  getHotArticle
 }

src/Pages/Index/Index.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react'
 import TheHeader from '@components/Header/Header'
 import TheFooter from '@components/Footer/Footer'
 import Blog from '@components/Blog/Blog'
+import SideMenu from '@components/SideMenu/SideMenu'
 import Axios from 'axios'
 import { Layout, Row, Col, Pagination } from 'antd'
 import { connect } from 'react-redux'
-import { loadBlogsByPage } from '../../redux/store'
+import { loadBlogsByPage, loadHotArticles } from '../../redux/store'
 import config from '../../../config.json'
 import { CSSTransition } from 'react-transition-group'
 
@@ -15,7 +16,7 @@ const { Content } = Layout
 
 @connect(
   state => state,
-  { loadBlogsByPage }
+  { loadBlogsByPage, loadHotArticles }
 )
 class Index extends Component {
   constructor (props) {
@@ -27,6 +28,7 @@ class Index extends Component {
 
   componentDidMount () {
     this.getBlogs(0)
+    this.getHotArticles()
   }
 
   getBlogs (page) {
@@ -40,6 +42,13 @@ class Index extends Component {
       })
   }
 
+  getHotArticles () {
+    Axios.get(`${config.server_url}/blog/gethotarticle`)
+      .then(res => {
+        this.props.loadHotArticles(res.data)
+      })
+  }
+
   handlePageChange (page) {
     this.setState({ loaded: false })
     this.getBlogs(page - 1)
@@ -61,6 +70,9 @@ class Index extends Component {
                 { this.props.blogsToShow ? this.props.blogsToShow.map(blog => <Blog key={blog.id} {...blog} isPriview={true} />) : <div></div>}
               </Col>
             </CSSTransition>
+            <Col xs={{ span: 0}} xl={{offset: 1, span: 5}} xxl={{offset: 1, span: 5}}>
+                {this.props.hotArticles ? <SideMenu hotArticles={this.props.hotArticles} /> : null}
+            </Col>
           </Row>
           <Row style={{ margin: '20px 0 50px' }}>
             <Col xs={{ span: 24 }} xl={{ offset: 4, span: 12 }} xxl={{ offset: 4, span: 12 }} style={{ padding: '20px 0', background: '#fff', display: 'flex', justifyContent: 'center' }}>

src/assets/bingguo.webp

@@ -28,7 +28,7 @@ function ScrollTop () {
   useEffect(() => {
     window.addEventListener('scroll', handleScroll, true)
     return () => {
-      window, removeEventListener('scroll', handleScroll, true)
+      window.removeEventListener('scroll', handleScroll, true)
     };
   }, [])
 

src/components/ScrollTop/ScrollTop.jsx

@@ -5,7 +5,7 @@
     z-index 10000
     transition top .5s linear
     cursor pointer
-    right 10vw
+    right 5vw
     dont-display-mobile(960px)
 .showStyle 
     top -30vh

src/components/ScrollTop/ScrollTop.styl

@@ -0,0 +1,40 @@
+import React, {useState, useEffect, useRef, useCallback} from 'react'
+import './SideMenu.styl'
+import { Link } from 'react-router-dom'
+import BingGuoPic from '@assets/bingguo.webp'
+
+function SideMenu ({hotArticles}) {
+	const [affix, setAffix] = useState(false)
+	const sidemenu = useRef(null)
+	useEffect(() => {
+		console.log(sidemenu)
+		window.addEventListener('scroll', handleScroll, true)
+		return () => {
+			window.removeEventListener('scroll', handleScroll, true)
+		}
+	}, [])
+
+	const handleScroll = useCallback(
+    () => {
+			let scrollTop = document.documentElement.scrollTop
+      if (scrollTop > 600) {
+        setAffix(true)
+      } else {
+        setAffix(false)
+      }
+    }
+  )
+
+  return (
+    <div ref={sidemenu} className={ affix ? `side-menu affix` : `side-menu`}>
+    	<img src={BingGuoPic} alt="冰菓"/>
+			<ul>
+				{hotArticles.map(blog => (
+					<li key={blog.id}><Link className='title' to={`articles/${blog.id}`}>{blog.title}</Link><span>{blog.visit}次阅读</span></li>
+				))}
+			</ul>
+    </div>
+  )
+}
+
+export default SideMenu

src/components/SideMenu/SideMenu.jsx

@@ -0,0 +1,33 @@
+@import '~@utils/mixins'
+.side-menu
+    margin 50px 0
+    width 400px
+    height 400px
+    background #ffffff
+    border-radius 5px
+    dont-display-mobile(960px)
+    img
+        margin 10px 10% 
+        width 80%
+    ul
+        width 100%
+        li
+            height 20px
+            line-height 14px
+            justify-content space-between
+            font-size 14px
+            margin 5px 0
+            .title
+                display inline-block
+                width 70%
+                height 14px
+                overflow hidden
+                white-space nowrap
+                text-overflow ellipsis
+            span 
+                display inline-block
+                width 30%
+.affix
+    position fixed
+    top 0
+                

src/components/SideMenu/SideMenu.styl

@@ -3,6 +3,7 @@ import axios from 'axios'
 // TYPE
 const UPLOAD_BLOGS = 'UPLOAD_BLOGS'
 const GET_BLOGS_BY_PAGE = 'GET_BLOGS_BY_PAGE'
+const UPLOAD_HOTARTICLES = 'UPLOAD_HOTARTICLES'
 
 // 初始state
 const initState = {
@@ -18,6 +19,9 @@ export function reducer (state = initState, action) {
     case GET_BLOGS_BY_PAGE: {
       return { ...state, blogsToShow: action.payload.blogs, blogsCount: action.payload.blogCount }
     }
+    case UPLOAD_HOTARTICLES: {
+      return {...state, hotArticles: action.payload}
+    }
     default: return state
   }
 }
@@ -42,3 +46,13 @@ export function loadBlogsByPage (data) {
     })
   }
 }
+
+// 加载热榜
+export function loadHotArticles (data) {
+  return dispatch => {
+    dispatch({
+      type: UPLOAD_HOTARTICLES,
+      payload: data
+    })
+  }
+}