起因

对全栈开发感兴趣

目的

  • 加深前端知识理解同时了解后端知识
    • 操作数据库
    • 搭建后端系统
  • 能进行简单的全栈开发
    • egg
  • 业务需求基础上
    • 系统优化
    • 安全问题

技术栈

  • React：不多介绍了。
  • UmiJsr: 插件化的前端应用框架，我觉得可以当作是 react 的工具包，方便使用react 开发项目
    • 包含 React 脚手架
    • 集成路由管理
    • 数据mock
    • …其余相关插件
  • eggjs：nodejs 的一个框架
    • 严格项目管理规范
    • 支持路由配置
    • server服务
    • 模板渲染
    • 默认支持许多插件

目前实现效果需求

民宿系统

  • header
  • 日期
    • 日期选择
  • 搜索
  • 列表展示
    • 滚动加载
  • 详情展示
    • 预定
    • 评论
      • 滚动加载
      • 发表评论
  • 订单页面
    • 待支付&已支付
    • 骨架屏


核心技术（亮点）

前端

  • React
  • UmiJs
  • 自定义Hook
    • useTitleHook:修改浏览器 title
    • useHttpHook：发送Http请求；监听状态值
    • useObserverHook：监听DOM元素是否进入展示区域
    • useImgHook：实现图片懒加载
  • 自定义组件
    • createPortal
    • Modal
      • 在根节点之外创建新的结点
    • ErrorBoundary
      • 错误边界处理
    • MenuBar
      • 底部导航组件
    • LazyLoad
      • 懒加载组件
    • ShowLoading
      • 底部加载组件
  • think-react-store : React 数据流解决方案
  • Project-libs： 常用函数集锦
    • 浏览器
    • 数组
    • 缓存

  • IntersectionObserver: (监听DOM元素是否进入展示区域API)滚动加载、图片懒加载

    后端

  • Egg.js

    • 对其进行扩展来提高开发效率
      • application：应用实例
      • helper：帮助函数，协助功能函数挂载到 eggJs下
      • request：请求扩展
      • context：上下文扩展
      • response：响应扩展
  • JWT:用户验证
  • Mysql： 数据存储
  • Sequelize： ORM框架，操作数据库
  • 自定义中间件和插件：拦截请求等处理
    • 中间件：
      • httpLog
      • userExist
    • 插件：
      • egg-auth：验证用户
      • egg-info：获取系统信息

        架构

        image.png