vue+koa+sequlize 搭建使程序员专注业务代码开发框架---项目结构思考

Posted acefeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+koa+sequlize 搭建使程序员专注业务代码开发框架---项目结构思考相关的知识,希望对你有一定的参考价值。

  好久没进行日常积累了。最近闲着没事写了一个自己业务开发框架,感觉有一些收获,对于webpack、koa等等都有了一些新的认识,总的来说还是挺有收获的,今天开始分享一下自己的经验,和记录其中踩到的坑。

  由于我希望将代码之后代码中具有以下几种特点

  1. client和server进行分离,不包含耦合成分。
  2. server使用script标签的形式进行引用前端的代码。
  3. 前端的页面不能只有一个入口,多入口的形式可以减少业务的耦合。增加代码的可维护性。
  4. 前后端交互的数据不应该只是使用ajax请求进行请求,应该在一定程度上开始就具有某些初始数据。能有一定程度上的减少单页seo相关问题。
  5. 区分开发环境和线上环境。
  6. server进行分层。大致分为routes、controlers、services、dao、models、views。
  7. 每个层次上层进行配置。方便抽离共有代码到一起。使用起来方便一些。
  8. 使用eslint进行代码检测

  其中还有一些细小的思考,在后面一一再详细说说。

 


 

  文件大概结构如下

|____config                server运行时的配置文件
|____server                后端代码主要在这里    
| |____middleware                koa的中间件放在这里
| |____dao                与数据库相关的代码
| |____models                数据库表的映射json
| |____lib                server的一些方法类
| |____controllers                前端请求的处理方法存放位置 主要处理前端逻辑
| |____views                后端模板引擎的存放位置
| | |____common                共有模板
| | |____pages                按照业务划分的模板
| |____routes                接收路由的存放位置
| |____app.js                server主文件入口
| |____services                对于数据库返回的数据进行整理
| | |____test                测试的文件夹
| | |____base                services的base类存放位置
|____setting                项目搭建过程中的配置文件
|____client                前端代码存放位置
| |____config                webpack相关配置
| |____build                 webpack相关配置
| |____src                前端代码主要的位置
| | |____test                测试文件夹
| | |____common                前端共有模板的存放位置

  简单罗列了部分文件夹的作用。其中包含了主要的配置文件夹,以及client和server的位置。其中有一些详细的思考在后面再慢慢写吧。

 

  该项目的github地址:https://github.com/acefeng/feng

以上是关于vue+koa+sequlize 搭建使程序员专注业务代码开发框架---项目结构思考的主要内容,如果未能解决你的问题,请参考以下文章

Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)

Vue + Koa 搭建ACM OJ

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

Vue.js+Koa2移动电商实战-1

微信小程序全栈开发课程课程目录(mpvue+koa2+mysql)

新手向Vue.js + Node.js(koa) 合体指南