Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
54sword

[作品分享] 使用 React 写的一个社区系统

  •  2      
  •   54sword ·
    54sword · May 3, 2017 · 8589 views
    This topic created in 3322 days ago, the information mentioned may be changed or developed.

    小度鱼

    线上地址：https://www.xiaoduyu.com
    前端源码：https://github.com/54sword/xiaoduyu.com
    后端 API 源码：https://github.com/54sword/api.xiaoduyu.com

    特点

    • 页面极度简洁
    • SPA 单页面应用，前后端分离
    • 使用 React 服务器端渲染，首屏服务端渲染，且完美支持 SEO
    • 相对完整的功能：发帖子、评论、富文本、通知、新帖子提醒、头像上传、邮箱微博 QQ 注册登录 …

    使用技术

    • 前端：React、React-redux、React-router、ES6、SASS、CSS-Modules …
    • 前端测试框架：Jest、Enzyme
    • 后端：NodeJS、Express、Mongoose
    • 数据库：MongoDB
    • 通信：Socket.io
    • 富文本编辑器：Draft.js

    二维码

    小度鱼

    截图

    小度鱼 小度鱼 小度鱼 小度鱼

    Supplement 1  ·  May 3, 2017
    @xilixjd 回复里面，不能包含外链了，这里给你回复下

    额，可能表达不了太细，大概是这样

    ## URL 请求入口
    https://github.com/54sword/xiaoduyu.com/blob/master/server/routes/serverRender.js
    该文件是处理服务端渲染的入口文件，所有 URL 请求都会经过它，然后它会根据 URL 获取到页面组件

    ## 获取到组件后，在服务端加载想要的数据
    例如访问帖子详情页面： https://xiaoduyu.com/posts/58fc99916268f6c7706c2c68
    对应的页面组件是： https://github.com/54sword/xiaoduyu.com/blob/master/src/containers/posts-detail/index.js
    然后执行该组件里面的 loadData 方法，它是专门处理预先在服务端加载数据的，
    数据请求成功后，数据会储存到 Redux 的 State 里面，最后使用 renderToString 将 State 用到模版里，就完成渲染了
  • 度鱼
  • 小度鱼
  • React
  • 源码
    14 replies  •  2018-07-29 11:37:17 +08:00
    gimp
        1
    gimp  
       May 3, 2017   ❤️ 1
    点击“我的”后建议加个 Esc 关闭窗口的监听
    haiyang416
        2
    haiyang416  
       May 3, 2017   ❤️ 1
    支持一下,样式比较合我的胃口.
    54sword
        3
    54sword  
    OP
       May 3, 2017
    @gimp 不错的建议，这么细节的功能，已加入我的任务清单
    xilixjd
        4
    xilixjd  
       May 3, 2017
    我想问一下 SEO 怎么做的，有教程吗
    deleteDB
        5
    deleteDB  
       May 3, 2017
    同问 SEO 嘿嘿
    hzwei
        6
    hzwei  
       May 3, 2017 via Android   ❤️ 1
    注册支持。
    54sword
        7
    54sword  
    OP
       May 3, 2017
    @xilixjd 我的 React SEO 学习路径是到 Gitub 找 Demo，对我最有帮助的，主要是看的这个 Demo，

    https://github.com/ibufu/douban-movie-react-ssr

    然后读懂它，再然后改造用到自己的项目里面。
    hzwei
        8
    hzwei  
       May 3, 2017
    首页清新简洁的风格比较喜欢。
    提几个问题，一是顶部的“说说”、“提问”和“写文章”有什么区别？它们点进去都是同一个编辑页面。
    二是我看见有的回复折叠起来了，是不想页面过长的原因吗？
    三是从本地上传的图片是上传到哪去？
    54sword
        9
    54sword  
    OP
       May 3, 2017   ❤️ 1
    @hzwei

    1、说说：正文可以不填写，提问：需要填写正文，写文章：正文需要大于一定字数
    相应帖子也会做上标记，方便以后可以筛选这三种类型的帖子

    2、首页的评论数量，目前最大是 5 条，更多就会折叠，如果评论被标记削弱，也会被折叠。

    3、图片目前是上传到七牛
    xilixjd
        10
    xilixjd  
       May 3, 2017
    @54sword 看了一下这个项目，没找到 SEO 的重点。。
    50vip
        11
    50vip  
       May 4, 2017
    @xilixjd 使用的服务端渲染，就解决 seo 问题了啊
    Sukizen
        12
    Sukizen  
       May 6, 2017
    这个有意思。能导入 discuz 的用户数据吗。 有一个 discuz 老站一直想升级或更改一个更轻一点的程序。
    54sword
        13
    54sword  
    OP
       May 6, 2017
    @Sukizen 还没有考虑到这个，因此还不行哈
    heshanfu
        14
    heshanfu  
       Jul 29, 2018
    这个网站有很多相关的： https://reactjsexample.com
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2647 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 15:39 · PVG 23:39 · LAX 08:39 · JFK 11:39
    ♥ Do have faith in what you're doing.