@crazydu/elpis

v1.0.1

Published

4 months ago

Elpis - A powerful Node.js framework for building web applications with Vue.js frontend

0High
0Medium
0Low

crazydu

elpis nodejs framework koa vue webpack dashboard admin backend

Elpis

Elpis 是一个强大的全栈 Node.js 框架，专为构建现代化的 Web 应用程序而设计。它集成了 Koa.js 后端、Vue.js 前端和完整的构建工具链，提供开箱即用的 Dashboard 模板系统和 Schema 驱动的 UI 生成能力。

✨ 特性

🚀 全栈框架: 后端基于 Koa.js，前端基于 Vue.js 3
📊 Dashboard 系统: 预构建的 Dashboard 模板和组件
🔧 Schema 驱动: 通过 JSON Schema 自动生成表单和表格
🎨 现代 UI: 基于 Element Plus 的组件库
📦 模块化架构: 自动加载的 Controllers、Services、Middleware 系统
🛠️ 构建工具: 集成 Webpack 的前端工程化
🔐 认证系统: JWT 基础的用户认证
🗄️ 数据库支持: MySQL 集成和 Knex.js 查询构建器
📱 响应式设计: 支持多种设备和屏幕尺寸

🚀 快速开始

安装

npm install @crazydu/elpis

基础使用

const Elpis = require('@crazydu/elpis');

// 启动服务器
Elpis.serverStart({
  port: 3000,
  host: 'localhost'
});

// 构建前端
Elpis.frontendBuild('dev'); // 开发环境
Elpis.frontendBuild('production'); // 生产环境

使用 Controllers 和 Services

const Elpis = require('@crazydu/elpis');

// 访问基础控制器
const BaseController = Elpis.Controller.Base;

// 访问基础服务
const BaseService = Elpis.Service.Base;

🏗️ 项目结构

elpis/
├── eplis-core/              # 框架核心
│   ├── index.js             # 核心启动文件
│   ├── env.js               # 环境配置
│   └── loaders/             # 自动加载器
│       ├── config.js        # 配置加载器
│       ├── controller.js    # 控制器加载器
│       ├── service.js       # 服务加载器
│       ├── middleware.js    # 中间件加载器
│       ├── router.js        # 路由加载器
│       ├── router-schema.js # 路由Schema加载器
│       └── extend.js        # 扩展加载器
├── app/                     # 应用代码
│   ├── controller/          # 控制器层
│   ├── service/             # 服务层
│   ├── middleware/          # 中间件
│   ├── router/              # 路由定义
│   ├── router-schema/       # API Schema定义
│   ├── pages/               # 前端页面
│   │   ├── dashboard/       # Dashboard页面
│   │   ├── widgets/         # 可复用组件
│   │   └── store/           # 状态管理
│   ├── webpack/             # 构建配置
│   ├── public/              # 静态资源
│   └── view/                # 模板文件
├── config/                  # 配置文件
├── model/                   # 数据模型
└── test/                    # 测试文件

🎯 核心概念

1. 自动加载系统

Elpis 采用约定优于配置的原则，自动加载各个模块：

Controllers: 自动加载 app/controller/ 目录下的文件
Services: 自动加载 app/service/ 目录下的文件
Middleware: 自动加载 app/middleware/ 目录下的文件
Routes: 自动加载 app/router/ 目录下的文件
Configs: 自动加载 config/ 目录下的配置文件

2. Dashboard 配置系统

通过配置对象快速构建 Dashboard 应用：

const config = {
  mode: 'dashboard',
  name: '我的管理系统',
  describe: '企业级管理系统',
  icon: 'dashboard-icon',
  menu: [
    {
      key: 'dashboard',
      name: '仪表盘',
      menuType: 'module',
      moduleType: 'schema',
      schemaConfig: {
        api: '/api/dashboard',
        schema: {
          type: 'object',
          properties: {
            // 定义数据Schema
          }
        }
      }
    }
  ]
};

