创建前端页面

约束与限制

用户可创建的前端页面数量受限于“基础版 数据建模引擎 用户”规格，具体支持数量根据用户数所处的阶梯而有所不同，详细信息请参考产品规格。

新增页面

1. 进入前端项目页面设计器。

   如果项目下暂无页面，进入“页面设计器”时，会弹出相关提示框，单击“确定”，关闭窗口。

2. 在左侧插件栏中，单击，展开“页面”插件面板。
   图1 页面插件面板
   

3. 在“页面”插件面板中，单击，展开“页面设置”页面。
4. 在展开的“页面设置”页面中，设置如下信息，单击“保存”。
   图2 页面设置
   

   表1 页面设置参数信息

   类型	参数名称	参数说明
   基本设置	页面名称	自定义页面名称，默认值为“Untitled”。 仅允许包含英文字母，且需为首字母大写的驼峰格式（如DemoPage）。 长度限制为3-25个字符。
   	父文件夹	为当前页面关联所属的父文件夹，用于页面归类管理。 如果当前没有可用的文件夹，需先完成文件夹创建，具体操作请参见创建与管理文件夹。
   	访问路由	配置页面的访问路由地址，路由默认以“website.com”开头。 仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。
   	页面模板	同一租户下的所有页面模板均可共享使用。 单击“选择模板”，在展开的“选择模板”页面选择目标模板，单击“保存”。系统会自动将所选页面模板的内容填充至当前创建页面。
   输入输出	输入配置	配置传递给当前页面的参数（类似组件的输入属性），需要按照JSON格式编写。
   	输出配置	配置当前页面向外传递的事件（类似组件触发的输出事件），需要按照JSON格式编写。
   	设为根元素为Body	勾选该选项，将页面根元素设置为Body，不勾选页面根元素为div。
   页面生命周期配置	添加页面生命周期	基于Vue 3技术栈，支持为页面配置生命周期函数（如onMounted、onUpdated等）以及组合式API（如watch、computed、watchEffect等），用于实现页面级数据初始化、状态监听、计算属性定义等高级交互逻辑。 配置时，存在以下使用限制： 不支持直接使用“Function()”构造函数或“ref/reactive”等响应式API。 逻辑需以命名函数形式编写，并通过“this”调用已定义的方法。 操作步骤： 将鼠标悬停至“添加页面生命周期”上方，从下拉列表中单击需要配置的生命周期函数（如“onMounted”）。 在打开的“添加页面生命周期”代码编辑页面中，编写具体的实现逻辑，单击“保存”。 示例：在页面挂载时初始化数据 function onMounted() { this.init() }