Skip to content

docs: update pro readme #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 1 commit into from
Nov 28, 2024
Merged

docs: update pro readme #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 57 additions & 113 deletions packages/toolkits/pro/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,79 @@
# tiny-toolkit-pro
# TinyPro

## 说明
TinyCLI 是一个跨平台的前端工程化 CLI 工具，为开发者提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。

tiny-toolkit-pro 套件，开箱即用的全栈开发基础平台
TinyPro 是 TinyCLI 的一个套件，是一个开箱即用、前后端分离的后台管理模板。

## 准备工作
### 数据库准备工作
如果要对接服务端，请提前安装配置本地数据库服务或者云数据库服务，确保连接正常可用，可使用本地数据库或云数据库。
特性：
- 支持 NestJS 后端
- 支持通过可视化方式配置菜单
- 细粒度权限管理：角色、用户、菜单、组件权限
- 支持多种构建工具：Webpack / Vite / Rspack / Farm
- 多级菜单
- 页签模式
- Mock 数据
- 主题定制
- 国际化

**本地数据库：** 本地数据库安装MySQL
- 查看本机操作系统，选择合适的安装包版本[下载MySQL](https://dev.mysql.com/downloads/)
- 安装完成MySQL软件
- 进行初始化配置，设置端口、用户、登录密码等，测试连接正常
官网：[https://opentiny.design/vue-pro](https://opentiny.design/vue-pro)

**云数据库：** 云数据库推荐使用[华为云数据库RDS](https://support.huaweicloud.com/productdesc-rds/zh-cn_topic_dashboard.html)
- 注册华为帐号并开通华为云
- 选择合适的计费模式购买并配置数据库实例
- 选择合适的连接模式进行连接
具体开通过程请参考：[RDS for MySQL快速入门](https://support.huaweicloud.com/qs-rds/rds_02_0008.html)，也可使用TinyCLI云服务插件以命令行的方式开通创建，具体请参考：[TinyCLI 云服务插件](https://opentiny.design/vue-pro/docs/advanced/plugin)
## 一行命令初始化一个后台管理模板

### Egg.js准备工作
Egg.js 是一个Node.js服务端框架，开发环境准备好Node、Git等即可，[参考指南](https://www.eggjs.org/zh-CN/intro/quickstart)
请确保您安装了`Node.js`、`NPM`、`TinyCLI`。

### Spring Cloud准备工作
如选择对接Spring Cloud，需要提前安装好JDK、IDE、Maven、配置好环境变量等
#### Java环境安装
1. [下载JDK](https://www.oracle.com/java/technologies/downloads/)
2. [配置环境变量](https://www.runoob.com/java/java-environment-setup.html)
#### IDE安装
建议安装使用 [IntelliJ IDEA](https://www.jetbrains.com/idea/)，内置Maven，[下载链接](https://www.jetbrains.com/zh-cn/idea/download/)
```bash
tiny init pro
```

#### Maven安装
tiny-toolkit-pro 套件中的 Spring Cloud 采用 Maven 构建项目和依赖管理
1. [下载链接](https://maven.apache.org/download.cgi)
2. [环境配置](https://www.runoob.com/maven/maven-setup.html)
选择 Vue 技术栈，初始化完成后，项目结构应该为：

#### 微服务引擎
有两种方式可供选择：

* 通过下载安装本地简化版 CSE 搭建本地开发环境，下载链接：[CSE 2.0](https://support.huaweicloud.com/devg-cse/cse_devg_0036.html)，下载完成，一键启动cse.exe

* 使用[华为云微服务引擎(CSE)](https://support.huaweicloud.com/qs-cse/cse_qs_0002.html)
```
tiny-pro
nestJs # 后端服务
web # 前端服务
```

####
## 后端启动

## 用法
后端服务支持 `Docker 启动` 与 `命令启动` 两种方式。

### 初始化
### Docker 启动

```
tiny init pro
```
### 配置项目名称、描述
请确保您安装了 `Docker`。

```
? 请输入项目名称： (tiny-pro)
? 请输入项目描述： (基于TinyPro套件创建的中后台系统)
```
### 选择前端技术栈
目前支持`Vue` `Angular`两种前端技术栈。
```
? 请选择您希望使用的技术栈： (Use arrow keys)
> vue
angular
```
### 选择服务端技术栈（可选配置）
**目前仅 `Vue`工程支持对接服务端，剩余功能正在开发中。**
如果选择不对接服务端，全部接口将采用mock数据。
```
? 请选择您希望使用的服务端技术栈： (Use arrow keys)
> Egg.js
Spring Cloud
暂不配置
```
### 选择数据库（可选配置）
```
? 请选择数据库类型： (Use arrow keys)
> mySQL
暂不配置
```
在 `tiny-pro/nestJs` 下执行以下命令，启动后端服务：

### 配置数据库信息
**初始化过程中会自动创建数据库和表，建议输入新的数据库名称以免造成数据库覆盖风险！**
```
? 请输入数据库地址： (localhost)
? 请输入数据库端口： (3306)
? 请输入数据库名称：
? 请输入登录用户名： (root)
? 请输入密码： [input is hidden]
```bash
docker compose up -d
Comment on lines +40 to +47
Copy link

@coderabbitai coderabbitai bot Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance Docker setup instructions.

Consider adding:

  • Required ports and how to configure them
  • Environment variable configuration steps
  • Docker compose file overview
  • Container health check instructions

```
- 此处配置也可在项目创建完成后在`server/config/config.default.ts`中进行配置修改。
- pro套件会在初始化时自动创建数据库和表，如因配置等问题导致数据库初始化失败，有以下两种方式可帮助重新初始化数据库：
- 确认好正确配置后重新运行 `tiny init pro` 覆盖安装。
- 进入 `server/app/databases` 目录下手动执行相关sql。
- 数据库表中会自动插入一条用户信息（账号：admin@example.com 密码：admin），可直接用于登录。
- 如server服务启动失败，请确保数据库服务的地址、名称、账号、密码等与`server/config/config.default.ts` 中配置一致。
- `server/app.ts` 中会同步ORM模型到数据库帮助新建表但只建议在开发环境下使用。

### 开启本地服务器
### 命令启动

前端
```
cd web && npm run start
```
后端
* EggJS
```
cd server && npm run dev
请确保您安装了 `MySQL`、`Redis`。

在启动项目前请您做好如下检查：

- MySQL 服务可以正常访问
- Redis 服务可以正常访问
- MySQL 中存在 `.env` 文件中 `DATABASE_NAME` 字段定义的数据库，且该数据库为空
- `.env` 文件中 `DATABASE_SYNCHRONIZE` 为 `true`
Comment on lines +56 to +59
Copy link

@coderabbitai coderabbitai bot Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add validation commands for environment checks.

Consider adding commands to help users verify each requirement:

  • MySQL connection test command
  • Redis connection test command
  • Database existence check command

Example commands to add:

# MySQL connection test
mysql -u your_user -p -e "SELECT 1;"

# Redis connection test
redis-cli ping

# Database check
mysql -u your_user -p -e "SHOW DATABASES;"


完成上述检查后，您可以在 `tiny-pro/nestJs` 下执行以下命令，启动后端服务：

```bash
npm i && npm start
```
* Spring Cloud
* 直接使用IDEA一键启动所有服务（推荐）
* 使用 ```mvn``` 命令
```
// 进入对应目录下
mvn spring-boot:run
```
* 使用 ```java -jar ``` 命令
```
// 使用IDEA或者mvn进行打包
mvn clean package

// 进入对应 target 目录下
java -jar packagename.jar
```

### 构建部署
前端：Vue项目采用Vite工具构建，请参考[Vite 部署指南](https://cn.vitejs.dev/guide/static-deploy.html)、[Vite 生产环境指南](https://cn.vitejs.dev/guide/build.html)
后端：
* EggJS项目请参考[Egg构建部署指南](https://www.eggjs.org/zh-CN/core/deployment)
* Spring Cloud请参考[CSE部署微服务应用](https://support.huaweicloud.com/intl/zh-cn/devg-cse/cse_devg_0016.html)

## 前端启动

在 `tiny-pro/web` 下依次执行以下命令：

- 安装依赖：`npm i`
- 启动 Mock 服务：`npm run mock`
- 启动前端项目：`npm start`
Comment on lines +67 to +73
Copy link

@coderabbitai coderabbitai bot Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add startup verification details.

Consider enhancing the frontend setup instructions with:

  • Expected URLs for accessing the application
  • Default ports used by the services
  • Steps to verify successful startup
  • Troubleshooting common startup issues


更详细的文档请参考 TinyPro 官网：[https://opentiny.design/vue-pro](https://opentiny.design/vue-pro)

## 维护者

添加官方小助手微信：opentiny-official，加入我们的技术交流群
添加官方小助手微信：opentiny-official，加入我们的技术交流群。
22 changes: 19 additions & 3 deletions packages/toolkits/pro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@opentiny/tiny-toolkit-pro",
"version": "1.1.0",
"description": "TinyPro 开箱即用的中后台前端/设计解决方案",
"version": "1.1.1",
"description": "TinyPro Vue：开箱即用、前后端分离的 Vue 后台管理模板",
Comment on lines +3 to +4
Copy link

@coderabbitai coderabbitai bot Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Add English translation and update CHANGELOG.md

  1. The description should be bilingual to maintain consistency with the template package. Consider using:

    "description": "TinyPro Vue: Out-of-the-box Vue admin template with frontend-backend separation | TinyPro Vue：开箱即用、前后端分离的 Vue 后台管理模板"

  2. The CHANGELOG.md is outdated and missing entries for versions 1.1.0 and 1.1.1. Please update it with:

    • Changes introduced in version 1.1.0
    • Current changes in version 1.1.1 (description update, etc.)
    • Consider adding English translations for changelog entries
🔗 Analysis chain

Consider adding English translation and updating changelog

  1. The description is currently only in Chinese. Consider adding an English translation or making it bilingual to improve international accessibility.
  2. There's no changelog entry for version 1.1.1. Please add one to maintain consistent version history.

Consider adding English translation alongside Chinese description

The codebase shows a mix of Chinese-only and bilingual descriptions across different packages. For consistency with the template package (packages/toolkits/pro/template/tinyvue/package.json) which uses English ("Tiny Pro for Vue"), consider adding an English translation alongside the Chinese description.

Example format:

"description": "TinyPro Vue: Out-of-the-box Vue admin template with frontend-backend separation | TinyPro Vue：开箱即用、前后端分离的 Vue 后台管理模板"
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if there are any other language-specific descriptions in the codebase
rg "description.*[^a-zA-Z]" --type json

Length of output: 3515

Script:

# Let's verify if there's a CHANGELOG.md file
fd -t f "CHANGELOG.md"

Length of output: 35

Script:

# Let's check the content of CHANGELOG.md to verify if version 1.1.1 is documented
cat CHANGELOG.md

Length of output: 115

"main": "dist/index.js",
"typings": "dist/index.d.ts",
"license": "MIT",
Expand All @@ -11,10 +11,26 @@
"chName": "TinyPro 开箱即用的中后台前端/设计解决方案"
},
"keywords": [
"front-end",
"vue",
"dashboard",
"admin",
"vue-admin",
"admin-template",
"management-system",
"opentiny",
"tiny-vue",
"tiny",
"tiny-toolkit"
"tiny-toolkit",
"@opentiny/tiny-toolkit-pro",
"nestjs",
"webpack",
"vite",
"rspack",
"farm"
],
"repository": "https://github.com/opentiny/tiny-cli",
"homepage": "https://opentiny.design/pro/",
"scripts": {
"describe": "npm-scripts-info",
"build": "run-s build:*",
Expand Down