3. Schema 驱动的 UI

通过 JSON Schema 自动生成表单和表格：

const schemaConfig = {
  api: '/api/users',
  schema: {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        label: '姓名',
        tableOption: { visible: true },
        createFormOption: { 
          comType: 'input',
          visible: true,
          required: true 
        }
      },
      email: {
        type: 'string',
        label: '邮箱',
        format: 'email'
      }
    }
  },
  tableConfig: {
    headerButtons: [
      { label: '新增用户', eventKey: 'create' }
    ],
    rowButtons: [
      { label: '编辑', eventKey: 'edit' },
      { label: '删除', eventKey: 'delete' }
    ]
  }
};

🔧 配置说明

环境配置

// config/config.default.js
module.exports = {
  // 数据库配置
  database: {
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: 'password',
    database: 'elpis'
  },
  
  // JWT配置
  jwt: {
    secret: 'your-secret-key',
    expiresIn: '24h'
  },
  
  // 文件上传配置
  upload: {
    maxSize: '10mb',
    allowedTypes: ['image/*', 'application/pdf']
  }
};

中间件配置

// app/middleware/auth.js
module.exports = (app) => {
  return async (ctx, next) => {
    const token = ctx.headers.authorization;
    if (!token) {
      ctx.status = 401;
      ctx.body = { message: '未授权访问' };
      return;
    }
    // 验证token逻辑
    await next();
  };
};

📱 前端组件

核心组件

SchemaForm: 基于Schema自动生成表单
SchemaTable: 基于Schema自动生成表格
SchemaSearchBar: 基于Schema自动生成搜索栏
HeaderContainer: 页面头部容器
SiderContainer: 侧边栏容器

使用示例

<template>
  <div class="dashboard">
    <header-container />
    <sider-container />
    <main-content>
      <schema-table 
        :schema="tableSchema"
        :api="tableApi"
        @row-click="handleRowClick"
      />
    </main-content>
  </div>
</template>

<script>
import { SchemaTable } from '@crazydu/elpis';

export default {
  components: { SchemaTable },
  data() {
    return {
      tableSchema: {
        // 表格Schema配置
      },
      tableApi: '/api/data'
    };
  }
};
</script>

🚀 部署

开发环境

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建前端
npm run build:dev

生产环境

# 构建生产版本
npm run build:prod

# 启动生产服务器
NODE_ENV=production npm start

Docker 部署

FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build:prod

EXPOSE 3000
CMD ["npm", "start"]

🧪 测试

# 运行所有测试
npm test

# 运行特定测试文件
npm test test/controller/project.test.js

# 代码检查
npm run lint

📚 API 参考

Elpis.serverStart(options)

启动 Elpis 服务器

参数:

options (Object): 服务器配置选项
- port (Number): 服务器端口 (默认: 8080)
- host (String): 服务器主机 (默认: 127.0.0.1)

返回: Promise

Elpis.frontendBuild(env)

构建前端应用

参数:

env (String): 构建环境 ('dev' 或 'production')

Elpis.Controller

控制器类访问：

Elpis.Controller.Base: 基础控制器类
Elpis.Controller.Project: 项目控制器类

Elpis.Service

服务类访问：

Elpis.Service.Base: 基础服务类
Elpis.Service.Project: 项目服务类

🤝 贡献指南

Fork 本仓库
创建特性分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add some amazing feature')
推送到分支 (git push origin feature/amazing-feature)
开启 Pull Request

📄 许可证

本项目采用 ISC 许可证 - 查看 LICENSE 文件了解详情。

🆘 支持

仓库: https://git.code.tencent.com/CrazyDu/elpis
问题反馈: https://git.code.tencent.com/CrazyDu/elpis/issues
npm包: https://www.npmjs.com/package/@crazydu/elpis

🎉 致谢

感谢所有为 Elpis 项目做出贡献的开发者！

Elpis - 让全栈开发更简单、更高效！ 🚀