一步一步搭建前后端综合项目：React + hooks API + Typescript + GraphQL + Koa + MongoDB

#1

Introduce

个人构思的前后端综合项目，统计成都自摇号以来所有的房源信息，通过图表的形式展示出来，方便对成都房源进行分析，希望可以早点摇到一套。。

Preview

在线预览：https://cdfangyuan.cn

源代码：https://github.com/yhlben/cdfang-spider

Features

已实现的功能：

  • [:heavy_check_mark:] 房源数据同步最新。

  • [:heavy_check_mark:] 首页：登记中房源、汇总统计展示。

  • [:heavy_check_mark:] 首页：按楼盘数、房源数统计，及统计结果排名。

  • [:heavy_check_mark:] 首页：按区域统计，汇总表查询。

  • [:heavy_check_mark:] 历史页：年度汇总统计展示。

  • [:heavy_check_mark:] 历史页：按房源数、区域、月份统计，及统计结果排名。

  • [:heavy_check_mark:] 历史页：按房源数、楼盘数、区域统计，汇总表查询。

Technology

主要用到的技术：

  • React：MVVM 框架，用于构建前端界面。

  • Ant Design：基于 React 的组件库。

  • Bizchats：基于 React 的图表库。

  • Less：CSS 预处理器，提供变量、计算、嵌套、Mixin、函数等。

  • Webpack：打包前端项目，生成静态文件。

  • Apollo：基于 GraphQL 封装，用于搭建后端 GraphQL 支持和前端数据请求。

  • Koa：后端 Web 层框架，用于接收请求，进行处理。

  • Cheerio：解析抓取的 HTML 数据。

  • Mongoose：为 MongoDB 定义数据模型。

  • Gulp：打包后端项目，编译 TS 语法。

  • Jest：测试前后端项目，单元测试，API 测试等。

  • Typescript：为 JS 提供良好的类型检查功能，能编译出高质量的 JS 代码。

项目没有使用脚手架工具搭建，都是一步一步配置而成。具体的搭建流程：项目选型与环境搭建。

最后，欢迎大家多提意见，让项目活起来，感兴趣的点个 star 吧，感谢大家支持！

1 Like
#2

手动点个赞。

1 Like
#3

写的不错，需要工作机会的话，可以加我微信：liang68866

#4

多谢老哥支持！:blush:

#5

仔细读了一下项目，项目很 good，该用的技术几乎都用了，唯一缺少 pwa
缺点：1. 测试存在无意义的断言
2. History 路由，后端处理存在问题

// 支持 browserRouter
  .get(/\/20[1-9][0-9]/, ctx => {
    const file = fs.readFileSync(path.join('client/index.html'));
    ctx.set('Content-Type', 'text/html; charset=utf-8');
    ctx.body = file;
  });

实际并没有支持
以上是我在本地开发测试结果，线上目前未发现问题

#6

多谢提意见，这 2 个问题的确存在，测试断言后续会再优化一下。对于 history 路由的问题，是因为开发阶段使用的是 webpack-dev-server 启动 web 服务，就不能拦截到路由请求，这个问题还没有想到比较好的解决方案，可能要使用 webpack-dev-middleware 去重构 server 端。线上环境直接 pm2 启动服务，就不会有问题。

#7

还有一个不算缺点的缺点： grphql 很完美（被认为是下一代标准），但由于其思想激进，以及曾经的历史包袱（使用 grphql，则意味很多开源产品，都要考虑其是否支持 grphql 特性），就目前国内来说，很少有公司敢完全采用，哈哈

1 Like
#8

可以在努力努力，加上 ssr wpa，哈哈

#9

嗯嗯，还得加油学一波，哈哈