第三方react-cnode
发布于 7 个月前 作者 xjh22222228 1976 次浏览 最后一次编辑是 2 个月前 来自 分享

源码github

在线预览

技术栈

"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"mobx": "^3.4.1",
"mobx-react": "^4.3.5",
"antd": "^3.1.6",
"axios": "^0.17.1",
"moment": "^2.20.1",
"webpack": "3.8.1",
"simplemde": "^1.11.2",
"scss": "",
"ES6": "",
"flex": "",

开发目录

.
├── LICENSE
├── README.md
├── config
│   ├── env.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public                       # 静态资源目录
│   ├── images
│   │   ├── 11.png
│   │   ├── 22.png
│   │   ├── 33.png
│   │   └── 44.png
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src                          # 开发目录,源码文件
    ├── App.jsx                  # views入口文件
    ├── api                      # API配置
    │   └── index.js
    ├── assets                   # 资源目录,跟public不同的是assets会被webpack处理
    │   ├── images
    │   │   ├── app-qrcode.png
    │   │   ├── github.svg
    │   │   └── not-match.gif
    │   └── scss
    │       ├── _variable.scss
    │       ├── media.scss
    │       └── style.scss
    ├── components               # 组件目录
    │   ├── footer               # 底部组件
    │   │   ├── Footer.jsx
    │   │   └── footer.scss
    │   ├── header               # 头部组件
    │   │   ├── Header.jsx
    │   │   └── header.scss
    │   ├── sidebar              # 侧边栏组件
    │   │   ├── Sidebar.jsx
    │   │   └── sidebar.scss
    │   └── topics-list          # 话题列表组件
    │       ├── TopicsList.jsx
    │       └── topicsList.scss
    ├── index.js                 # 程序主入口
    ├── registerServiceWorker.js # 这个文件的作用是缓存,下次打开会更快
    ├── router                   # 路由配置
    │   └── index.jsx
    ├── store                    # 状态管理
    │   └── index.jsx
    ├── utils                    # 封装的一些公用方法
    │   └── index.js
    └── views                    # 视图目录
        ├── 404                  # 404页
        │   ├── 404.jsx
        │   └── 404.scss
        ├── collections          # 用户话题收藏页
        │   ├── Collections.jsx
        │   └── collections.scss
        ├── index                # 首页
        │   ├── Index.jsx
        │   └── style.scss
        ├── login                # 登录页
        │   ├── Login.jsx
        │   └── login.scss
        ├── messages             # 未读消息
        │   ├── Messages.jsx
        │   └── messages.scss
        ├── release              # 发布/编辑话题
        │   ├── Release.jsx
        │   └── release.scss
        ├── topic                # 主题详情页
        │   ├── Topic.jsx
        │   └── topic.scss
        └── user                # 用户详情页/个人主页
            ├── User.jsx
            └── user.scss

API清单 x 15

  • [√] 主题首页
  • [√] 主题详情
  • [√] 新建主题
  • [√] 编辑主题
  • [√] 收藏主题
  • [√] 取消收藏主题
  • [√] 用户所收藏的主题
  • [√] 新建评论
  • [√] 为评论点赞
  • [√] 用户详情/个人主页
  • [√] 登录
  • [√] 获取未读消息数
  • [√] 获取已读和未读消息
  • [√] 标记全部已读
  • [√] 标记单个消息为已读

启动程序

# install dependencies
npm install

# serve with hot reload at localhost:3888
npm start

# build for production with minification
npm run build


结语

  • CNode主题详情是使用markdown写的,样式可以使用github-markdown-css。
  • CNode提供的API获取主题没有返回总条数导致不能算出总页数, 所以我写死了250页。
  • 大部分功能都需要登录的,所以游客只能进行浏览,如果感兴趣的可以尝试登录, 不会保存你的accesstoken, 欢迎监督。
  • 发布话题和评论使用的markdown编辑器 simplemde
  • 因为托管在github上,所以首次打开的速度会稍微慢一点,之后基本上是秒开。
  • 如果没漏的话提供的API功能都已经全部开发完成了,如有漏麻烦反馈下哈,感谢!

👍👍👍


License

MIT

11 回复

先占个位

打开速度太慢了

@chapgaga 首次打开确实是,因为托管在github上。

开发完成啦!

可以!!!

厉害👍

来自酷炫的 CNodeMD

还是可以的,感谢分享github markdown css,我写的vue-cnode是自己写了一套markdown的css 模板。 ~From Frank.Cnode

回到顶部