快速上手

# FastWeb快速上手

适用平台： Web(桌面)，App(移动端)

该文档旨在让用户能够实现从获取安装包后从安装至开发环境的搭建测试的初步流程操作。在使用本产品前，你需要知道什么是FastWeb，以及它的运行原理。

# 1. FastWeb简介

FastWeb是由爱招飞推出的一款整合WEB与APP功能的低代码开发平台，其应用与服务通过网页的方式提供，您可以在FastWeb提供的开发平台中进行简单的设计，只需几行代码就可以实现一个表单功能。同时可以在线上编写业务逻辑，实现无感知的实时升级。系统提供完整的用户以及权限管理功能，无需再自行开发相关功能，使开发人员或者实施维护人员能在开发过程中更专注于业务本身。自带翻译功能可以更方便地为模板提供多语言支持。

# 2. FastWeb运行方式

FastWeb以程序的方式运行，所有的设置以及开发均在浏览器上进行，通过访问指定的端口就可以进行相关设置。FastWeb使用的所有用户数据以及模板数据均存储在数据库中，模板设计以及进行系统设置时保存的内容会进入数据库中，在系统用户调用模板时实时加载，以全动态的方式显示。

# 3. 运行及登录

# 3.1. 运行程序

按照FastWeb安装配置中的方式安装完成后，双击运行桌面上的FastWeb快捷方式以打开程序，该程序在启动后会显示在屏幕右下角的托盘处。

如果是首次启动，通常会弹出如下图所示的警报提示，此处需勾选专用网络以及公用网络，然后单击[允许访问(A)]

# 3.2. 产品注册

FastWeb安装完成时的产品类型为运行版，运行版状态下不能登录，在产品注册后才会启用。

在FastWeb的安装目录下找到并双击ConfigTool.exe。打开配置中心界面。

在配置中心界面中，点击 关于，打开软件注册界面。

在产品注册页面，将本机机器码复制至剪切板中。与爱招飞产品网站或实施服务商取得联系获取注册密钥。获取注册密钥时请提供注册单位信息以及注册邮箱，机器码等信息，注册密钥将在后续通过邮箱发送。

获取到注册密钥后，将注册密钥填写至对应栏位，点击 [注册] 按钮，授权信息中会显示注册单位信息，点击 [确定] 按钮关闭注册界面，完成注册。

# 3.3. 登录

使用本机浏览器打开网址http://localhost:8888/?logintype=1 (opens new window)，访问FastWeb登录界面。该界面下是以开发用户的模式进行访问，默认的登录用户为admin，登录密码为123456。填写完成后，单击[登录]按钮进入开发模式下的用户界面。

注意

FastWeb在未注册企业版或云端版的状态下，无法登录至用户界面。

登录后的界面如上图所示，界面左侧为菜单导航栏，右侧为模块显示栏位，用于显示左侧菜单导航栏绑定的模块。

# 4. 第一个WEB程序(HelloWorld)

接下来，我们将在FastWeb上实现PC网页端的HelloWorld。

# 4.1. 添加模块

# 4.1.1. 展开系统工具菜单

点击菜单导航栏中的[系统工具]右侧的小箭头展开其中的菜单栏，其中的菜单项目如下图所示。

# 4.1.2. 进入模块列表

单击展开菜单栏中的[模块列表(Web)]项目，打开模块列表(Web)选项卡。该选项卡中列出了系统中包含的Web模块列表。可在该界面下对模块进行管理。

# 4.1.3. 添加模块

点击模块左上角的[添加]按钮，打开添加模块的界面，在该界面下填写组别、标题、开发用户等信息。此处修改组别为实例，编号与标题均命名为HelloWorld，选择开发用户为admin。

填写完成后的样例如下图所示，填写完成后点击[保存]以完成添加模块的操作。

# 4.2. 模块设计

模块保存完成后，新增的模块会被自动选中，此时可点击上方的[模块设计]按钮进入到模块设计界面。

