https://github.com/lumia2046/cnode

基于react编写的cnodejs论坛第三方webapp
https://github.com/lumia2046/cnode

Last synced: 3 days ago
JSON representation

基于react编写的cnodejs论坛第三方webapp

• Host: GitHub
• URL: https://github.com/lumia2046/cnode
• Owner: lumia2046
• Created: 2016-12-14T01:43:22.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T16:14:01.000Z (over 1 year ago)
• Last Synced: 2024-08-02T00:20:49.920Z (3 months ago)
• Language: JavaScript
• Homepage: https://lumia2046.github.io/cnode/
• Size: 8.56 MB
• Stars: 139
• Watchers: 7
• Forks: 41
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-cnode - cnode

README

        
## 项目简介

一个WebApp版的cnode客户端，项目采用react技术栈构建。组件选用的是[Material-UI](http://www.material-ui.com/)，让界面更适合触控操作。

- 感谢来自[cnodejs论坛](https://cnodejs.org/)官方提供的api！

## 功能

- 首页列表，下拉时自动加载下一页，在顶端上拉刷新

- 主题详情，登陆后能够收藏，评论和点赞

- 消息提醒，能查看消息详情和清空所有未读消息

- 个人主页，包括最近参与，回复，以及收藏的主题

- 发表主题，成功后能跳转到相应主题页面

- 页面后退，能还原数据和滚动位置

## 运用的技术主要有:

- 采用react技术栈，通过Redux来管理页面状态，通过Router来设置页面路由

- 组件选用的是Material-UI，不再自己造轮子，既美观又能方便触控操作

- 使用react-route v4 和 react原生的react-transition-group v2 来实现路由切换动画

- 使用react-flip-move插件来实现list的加载动画

- 应用`isomorphic-fetch`库代替`XMLHttpRequest`实现网络请求

- 使用`PostCSS`对CSS进行预处理

- 通过`CSSModules`处理模块内部的类名

## 预览

[DEMO](https://lumia2046.github.io/cnode/)

## 运行项目

```

  git clone https://github.com/lumia2046/cnode.git

  cd cnode

  npm install

  npm start

  打开浏览器访问：http://localhost:5678

```

## 生产项目

```

  windows下

  npm run build-win

  linux、mac下

  npm run build-win

```