Skip to main content

开发指南

网页窗体开发指南。

两种开发场景：

  • 生成代码构件工程中开发（适用于静态页面开发）

    • 主流工具链：导出web项目，并使用主流前端开发工具链进行开发。
    • 支持热部署：可避免每修改一次代码都要重新部署一次构件，提高开发效率。
    • Mock测试数据：模拟后端服务器接口数据。
    • 开发完成后需要打包再导入到业务构件。

  • 业务构件中开发（适用于前后端交互开发）

    • 在应用设计器中开发。
    • 可以配置窗体方法、服务端方法及进行事件绑定。
    • 无热部署功能，每次修改需要部署后才可以预览。
    • 资源管理

静态页面开发​

【案例下载】

1. 创建业务构件​

image-20220323092115749

2. 创建网页窗体​

image-20220323092746280

3. 创建实体并设置测试数据​

测试数据：对应导出后的mock测试数据，只在开发阶段有效。

实体数据：浏览器缓存数据，在产品阶段有效。可从测试数据同步，也可以从数据库获取数据到实体。

image-20220323104249116

4. 生成(导出)构件代码工程​

选中包含网页窗体的业务构件，单击鼠标右键选中生成构件代理工程，并配置输出路径及包含node_models依赖。

image-20220323094503623

生成成功提示：

image-20220323094906679

5. 构件工程目录结构​

找到导出构件工程，推荐使用vscode打开工程。

image-20220323095053609

工程目录结构介绍:

image-20220323102656376

6. 使用实体测试数据​

查看实体测试数据：

image-20220323104535762

数据实体定义(自动引用上一步配置的实体名称ENT_Student)：

image-20220323103414486

遍历实体数据：

image-20220323105205131

参考代码：

<template>
  <!-- 3.遍历实体 -->
  <ul>
    <li v-for="student in ENT_Student" :key="student.id">
      {{ student.studentNo }} | {{ student.name }}
    </li>
  </ul>
  
</template>
<script>
import vdk from "v3-vdk";
import entities from "./entities.js"; // 1.引入数据实体定义（默认自动）
export default {
  props: entities, // 2.props传入数据实体（默认自动）
  data: function () {
    return {};
  },
  methods: {},
};
</script>
<style scoped lang="less" src="./theme.less"></style>

7. 使用LESS样式（可选）​

样式可以以less的形式定义，具体写法可参考less官方文档：

var.less：存放定义的样式变量，后期支持换肤功能。

image-20220323112234382

theme.less：定义css样式，只作用于本窗体。可以使用var.less中声明的样式变量。

image-20220323112330357

在index.vue / Template 中使用样式：

image-20220323112457652

8. 启动与停止服务​

8.1 启动服务​

image-20220323112014442

第一次启动，需要安装项目依赖（只需安装一次）：

 npm i

打开vscode终端，在项目根路径下使用下面指令启动web服务:

 npm run v3:start
8.2 预览效果​

启动成功，则默认弹出系统默认浏览器并访问http://localhost:8081/，预览效果:

image-20220323113026152

8.3 停止服务​

在终端界面，使用Ctrl + C停止服务：

image-20220323150332886

9. 打包构件代码工程​

停止服务后，在项目根路径下使用下面指令打包代码工程:

npm run v3:package

image-20220323150640788

打包完成后，打包好的项目在当前项目的dist目录下：

image-20220323151040600

10. 导入构件代码工程​

选中项目根目录下的构件编码.vdevproj文件进行导入：

image-20220323151518802

导入完成：

image-20220323151632019

构件代码工程中的组件单文件 会自动覆盖到当前构件中的网页窗体：

image-20220323151840558

11. 关于实体数据与测试数据​

导入完成后，网页窗体的实体【测试数据】将不再生效，这时有两种方式：

  • 静态页面：使用【同步到实体数据】，把测试数据同步过来。

    image-20220324151437518

  • 前后端交互：编写 窗体加载方法，从数据库获取数据到实体。

前后端交互开发​

【案例下载】

1. 实体的使用​

在template模板中插入实体以及实体字段：

image-20220324170800503

在script中插入实体以及实体字段：

image-20220324170949708

2. 事件绑定​

网页窗体的事件绑定是通过事件编码绑定处理方法的，通过this.$emit('事件编码')来触发处理方法的执行。

image-20220324171441364

3. 处理方法传参​

例如：按页面大小来加载数据的处理方法，执行时需要传入页面大小的参数值。

script代码：

image-20220324172225743

参数映射配置：

image-20220324172104254

4. 资源引用​

info

资源引用有下面三种方式：

  • v-res:src 构件资源
  • v-url:src 指定url资源
  • v-id2url:src 后台上传资源
4.1 构件资源​

概述

资源编码来至于开发系统的资源（可用插入资源来添加），同时必须要用单引号括起来。

image-20220325111955046

用法

当前构件：v-res:src="'资源编码.png'" 或者 v-res:src="实体.current.字段"
跨构件： v-res:src="'构件编码.Fileno_1.png'"

示例

<img v-res:src="'Fileno_1.png'"/>
<img v-res:src="'构件编码.Fileno_1.png'"/>
4.2 指定url资源​

概述

非实体的固定的url必须要用单引号括起来。

用法

v-url:src="'url地址'" 或者 v-url:src="实体.current.字段"

示例

<img v-url:src="'http://v3.com/d.png'"/>
<img v-url:src="a.current.b"/>
4.3 后台上传资源​

概述

资源id 是来自v 后台上传的资源id; 固定的必须用单引号括起来。

用法

v-id2url:src="'资源id'" 或者 v-id2url:src="实体.current.字段"

示例

<img v-id2url:src="'fe3aadd104f34abfb4397ae0c29827d0'"/>
<img v-id2url:src="a.current.b"/>