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

最新推荐文章于 2024-08-17 12:42:41 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-08-17 12:42:41 发布

阅读量356

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/tuzi007a/article/details/110213221

版权

react 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

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