我的前后端架子搭建

前言

作为一名前端开发者，了解一些后端语言，成为半个全栈工程师也是最基本的（23333），就本篇文章，给大家介绍一下我的前后端目录结构，不喜勿喷，也希望各位给我一些意见，哈哈哈。

开发语言

前端

前端这里使用react.js，打包工具是parcel

后端

后端使用的语言依旧是熟悉的node.js，使用express搭建后端框架。

数据库

数据库使用的是mongodb

目录结构

• db 数据库有关文件

  • schemas 数据库的各个collection的映射

    • user.js 数据库的user collection的映射
    • ... ... 其他collection的映射
  • connect.js 连接数据库
  • mongoose-db.js 导出可操作数据库的映射对象

• tool

  • 通用工具类（如发邮件等通用操作） ...

• public 前端开发文件夹

  • dist 打包build生成的文件

  • public 存放入口文件- index.html、网站图标、生成pwa网站的manifest文件

    • index.html
    • xxx.ico
    • manifest.json
    • ... 其他

  • src 源代码文件夹

    • actions 存放所有actions

      • index.js 导出所有actions
      • action_1.js 相关业务的action，名字随便取的~~
      • ... ....

    • asset 存放所有静态文件

      • xxx.png
      • xxx.json
      • ... ...

    • components 存放所有自定义通用组件

      • index.js 导出所有自定义通用组件
      • ... ... 一系列自己写的通用组件

    • constants存放所有action type

      • index.js 导出所有action type
      • ActionTypes_1.js
      • ... ...

    • container 存放主渲染、包含router等配置的js文件

      • app.js
      • index.scss

    • lib 存放所有通用类、http请求类、配置文件

      • index.js 导出需要的js文件
      • config.js 配置文件，例如开发模式下的后端接口url，cookie的有效时间等......
      • cookie.js 自定义cookie的增删改查操作类
      • userServer.js 有关用户业务的http请求类
      • ...其他http请求类的封装
    • pages 所有页面

    • reducers 所有的reducer

      • index.js 导出一个包含所有reducer的rootReducer
      • reducer_1 名字在这里是举例...
      • ... ...
    • main.js 入口js文件
  • .babelrc babel的配置文件
  • package.json

• routes express的所有router

  • route_1.js
  • route_2.js
  • ......

• service 有关逻辑处理与数据库的交互

  • service_1.js
  • service_2.js
  • ... ...
• config.js 有关后端的配置文件，一般包含数据库连接地址，token认证的秘钥，token的有效时间，服务运行的端口号等......
• index.js node.js 的入口文件
• package.json

结语

node.js 的后端结构，主要还是采用mvc的模式，但是这里没有view层，routes即为Controller， schemas 即为Model层，service为服务层（Service），希望能给一些不明白的同行带来一点灵感，如果有不合理的地方，也希望各位大神指点迷津，哈哈，ok，不说了。

---

附上项目地址：https://github.com/justwiner/...