FE-c（前端技术社区）项目开发笔记（非redux版）

已注销
154 阅读4分钟

大家好，我是梅巴哥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参数请求方式响应数据格式
注册/registeruserPOST{code: 0, data}
登录/login{username, password}POST
保存头像/saveAvatar{avatar}POST
获取用户个人信息/userGET
保存用户个人资料/savePersonalInfo{nickname, intro, sex}POST
保存问题/save/ques{quesTittle, quesContent, publishDate, nickname}POST
获取刚发布问题内容/get/quesGET
获取所有问题/get/allQuesGET
根据_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-----

avatar
文章
阅读
粉丝