FE-c（前端技術社群）專案開發筆記（非redux版）

大家好，我是梅巴哥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