# jun-admin-midway **Repository Path**: winnerLi/jun-admin-midway ## Basic Information - **Project Name**: jun-admin-midway - **Description**: midwayjs，基础框架； bullmq，基于redis的任务与队列框架； typeorm，node的orm框架 mysql，最流行的关系型数据库管理系统； elasticsearch，大数据处理； moleculer，一个Node.js快速、可扩展、容错的微服务框架； - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-03-30 - **Last Updated**: 2024-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

模块化、插件化、极速开发CRUD，方便快速构建迭代后台管理系统，支持serverless、docker、普通服务器等多种方式部署 。

## 技术栈 - 后端：**`node.js` `midway.js` `koa.js` `typescript`** - 前端：**`vue.js` `element-plus` `jsx` `pinia` `vue-router`** - 数据库：**`mysql` `postgresql` `sqlite`** 如果你是前端，后端的这些技术选型对你是特别友好的，前端开发者可以较快速地上手。 如果你是后端，Typescript 的语法又跟 java、php 等特别类似，一切看起来也是那么得熟悉。 #### 官网 ## 演示 - 账户：admin - 密码：123456 #### 项目前端 ## 公众号 #### 修改数据库配置，配置文件位于`src/config/config.local.ts` 以 Mysql 为例 Mysql(`>=5.7版本`)，建议 8.0，node 版本(`>=16.x`)，建议 18.x，首次启动会自动初始化并导入数据 ```ts // mysql，驱动已经内置，无需安装 typeorm: { dataSource: { default: { type: 'mysql', host: '127.0.0.1', port: 3306, username: 'root', password: '123456', database: 'myDataBase', // 自动建表 注意：线上部署的时候不要使用，有可能导致数据丢失 synchronize: true, // 打印日志 logging: false, // 字符集 charset: 'utf8mb4', // 是否开启缓存 cache: true, // 实体路径 entities: ['**/modules/*/entity'], }, }, }, ``` #### 安装依赖并运行 ```bash $ npm i $ npm run dev $ open http://localhost:8001/ ``` 注： `npm i`如果安装失败可以尝试使用[cnpm](https://developer.aliyun.com/mirror/NPM?from=tnpm)，或者切换您的镜像源，推荐使用[pnpm](https://pnpm.io/) ## CURD(快速增删改查) 大部分的后台管理系统，或者 API 服务都是对数据进行管理，所以可以看到大量的 CRUD 场景(增删改查)，cool-admin 对此进行了大量地封装，让这块的编码量变得极其地少。 #### 新建一个数据表 `src/modules/demo/entity/goods.ts`，项目启动数据库会自动创建该表，无需手动创建 ```ts import { BaseEntity } from '@cool-midway/core'; import { Column, Entity, Index } from 'typeorm'; /** * 商品 */ @Entity('demo_app_goods') export class DemoAppGoodsEntity extends BaseEntity { @Column({ comment: '标题' }) title: string; @Column({ comment: '图片' }) pic: string; @Column({ comment: '价格', type: 'decimal', precision: 5, scale: 2 }) price: number; } ``` #### 编写 api 接口 `src/modules/demo/controller/app/goods.ts`，快速编写 6 个 api 接口 ```ts import { CoolController, BaseController } from '@cool-midway/core'; import { DemoAppGoodsEntity } from '../../entity/goods'; /** * 商品 */ @CoolController({ api: ['add', 'delete', 'update', 'info', 'list', 'page'], entity: DemoAppGoodsEntity, }) export class DemoAppGoodsController extends BaseController { /** * 其他接口 */ @Get('/other') async other() { return this.ok('hello, cool-admin!!!'); } } ``` 这样我们就完成了 6 个接口的编写，对应的接口如下： - `POST /app/demo/goods/add` 新增 - `POST /app/demo/goods/delete` 删除 - `POST /app/demo/goods/update` 更新 - `GET /app/demo/goods/info` 单个信息 - `POST /app/demo/goods/list` 列表信息 - `POST /app/demo/goods/page` 分页查询(包含模糊查询、字段全匹配等) ### 部署 #### 、部署流程(以宝塔为例)： 1. 拉取前后端代码； 2. 本地配置完数据库运行，等待数据库初始化完成； 3. 打包前后端代码，打包之前注意配置生产环境的数据库配置`config/config.prod.ts`，[查看 midway 官方多环境配置文档open in new window](http://www.midwayjs.org/docs/env_config)； 4. 服务器环境准备，安装宝塔、mysql、nodejs、nginx、pnpm 等； 5. 上传前后端代码到服务器； 6. 安装依赖，编译打包后端服务，启动服务； 7. 配置 nginx 反向代理； 8. 访问域名，如果一切正常，恭喜你，部署成功！ 注意 * 线上的数据库是需要本地传上去的，安全考虑生产环境不会自动初始化数据库； * 前端访问后端的接口地址默认是前端根地址+/api，所以需要配置 nginx 反向代理/api 到后端服务； #### [#](https://cool-js.com/admin/deploy.html#_2%E3%80%81%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8-pnpm-%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96)2、推荐使用 pnpm 安装依赖 [pnpm 官网open in new window](https://pnpm.io/) 安装 ``` npm install -g pnpm ``` 配置淘宝镜像 ``` pnpm config set registry https://registry.npmmirror.com ``` #### [#](https://cool-js.com/admin/deploy.html#_3%E3%80%81pm2-%E8%BF%90%E8%A1%8C%E5%90%8E%E7%AB%AF%E6%9C%8D%E5%8A%A1)3、PM2 运行后端服务 ``` // 命令行安装 pm2 npm install pm2 -g ``` 常用命令 ``` // 启动一个服务 pm2 start // 列出当前的服务 pm2 list // 停止某个服务 pm2 stop // 重启某个服务 pm2 restart // 删除某个服务 pm2 delete // 查看服务的输出日志 pm2 logs ``` cluster 方式启动 ``` // -i 表示 number-instances 实例数量 // max 表示 PM2将自动检测可用CPU的数量 可以自己指定数量 pm2 start ./bootstrap.js -i max --name cool-admin(改成自己的应用名称) // 重启 pm2 restart cool-admin ``` 日志 ``` pm2 logs cool-admin // 默认的日志位置 /root/.pm2/logs ``` #### [#](https://cool-js.com/admin/deploy.html#_4%E3%80%81nginx-%E9%85%8D%E7%BD%AE%E7%A4%BA%E4%BE%8B)4、nginx 配置示例 ``` upstream cool { server 127.0.0.1:8001; } server { ... # 前端打包完放这边 root /home/test/front; # 防止刷新404 location / { try_files $uri $uri/ /index.html; } # 代理服务端地址 访问/api 表示访问服务端接口而不是静态资源 location /api/ { proxy_pass http://cool/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; proxy_cache_bypass no_cache; #缓存相关配置 #proxy_cache cache_one; #proxy_cache_key $host$request_uri$is_args$args; #proxy_cache_valid 200 304 301 302 1h; #持久化连接相关配置 proxy_connect_timeout 3000s; proxy_read_timeout 86400s; proxy_send_timeout 3000s; #proxy_http_version 1.1; #proxy_set_header Upgrade $http_upgrade; #proxy_set_header Connection "upgrade"; add_header X-Cache $upstream_cache_status; #expires 12h; } # socket需额外配置 location /socket { proxy_pass http://cool/socket; proxy_connect_timeout 3600s; #配置点1 proxy_read_timeout 3600s; #配置点2,如果没效,可以考虑这个时间配置长一点 proxy_send_timeout 3600s; #配置点3 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header REMOTE-HOST $remote_addr; #proxy_bind $remote_addr transparent; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; rewrite /socket/(.*) /$1 break; proxy_redirect off; } } ``` ## [#](https://cool-js.com/admin/deploy.html#docker-%E6%96%B9%E5%BC%8F)Docker 方式 docker 部署的配置方式可以参考普通的部署方式，以下是 docker 部署的简单流程； #### [#](https://cool-js.com/admin/deploy.html#_1%E3%80%81%E9%83%A8%E7%BD%B2%E6%B5%81%E7%A8%8B-%E4%BB%A5%E5%AE%9D%E5%A1%94%E4%B8%BA%E4%BE%8B-1)1、部署流程(以宝塔为例)： 1. 拉取前后端代码； 2. 本地配置完数据库运行，等待数据库初始化完成； 3. 打包后端和前端镜像； 4. 创建 docker network； 5. docker 运行后端和前端； 6. 访问如果登录页正常出现验证码，恭喜你，部署成功！ #### [#](https://cool-js.com/admin/deploy.html#_2%E3%80%81%E6%89%93%E5%8C%85%E9%95%9C%E5%83%8F)2、打包镜像 注意 打包镜像之前，需要确保前端和后端在本地运行过一次，让前端能够自动生成`eps.json`文件，该文件是前端自动扫描后端接口生成的，有了该文件，前端不需要特意写调用接口的 service。 如果你是自动化部署，你需要把生成的`eps.json`也提交到代码仓库，否则你将无法正常访问你的 api 接口。 ``` // 创建docker network docker network create cool // 打包后端镜像 docker build -t cool-admin-midway:1.0 . // 打包前端镜像 docker build -t cool-admin-vue:1.0 . ``` #### [#](https://cool-js.com/admin/deploy.html#_3%E3%80%81%E8%BF%90%E8%A1%8C)3、运行 ``` // 运行后端 docker run --network cool -p 8001:8001 --name midway cool-admin-midway:1.0 // 运行后端 docker run --network cool -p 80:80 --name vue cool-admin-vue:1.0 ``` #### [#](https://cool-js.com/admin/deploy.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9)注意事项 docker 部署，建议将缓存换成 redis，文件上传换成云存储，如：oss，防止操作不当导致的数据丢失。 ### 内置指令 - 使用 `npm run lint` 来做代码风格检查。