# 4.2.1. 拖放控件

拖放控件的操作如下：(1)点击标准选项卡中的第二个图标(TUgButton)，即选择该组件。(2)点击控件设计区域，将控件放置于下方设计区域的位置中。放置完成后显示效果图如下。

# 4.2.2. 修改属性

模块设计界面的左下角显示当前选中的控件的属性以及事件信息，现在需要对刚才拖放的按钮进行属性修改，比如将按钮上的字改为其他自定义的内容。操作方式如下。

(1)在控件设计区域单击该按钮以选中该控件，此时属性列表中显示的是按钮对应的属性内容。(2)通过鼠标滚轮滚动查找其中的属性，找到Caption，将其右侧的内容由原先的UgButton01修改为HelloWorld。

# 4.2.3. 添加事件

控件包含一些操作可用于触发相应的事件。接下来设置事件触发，操作方式如下。

(1)在控件设计区域单击该按钮以选中该控件。(2)左侧的属性列表上方单击[事件]选项卡，切换至事件列表，该列表中列出了该控件可用的事件。(3)在OnClick右侧的编辑框中双击以新增该事件。此时界面会由界面跳转至程序，并在程序编辑栏中显示编辑的程序信息，其中包含了UgButton01OnClick事件。

# 4.2.4. 填写程序

在procedure UgButton01OnClick(sender: tobject);中的begin和end区域填写程序，填写的内容如下：

  ShowMessage('HelloWorld');

填写完成的程序编辑区样式如下：

# 4.2.5. 保存调试

程序填写完成后，点击模块左上角的第二个按钮（下图所示①处），将该模板保存至数据库。等待该按钮变为灰色，保存完成。单击其左侧的按钮（下图所示②处）以开启调试运行。

调试运行的界面如下图所示，点击窗口中的[HelloWorld]按钮，弹出新的消息提示框并显示HelloWorld。

在该界面下，点击[确定]以关闭消息提示框。接着点击调试窗体右上角的X以关闭该窗口返回至设计界面。最后点击该模块设计界面的标签右上角的X以关闭模块设计。

# 4.3. 菜单设计

在确保[系统工具]菜单栏处于展开的情况下，单击其中的[菜单列表(Web)]，打开菜单列表界面。如果[系统工具]菜单栏处于收起状态，点击其右侧的小箭头以展开其中的菜单列表。菜单列表中以树形结构展示其中包含的菜单节点。

# 4.3.1. 新增菜单栏

点击菜单列表中的根，然后点击左上角的[添加]按钮，打开添加菜单对话框。

其中填写菜单名称为HelloWorld，选择其对应的调用模块为HelloWorld，选择调用模式为mtPage。填写完成的项目如下图所示，确认无误后，点击[保存]按钮以保存菜单栏的新增。

# 4.4. 设置用户权限

单击菜单栏中[系统工具]右侧的小箭头以收起该项目，点击下方的[系统管理]右侧的小箭头以展开其中的菜单栏，点击[角色设置]打开角色设置界面。

# 4.4.1. 选择角色

点击模块中的[前项]、[后项]按钮，将角色名称切换成系统管理员。如果角色名称在打开模块时默认为系统管理员则不需要点击任何按钮。

# 4.4.2. 修改权限

确认角色名称为系统管理员无误后，点击[修改]按钮，下方的表格进入编辑模式，可在权限中对菜单栏目进行勾选。被勾选的菜单项目会在系统用户模式下显示在左侧菜单栏中。

# 4.4.3. 勾选菜单

在WEB Root中查找到HelloWorld菜单，对其权限列中进行勾选，勾选时该表格会自动刷新以确认勾选其上级菜单。

# 4.4.4. 保存修改

点击上方右侧的[保存]按钮以保存权限的修改。此时会有提示框提示修改成功。

# 4.5. 设置用户

