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,antd4.x
• 后端： 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

四、 API接口

• 接口的组成部分
  • URL
  • 参数
  • 请求方式
  • 响应数据格式

该项目用到了9个接口:

接口名称	URL	参数	请求方式	响应数据格式
注册	/register	user	POST	{code: 0, data}
登录	/login	{username, password}	POST
保存头像	/saveAvatar	{avatar}	POST
获取用户个人信息	/user		GET
保存用户个人资料	/savePersonalInfo	{nickname, intro, sex}	POST
保存问题	/save/ques	{quesTittle, quesContent, publishDate, nickname}	POST
获取刚发布问题内容	/get/ques		GET
获取所有问题	/get/allQues		GET
根据_id获取对应问题	/get/idQue	{idQues}	GET

五、插件和第三方库

• create-react-app搭建脚手架
• react-router-dom开发单页应用
• axios前后端数据交互
• antd组件库构建界面
• mongoose操作mongodb数据库
• express搭建后台路由
• nodemon后台程序自动重运行
• blueimp-md5对密码进行MD5加密处理
• js-cookies操作浏览器端cookie数据
• multer表单数据提取和保存

六、遇到的问题和解决思路

代码中很多地方给了明确的注释，说明在敲的时候遇到了问题，在解决后进行了详细的注释。所以在代码中有注释的，在这里就不重复写了。

• ajax封装怎么统一处理错误提示
  • 封装一个Promise对象来处理错误

export default function ajax(url, data={}, type='GET') {
    // 用promise统一处理错误请求提示
    return new Promise((resolve, reject) => {
        let promise
        if (type === 'GET') { // 发送GET请求
            promise = axios.get(url, { // 配置对象
                params: data
            })
        } else { // 发送POST请求
            promise =  axios.post(url, data)
        }
        promise.then(res => {
            resolve(res)
        })
        .catch(err => {
            // reject(err)
            message.error('请求出错了：', err.msg)
        })
    })  
}

• 登录页面的表单处理，antd组件的应用
• upload头像上传，要仔细研究
• 点击某个问题的标签，跳转到问题详情页面，如果显示出来该问题的内容。解决方法是通过路由携带_id，然后通过_id获取到该问题。

七、还需要改进的地方

• 修改个人资料时，如果不改昵称，也可以正常保存
• 头像容易获取不到，不稳定，应该是跨域问题还没解决好
• 编辑问题内容，应该用富文本编辑器最好。

八、顺便提一下自己写代码的方法

• 每天有一个目标，即今天要写哪个模块，做好记录
• 遇到的问题记下来，解决问题后，要做好注释或笔记
• 重视解决思路，有了思路，代码就是顺理成章的事情了。

-----------------暂时写到这里，以后有要补充的，就再继续写，下一步开始传该项目的redux版本-----end-----