react + koa2实现的论坛

shiyangzhaoa

技术栈

线上地址:点击查看 (访问会有点慢,至于原因,下面会说明)
前端(主要):reactv15.6.1、react routerv4.2.0、reduxv3.7.2、antdv2.13.0、axiosv0.16.2和处理样式的sass;
后端(主要):nodev8.3.0、koa2v2.3.0、koa-routerv7.2.1
数据库:mongodb;
后端是部署在heroku,线上数据库用的mLab,具体的流程不细说,总体来说不是很麻烦。至于为什么选择这两个,因为这两个都可以免费使用...mLab有500m的免费使用空间,但访问及其缓慢及其缓慢及其缓慢,你可以继续来感受下什么是绝望,所以我的建议是你可以clone下来在本地跑。数据库的连接是mongodb默认的端口,你可以在db文件下更改相应的配置。

整体的schema设计参考了cnode社区的,中间碰到的一些问题也是通过看nodeclub的源码去解决的。


页面预览

页面主要分为话题列表页、消息页面、个人信息页面、创建话题页面、个人设置页面、注册页面、登陆页面、404页面。

  • 导航+首页
    首页
  • 消息页面
    消息
  • 用户信息页面
    用户详情
  • 创建话题页面
    创建话题
  • 用户设置页面
    设置
  • 以及稍微复杂的详情页面
    详情评论
  • 404页面
    404
  • 登陆页面
    登陆
  • 注册页面
    注册

文件目录

前端

使用create-react-app脚手架搭建,actions这些都是自己手动添加:
前端目录

后端

呃,说实话后端我不怎么熟悉,啊呸,是基本不会,自己写了简单的model+controller+middleware这种,也没看到什么好的脚手架,写了大量重复的代码...
puchi

大概就是下面这样:
后端目录

前端的数据结构

前端用了redux,整个state结构如下图:
state
需要注意的是,react router v4和以前的差别很大,路由参数这些需要通过类似于下面这样手动绑定:

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));

react router v4取消indexRoute,取而代之的是exact这个属性。
还有权限方面的,比如登陆后不可以再进入登陆页面,未登陆也不可以进入创建主题页面。
整体的路由设计:

const AppRouter = () => (
  <Router>
    <div>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/page/:pageNum?" exact component={Home}/>
        <Route path="/category/:categorySlug/:pageNum?" exact component={Home}/>
        <Route path="/topics/:id" component={TopicDetail}/>
        <Route path="/user-info/:loginname" component={UserInfo}/>
        <AuthRoute path='/message' component={Message}/>
        <PrivateRoute path="/login" component={Login}/>
        <PrivateRoute path="/register" component={Register}/>
        <AuthRoute path='/create-topic' component={CreateTopic}/>
        <AuthRoute path='/edit-topic/:topicId' component={CreateTopic}/>
        <AuthRoute path='/setting' component={Setting}></AuthRoute>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>
);

值得一提的是v4版本关于?a=1&&b=2这种不再提供默认的解析支持,好像是因为觉得这种写法不规范,解析的话需要依赖第三方的query-string这个包。我没有用,不做分析。我第一次使用v4,中间还是碰到许多坑,不过基本上都能在在网上找到相应的介绍和解决方法,推介使用谷歌搜索,关于官方文档,有中文的版本文档

期间react出了新版本v 16.0.0,我升级了一下,但antd并不能无缝切入到v16,其中部分组件使用直接报错,所以使用antd的话,不建议升级到最新版本,也有人提了issues点击查看
还有关于antd同一个容器多个form的情况,我在设置这个页面有做处理,我是把表单拆分开的。

后端的设计

hhh,请原谅我笑出身,对后端的理解基本上只是皮毛,看过一段时间nodekoa,所以我就不做详细分析了,怕误导新人,网上有大量高质量的文档和实例,我就安安静静当条咸鱼,把自己在开发中遇到的问题说明一下。


1.关于async和await,期间碰到一个问题,我需要根据评论还是啥数组id取出每个id对应的评论,我一开始是这样写的:

const xxx = idList.map(id => {
  const result = await findReplyById(id);
  //xxx
  return result;
})

我勒个去,直接报错,然后我看了下,额,await只能在async下面使用,不能在function下,后面修改成Promise.all()的形式。


2.token的处理,用的是node-jsonwebtoken,看了狼叔的博客RESTFul,介绍的比较详细,将整个流程梳理了一遍。我再大概说一下整体流程吧,用户登陆,后端通过对账户和密码的验证后,返回给前端一个token,前端拿到这个token,保存到本地,后面发请求时,通过axios拦截器在所有的请求头里加上这个token,后端通过解析能拿到登陆用户的id。如果token超时,后端返回个错误码给前端,前端通过拦截器对返回的错误做判断,如果是超时,则跳转到登陆页面。代码如下:

//如果有token就在请求头里面带上
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('login_token');
  if (token) {
    config.headers['x-access-token'] = token;
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

//对登陆过期做处理
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  const { errCode } = error.response.data;
  if (errCode === 100) {
    localStorage.removeItem('login_token');
    history.push('/login');
  }
  return Promise.reject(error);
});

3.lodash是个好东西。


4.呃,貌似也没其他什么要说明的,大部分都是数据库的增删查改...后面想到什么再补充吧。


总结与源码

源码放在了github
没有使用immutable.js,但推介使用,不然性能不好。
最新的react v16prop-types从react中移了出来,个人感觉react是希望使用Facebook自家的flow去替代。
制作略粗糙,仅供参考。
内容就这么多,一些小的细节可能没有提到,自己会继续补充内容。

阅读 6.6k

我大EOI前端
[链接] 虽然公司尚小,但是志向不小

立志做一个好厨师!!!

420 声望
24 粉丝
0 条评论

立志做一个好厨师!!!

420 声望
24 粉丝
文章目录
宣传栏