1:项目说明
这是一套基于Nodejs + koa2 + Typescript + Routing-controllers 纯手工搭建的项目基本框架,可以直接用在传统网站+管理后台的项目开发中。
就算你不会php,不会java也能够让前端的你无缝的对接和使用,独立开发网站不再是梦...
本项目中已经集成了:
-
1:
koa-log4实现系统日志(程序日志access,运行日志application),日志放在logs文件夹中,当然你也可以在/src/config中指定日志输入路径。 -
2:基于
ApiDoc实现接口帮助文档,可在方法上使用注释的方式生成接口文档,运行命令:npm run doc生成文档。 -
3:接口测试,主要在
rest/文件夹中,使用*.http进行接口调试。 -
4:实现
k-init cli可以直接通过命令创建各种文件。 -
5:
Pm2实现负载均衡,上线部署使用命令:npm run online。 -
6:
七牛云实现资源文件的上传和存储,案例请看:前端demo.vue,后端:AdminController.ts。 -
7:
集成。支付宝支付功能,可以直接配置然后使用(PS:支付涉及很多核心参数配置,所以该功能被删除,如需要请QQ私聊) -
8:基于
Java开发的思想,设计service层,dao层,entity层,model层等,当然在Node.js中使用略有差异,不影响。 -
9:基于还未正式发布的
Vue-next+Element实现管理后台页面,管理后台已实现登录权限控制等。 -
10:
PC端的前端主要使用require.js实现js模块化,less+jade实现Css样式和Html。 -
11:数据库基于
Mysql,数据库操作使用Node ORM:typeorm,如果不熟悉Mysql又不想去学习,那么可以自己集成第三方后端云数据库,减少数据库相关的学习和开发成本。 -
12:
基于新的打包工具parcel对管理后台的vue页面进行打包,后面会重新改造为Vue3作为项目管理后台 -
13:基于
gulp完成对PC前端less的编译和静态资源的复制等。
2:技术栈
- 1: TypeScript
- 2: Koa2.js(全家桶)
- 3: jade + less
- 4: GraphQL
- 5: TypeOrm
- 6: TypeDi
- 7: class-validator
- 8: Gulp
- 9: Routing-controllers
- 10: Require.js
- 11: Vue.js(全家桶) & TypeScript
- 12: Node.js
- 13: Parcel
- 14:Nginx 负载均衡
- 15: Docker
- 16: Mysql,主从读写分离
- 17: Bmob 在线后端云
- 18: 七牛视频云存储方案
- 19: 阿里云免费 https 证书
- 21: SpringBoot 微服务全家桶技术
- ... 此处省略一万字
3:k-init cli 使用帮助
参考PHP的框架Laravel提供的命令artisan实现终端创建项目中各种文件的功能,解决新增页面需要手工创建一大堆文件的麻烦!!
命令:
$ ./bin/kinit -h
Usage: kinit [options]
Options:
-t, --file-type <type> 文件类型: [controller,dao,entity,model,service,impl,jade,less,js]
-n, --file-name <name> 被创建的文件名称
-p, --file-path <path> 为 -t 参数指定 controller 文件夹名
-i, --is-create <is> 是否为 -t 参数自动创建相关文件类型 (default: false)
-v, --version 显示当前的版本
-h, --help display help for command
例子 1:
比如现在需要在src/controller/api下单独创建接口,那么可以使用命令:
$ ./bin/kinit -t controller -p api -n Test
参数说明:
-t controller:表示创建的文件类型为controller-p api:表示需要在src/controller/文件夹的api/文件夹下创建文件,因为controller里面有三个文件夹,所以需要指定文件夹名称-n Test:表示创建的文件名称是Test
例子 2:
现在我需要新增一个PC官网前台页面,比如详情页(Info),那么按照先前传统的过程我们需要手工去创建:controller,dao,entity,model,service,impl,jade,less,js等一堆文件!真的很烦,而且还要在这么多的文件中写入测试代码,更烦!!
这种需求很常见,但是现在不必忍受,因为你可以使用命令来自动化创建所有文件,文件中包含实例代码:
$ ./bin/kinit -t controller -p home -n Info -i true
参数说明(其他参数和上面一样):
-i true:表示是否需要为Info自动创建其他更多的各种文件,需要:true,不需要:false或者 不写参数-i即可。
例子 3:
创建其他类型的文件,命令都一样。例如:
$ ./bin/kinit -t entity -n Test # 创建 TestEntity 数据库实体
$ ./bin/kinit -t model -n Test # 创建 TestModel 这里主要做数据校验的功能
$ ./bin/kinit -t dao -n Test # 创建 TestDao 数据库操作层
$ ./bin/kinit -t service -n Test # 创建 TestService Service层
$ ./bin/kinit -t impl -n Test # 创建 TestServiceImpl Service实现层
$ ./bin/kinit -t jade -n Test # 创建 Test.jade 静态页面View层
$ ./bin/kinit -t js -n Test # 创建 Test.js 静态页面的js逻辑
$ ./bin/kinit -t less -n Test # 创建 Test.less 静态页面的css样式
4:插件 routing-controllers 的坑
-
Bug: 使用注解
@Render渲染模板后,第二次访问其他页面但是展示效果还是上次的页面,页面不进行渲染 -
路径:
node_modules/routing-controllers/driver/koa/KoaDriver.js -
行数:
250行
解决: 删除下面代码:
// 保留,不要修改
var renderOptions_1 = result && result instanceof Object ? result : {};
// 开始 - 下面的都删除
this.koa.use(function (ctx, next) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, ctx.render(action.renderedTemplate, renderOptions_1)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
});
// 结束 - 上面的都删除
删除后,使用使用下面代码替换:
return options.response.render(action.renderedTemplate, renderOptions_1);
最后改好的的样子如下:
var renderOptions_1 = result && result instanceof Object ? result : {};
return options.response.render(action.renderedTemplate, renderOptions_1);
-
Github 问题反馈地址:https://github.com/../434
-
Github 修复分支记录:https://github.com/types..
├── README.md 项目帮助文档
├── apidoc.json 插件apidoc的配置文件
├── bin 自己实现的终端命令行,用于生成各种文件
├── dist 正式环境下打包上线部署用的
├── doc 基于apidoc自动扫包生成的接口帮助文档
├── gulpfile.js gulp自动化的代码
├── logs 程序日志文件
├── md apidoc文档的公共部分页面
├── package.json 项目核心依赖配置文件
├── rest 接口 .http 测试文件
├── src 存放项目核心源码
│ ├── config 站点配置文件,分为开发阶段配置文件,和 正式环境配置文件
│ ├── controller 网站的核心控制器
│ │ ├── admin 管理后台控制器
│ │ ├── api 接口控制器
│ │ └── home 官网前端控制器
│ ├── dao 操作实体entity前的orm封装
│ ├── entity 数据库实体,和mysql中具体的表建立关联,实现查询
│ ├── index.ts 项目核心入口文件
│ ├── middleware 项目中间件,主要放在装饰在controller上做一些登录检查,json数据格式化日志记录等等
│ ├── model 主要用来自动校验api接口的参数是否符合model中的要求,比如ajax参数缺失,类型不对等!
│ ├── plugins 第三方插件,例如七牛云,阿里云,支付宝,微信支付等,需要在这里重写第三方sdk实现封装
│ ├── resources 存放页面字体图标等静态资源
│ │ ├── static
│ │ │ ├── css gulp编译less文件夹源码,自动生成的文件夹,存放这编译后的官网前端,管理后台的css
│ │ │ ├── fonts 分别存放官网前端,管理后台的fonts
│ │ │ ├── img 分别存放官网前端,管理后台的img
│ │ │ ├── js 存放官网前端的js,使用require.js 实现模块化
│ │ │ ├── less css的真正源码
│ │ │ └── plugins 第三方插件
│ │ └── view 网站的页面视图层
│ │ ├── admin 基于vue ClassApi 语法的管理后台,主要Typescript实现
│ │ │ ├── dist 管理后台打包后用于上线的,这个文件会被gulp自动复制到/dist/中
│ │ │ ├── index.html 管理后台的根html
│ │ │ ├── src 管理后台的源码
│ │ │ │ ├── App.vue 核心根组件
│ │ │ │ ├── api axios api接口的封装
│ │ │ │ ├── assets 静态资源
│ │ │ │ ├── config 站点配置
│ │ │ │ ├── index.ts 启动文件
│ │ │ │ ├── public 公共资源,不会被parcel打包的
│ │ │ │ ├── run 核心启动文件,主要实例化vue和装载各种插件
│ │ │ │ ├── store vuex全局状态管理
│ │ │ │ ├── utils 公共方法
│ │ │ │ ├── view 存放管理后台的.vue文件
│ │ │ └── tsconfig.json typescript 配置文件
│ │ └── home 官网前端页面
│ │ ├── layout.jade 公共父布局页面
│ │ ├── page 官网前端具体的每个页面
│ │ └── public 官网前端公共模板
│ ├── run 整个项目的核心启动文件
│ │ ├── app.ts 继承ini.ts,负责启动init.ts配置好的koa对象
│ │ └── init.ts 装配koa对象,实现各种配置,看源码
│ ├── service 接口请求的service层,主要依赖注入后调用dao层
│ │ ├── UserService.ts 实现impl中的接口,实现具体逻辑
│ │ └── impl 规范service代码的接口
│ └── utils
├── test 项目一些实验性demo的测试文件,比如测试支付宝支付
├── tsconfig.json 整个项目的typescript配置文件