V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
54sword
V2EX  ›  分享创造

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

  •  2
     
  •   54sword ·
    54sword · 2017-05-03 08:31:21 +08:00 · 7727 次点击
    这是一个创建于 2769 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小度鱼

    线上地址: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

    二维码

    小度鱼

    截图

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

    第 1 条附言  ·  2017-05-03 15:23:54 +08:00
    @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 用到模版里,就完成渲染了
    14 条回复    2018-07-29 11:37:17 +08:00
    gimp
        1
    gimp  
       2017-05-03 09:13:20 +08:00   ❤️ 1
    点击“我的”后建议加个 Esc 关闭窗口的监听
    haiyang416
        2
    haiyang416  
       2017-05-03 09:16:01 +08:00   ❤️ 1
    支持一下,样式比较合我的胃口.
    54sword
        3
    54sword  
    OP
       2017-05-03 09:20:12 +08:00
    @gimp 不错的建议,这么细节的功能,已加入我的任务清单
    xilixjd
        4
    xilixjd  
       2017-05-03 09:30:16 +08:00
    我想问一下 SEO 怎么做的,有教程吗
    deleteDB
        5
    deleteDB  
       2017-05-03 09:37:36 +08:00
    同问 SEO 嘿嘿
    hzwei
        6
    hzwei  
       2017-05-03 09:40:25 +08:00 via Android   ❤️ 1
    注册支持。
    54sword
        7
    54sword  
    OP
       2017-05-03 09:47:18 +08:00
    @xilixjd 我的 React SEO 学习路径是到 Gitub 找 Demo,对我最有帮助的,主要是看的这个 Demo,

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

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

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

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

    3、图片目前是上传到七牛
    xilixjd
        10
    xilixjd  
       2017-05-03 11:12:39 +08:00
    @54sword 看了一下这个项目,没找到 SEO 的重点。。
    50vip
        11
    50vip  
       2017-05-04 09:27:51 +08:00
    @xilixjd 使用的服务端渲染,就解决 seo 问题了啊
    Sukizen
        12
    Sukizen  
       2017-05-06 00:40:16 +08:00
    这个有意思。能导入 discuz 的用户数据吗。 有一个 discuz 老站一直想升级或更改一个更轻一点的程序。
    54sword
        13
    54sword  
    OP
       2017-05-06 07:24:39 +08:00
    @Sukizen 还没有考虑到这个,因此还不行哈
    heshanfu
        14
    heshanfu  
       2018-07-29 11:37:17 +08:00
    这个网站有很多相关的: https://reactjsexample.com
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2798 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:56 · PVG 19:56 · LAX 03:56 · JFK 06:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.