lecen：一个更好的开源可视化系统搭建项目--介绍、搭建、访问与基本配置--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
介绍
这是一套全新的以组件插槽为构建基础、请求链接为接口调用、执行寄连为处理逻辑的可视化配置系统，除了可以可视化搭建系统页面，还可以可视化配置mock数据，
所有的页面相关数据都支持版本控制的管理，灵活的权限控制和模块配置等都为研发人员提供了极大的便利性，提高了生产施工的效率。
设计考虑
-
考虑到频繁发布导致频繁部署，我们需要做一个相关代码的持久化，以便在线上能实时修改。
-
考虑到需求多变，而大多都只是变化文字、位置、样式和一些简单的逻辑等内容，我们需要快速的交付，以便降低维护成本。
-
考虑到不同页面的复用程度、相似度，或许只是接口不同，我们需要快速的生成页面，降低开发成本。
-
考虑到不同页面之间组件的复用和同一个页面之间组件的复用，我们可以把组件封装好，改为对它的引用，以达到组件最高复用的目的。
-
考虑到同一个组件在不同的地方可能需要不同的呈现形式，我们可以把属性、方法、事件等动态传递给组件。
-
考虑到线上问题处理的及时性，以及避免漏改、反复等情况，我们需要更友好的排查方式。
基于以上甚至更多其他的原因，为此设计了本套系统。
新系统建立
如果是第一次访问用户系统页面会出现如下信息:
这是因为搭建的系统除了页面之外其他的所有的点也都是可以配置的，需要给系统做一个初始化配置，然后就可以访问登录页了
新系统的建立一般只需简单的几步配置
上手
概述
项目由lecen-web和lecen-server两个子项目构成。
lecen-web是前端页面，可以运行系统以及设计生成页面。
lecen-server是后端服务，提供了数据持久化以及针对该前端系统核心功能的支持，与业务无关
前端系统主要由在线编写代码与可视化操作两种方式来构建。
本章节主要介绍项目的主要结构，以及对应的模块说明。
如需了解如何通过可视化操作来设计页面，请参考页面配置中的页面设计。
目录结构
/single-pass-lecen
├─ lecen-server
├─ public
├─ lcupload // 系统资源
├─ pageRecord // 持久化数据版本管理
├─ temp // 临时文件
└─ tool // 工具文件
├─ src
├─ auth // 用户认证
├─ camunda
├─ deployment // 流程部署
└─ tenant // 租户管理
├─ common
├─ decorator // 全局装饰器
├─ interceptor // 全局拦截器
├─ config.ts // 服务配置
└─ field.entity.ts // 公共实体字段
├─ File // 文件管理
├─ git // 持久化数据版本控制
├─ PageComposition
├─ css // 样式管理
├─ form // 表单管理
├─ parasiticBond // 执行寄连管理
├─ request // 请求链接管理
└─ view // 数据视图
├─ schema // 管理mongoose数据结构
├─ systemConfig
├─ basic // 基本信息配置
├─ dataSource // 数据源管理
├─ dictionary // 字典管理
├─ file // 文件配置管理
├─ identity // 身份管理
├─ mock // 数据模拟管理
├─ module // 模块管理
├─ organization // 组织结构管理
└─ router // 路由菜单管理
├─ systemTool
└─ puppeteer // 屏幕截图
├─ user // 用户模块
├─ util // 项目中的常用工具等
├─ app.module.ts // 接口、服务、实体等的模块注册，数据库连接等
└─ main.ts // 项目入口，配置公共资源路径、跨域等
└─ package.json // 项目管理文件
└─ lecen-web
├─ lib
└─ ckeditor5 // 富文本编辑器
├─ src
├─ _Global
├─ plugin // 构建插件
└─ types // ts声明
├─ common
├─ assembly
├─ assembly // 复制组件
├─ assembly // 编辑器组件
├─ list // 列表组件
└─ tagsInput // 输入组件
├─ css
├─ index.scss // 样式初始化
├─ preset.scss // 预置样式
├─ root.scss // 跟样式变量
├─ unit.scss // 单元样式
└─ variable.scss // 样式变量
├─ images
└─ design // 设计器图片
├─ js
├─ instance
├─ base.ts // 基础对象
├─ global.ts // 全局对象
├─ parasiticBond.ts // 寄连对象
└─ request.ts // 请求对象
├─ method
└─ message.ts // 消息方法
├─ compute.ts // 值计算
├─ control.ts // 控制计算
├─ index.ts // 通用方法
├─ page.ts // 页面操作
├─ permission.ts // 权限控制
├─ service.ts // 提供的服务
├─ shortCut.ts // 快捷方式
├─ style.ts // 样式控制
└─ uses.ts // 组合式防范
└─ svg
└─ xicons // svg图标
├─ company // 公司配置
├─ components // 所有封装的组件
├─ config // 项目配置
├─ registers
├─ component.ts // 注册组件
├─ directive.ts // 注册指令
├─ element-plus-icon.ts // 注册图标
├─ init.ts // 注册初始化内容
└─ prototype.ts // 注册原型
├─ request // 请求
├─ router // 路由
├─ stores // 本地存储
├─ surface // 界面
├─ utils // 项目中的常用工具等
├─ views
├─ camunda // 流程管理
├─ entry // 入口
├─ container // 渲染组件，核心组件
├─ organizationManagement // 组织管理，包括人员和身份
├─ pageConfig // 系统页面管理，设计核心
├─ systemConfig // 系统配置管理，核心支持
├─ systemResource // 系统资源管理
├─ systemTool // 系统工具管理
├─ toolDown // 工具下载
└─ utilities.ts // 公用工具管理
├─ App // 根挂载组件
└─ main.ts // 主入口文件
├─ package.json // 项目管理文件
└─ vite.config.ts // vite配置本地环境的搭建与启动
访问项目github地址：
https://github.com/lnsstyp/lecen-web
https://github.com/lnsstyp/lecen-server
也可以访问gitee的地址
https://gitee.com/zhclovexx/lecen-web
https://gitee.com/zhclovexx/lecen-server
克隆项目到本地，分别进入lecen-web与lecen-server文件夹中
执行 npm install
依赖安装完成之后，在lecen-web中
找到src/config/index.ts
修改其中的配置项，可以根据自己的需求来设置
javascript
// 设置项目的访问路径
const path = '/web'
// 设置项目的后端访问地址
const server = ''
// 设置项目的后端访问端口
const port = ''
// 可以设置发布的版本号
const version = '0.1'
export default {
path,
server,
port,
version,
}执行npm run admin
启动项目的管理端
执行npm run user
启动项目的用户端
在lecen-server中
找到src/common/config.ts
修改其中的配置项，可以根据自己的需求来设置
javascript
// 设置运行的环境
const environment = "localhost"
// 设置使用的数据库
const database = 'mysql'
// 设置git管理的文件存放路径
const gitFolder = ''
// 设置camunda的访问地址
const camundaUrl = ''
// 连接mysql的所有环境配置
const mysql = ({
"localhost": {
host: 'localhost',
port: 3306,
username: 'root',
password: '',
database: ''
}
})[environment]
// 连接oracle的所有环境配置
const oracle = ({
"localhost": {
host: 'localhost',
port: 1521,
username: 'root',
password: '',
database: '',
sid: 'ORCL'
}
})[environment]
// 连接redis的所有环境配置
const redis = ({
"localhost": {
port: 6379,
host: 'localhost',
password: '',
db: 1
}
})[environment]
// 连接mongoose的所有环境配置
const mongoose = ({
"localhost": {
port: 27017,
host: '127.0.0.1',
}
})[environment];
// 启动的端口号
const port = ({
"localhost": 9101
})[environment];
export default {
port,
mysql,
oracle,
database,
redis,
mongoose,
gitFolder,
camundaUrl
}执行npm run start
启动项目的后端服务
如果执行npm run start:dev
那么将启动监听模式，文件的修改会实时重新编译
访问系统
访问地址 http://localhost:5173/
出现管理端登录界面
使用默认的用户名密码进行登录： lecen/lecen
登录进系统之后，我们可以先配置用户端的访问地址，先找到基本信息配置的入口：
可以通过入口中的基本信息配置卡片跳转，也可以点击 系统配置 下的 基本信息配置 菜单
未配置时将显示空白，具体配置可 参见
基本信息配置
如果需要新增加一个用户端的访问地址，则在【系统配置】->【基本信息配置】的页面中点击【添加系统】
输入系统名称并 回车， 然后出现系统信息配置页面。
比如输入本地测试环境
系统名称 为用户系统的别名或者标识，系统全称 为页面 title 上显示的当前用户实际系统的名称，系统地址为新生成的 项目地址，生成后可直接通过该地址访问。
配置好系统地址之后，回到我们刚才的用户端，点击配置完成，进入系统
就会进入到实际的系统，只不过目前的用户还没有登录，跳转到了登录页
除了系统名称和地址之外，还有一些其他的基本信息配置项
点击图中的 【创建】弹出代码编辑器可以编辑如下配置信息。
注：主要配置 service 部分，也就是系统使用的 服务地址 ，其中的 lc 为基础服务地址配置
js
{
// 页面的刷新机制，属性名固定为menu
// 为close表示只有页面关闭之后再打开才重新加载
// 为always表示只要切换到该页面都重新加载
"menu": "close",
// 系统访问的内部或者外部服务地址
// 属性名固定为address，不包含接口路径
// 可以是域名或ip和端口，也可以加上服务分发的路径
"service": {
// 属性名为服务地址的别名，值为具体的地址
"a": "http://123.123.12.3:1001/",
"b": "http://123.123.12.3:1001/file/",
// 系统默认自带的服务器地址，可以自定义配置
// 如果不配置，将会使用`src/config/index.ts`中设置的server和port的地址
// 如果配置为其他地址，那么将覆盖系统配置的地址
"lc": "http://localhost:9101/"
}
}上面提到的登录页，也是通过页面设计器实现的，初始化系统将默认带一个登录页的页面
如果需要自定义设计可以通过页面设计器重新制作
想要了解更多设计的内容可以访问 页面设计
【项目体验】
系统管理端地址 ：http://www.lecen.top/manage