大家好，我是梅巴哥er。本篇介绍的是FE-c项目的整个写就过程，这次发的是一个非redux版本。

• 项目代码开源地址： https://github.com/guozi007a/FE-c （FE-c就是font-end community 前端技术社区）。

一，项目描述

• 项目是自己设计的，做了一个前后端分离的社区应用。
• 主要包括4个版块，技术问答区，面试分享区，公司畅聊区，代码开源区。其中，主要做的是技术问答区，后面三个版块用到的知识，和第一个版块的技术重合度较高。
• 应用功能包括用户注册，登录，设置个人资料，发布问题，问题列表，回答问题，点赞（表示解决了问题）等。
• 前端用react搭建，还用了ES6，antd，webpack，react-router-dom等。
• 后端使用了node+express+mongodb等
• 采用模块化 / 组件化 / 工程化的模式开发。

二、技术选型

• 前端：react, react-router-dom
• 后端： node, express, mongodb, mongoose,
• 前后台交互： ajax请求, axios, async/ await, 测试接口工具----postman
• 模块化： ES6, babel
• 项目构建/工程化： webpack, create-react-app
• 其他相关： blueimp-md5, multer, git, proxy

三、前端路由

• 注册
  • path: /register
  • component: Register
• 登录
  • path: /login
  • component: Login
• 主界面
  • path: /main
  • component: MainLogined
  • 发布问题后跳转到的显示页面
    • path: /main/articles
    • component: Articles
  • 个人资料页面
    • path: /main/personal
    • component: Personal
  • 技术问答区问题列表
    • path: /main/asks
    • component: Asks
    • 发布问题编辑页面
      • path: /main/asks/md
      • component: MdQues
    • 单个问题页面
      • path: /main/asks/questions/:id
      • component: Questions
  • 面试分享区
    • path: /main/interview
    • component: Interview
    • 分享内容
      • path: /main/interview/contents
      • component: InterContents
  • 公司畅聊区
    • path: /main/componies
    • component: Componies
    • 畅聊页面
      • path: /main/componies/comchatting
      • component: ComChatting
  • 代码开源区
    • path: /main/codes
    • component: Codes
    • 开源页面
      • path: /main/codes
      • component: /main/codes/codeshow