在确保[系统管理]菜单栏处于展开的情况下，单击其中的[用户设置]，打开用户设置界面。如果[系统管理]菜单栏处于收起状态，点击其右侧的小箭头以展开其中的菜单列表。菜单列表中以树形结构展示其中包含的菜单节点。

# 4.5.1. 新增用户

点击[新增]按钮，界面如下图所示。

# 4.5.2. 填写所属部门

单击所属部门编辑框，打开选择部门对话框，此处选择部门1，点击[确定]按钮返回界面。

# 4.5.3. 填写用户相关信息

填写用户名称与用户全称，设置密码类型。用户名称为登录时使用的用户名。用户全称为用户的别称，此处设置用户名称为test_user，用户全称为测试用户，用户密码为123。

其中的用户密码在输入时单击用户密码框会显示输入框，在其中输入密码，点击[确定]即可。

# 4.5.4. 勾选登录类型

单击允许登录类型编辑框，在弹出的请选择登录类型对话框中勾选User，点击[确定]。

# 4.5.5. 激活用户

单击 激活 选框，以启用用户登录功能。

# 4.5.6. 勾选角色

为test_user用户勾选角色，将其右侧的勾选处打勾。

# 4.5.7. 保存修改

确认完成后，点击上方的[保存]按钮。出现数据保存成功的对话框时，数据保存完成。

# 4.6. 测试登录

使用本机浏览器访问http://localhost:8888/ (opens new window)，进入到登录界面，在登录用户处输入test_user，登录密码处输入123，点击[登录]按钮，进入到演示界面。

点击左侧菜单导航的HelloWorld，打开模块。点击模块中的HelloWorld按钮，显示包含HelloWorld内容的消息框。至此WEB程序的快速上手已完成，关于FastWeb中的WEB相关内容可参考FastWeb功能介绍。

# 5. 第一个APP程序(HelloWorld)

接下来，我们将在FastWeb上实现APP网页端的HelloWorld。

# 5.1. 添加模块

# 5.1.1. 展开系统工具菜单

点击菜单导航栏中的[系统工具]右侧的小箭头展开其中的菜单栏，其中的菜单项目如下图所示。

# 5.1.2. 进入模块列表

单击展开菜单栏中的[模块列表(App)]项目，打开模块列表(App)选项卡。该选项卡中列出了系统中包含的App模块列表。可在该界面下对模块进行管理。

# 5.1.3. 添加模块

点击模块左上角的[添加]按钮，打开添加模块的界面，在该界面下填写组别、编号、标题、开发用户等信息。此处修改编号与标题为HelloWorld，选择开发用户为admin。

填写完成后的样例如下图所示，填写完成后点击[保存]以完成添加模块的操作。

# 5.2. 模块设计

模块保存完成后，新增的模块会被自动选中，此时可点击上方的[模块设计]按钮进入到模块设计界面。

# 5.2.1. 拖放控件

拖放控件的操作如下：(1)点击标准选项卡中的第三个图标(TUgAppButton)，即选择该组件进行放置。(2)点击控件设计区域，将控件放置于该点击区域的位置中。放置完成后显示效果图如下。

# 5.2.2. 修改属性

模块设计界面的左下角显示当前选中的控件的属性以及事件信息，现在需要对刚才拖放的按钮进行属性修改，比如将按钮上的字改为其他自定义的内容。

(1)在控件设计区域单击该按钮以选中该控件，此时属性列表中显示的是按钮对应的属性内容。(2)通过鼠标滚轮滚动查找其中的属性，找到Caption，将其右侧的内容修改为HelloWorld。

# 5.2.3. 添加事件

控件包含一些操作可用于触发相应的事件。

(1)在控件设计区域单击该按钮以选中该控件。(2)左侧的属性列表上方单击[事件]选项卡，切换至事件列表，该列表中列出了该控件可用的事件。(3)在OnClick右侧的编辑框中双击以新增该事件。此时界面会由界面跳转至程序，并在程序编辑栏中显示编辑的程序信息，其中包含了UgAppButton01OnClick事件。