笔记二、基于Labview的BS系统web的项目示例

目标:
1、建立浏览器端的HTML
2、通过浏览器和后端完成数据交互
通过浏览器向后端写入数据(这里演示用POST方式)
通过浏览器向后端请求数据,(这里演示用GET方式)并显示在浏览器上

步骤如下:
1、把笔记一的工程名称更改为test2
2、新建一个文件夹命名为Public(名称随意)
在该文件夹下新建一个HTML文件,命名为index.html(名称随意)内容如下:
在这里插入图片描述
在这里插入图片描述

因为使用到jquery,在该文件夹下新建一个名称为js的文件夹,将jquery-1.11.0.min.js放在该文件夹下面
在这里插入图片描述
将建好的Public目录加入工程:
右键单击web服务:web-test——选择:添加公共内容文件夹…
在这里插入图片描述
弹出框选择刚才建好的Public文件夹,单击按钮:选择文件夹
在这里插入图片描述
添加好的目录结构如下
在这里插入图片描述
通过浏览器向后端写入数据的实现,使用上次项目的test.vi,为了便于区分,将test.vi重新命名为testw.vi,并更改为Post方式
通过浏览器向后端请求数据对应的VI服务,增加一个testr.vi文件,方式为GET
目录结构如下:
在这里插入图片描述
文件testw.vi的内容不变
打开文件testr.vi
在前面板新建三个字符串显示控件,并按照上一笔记方法,将三个控件Public化,对外输出连接,如下图:
在这里插入图片描述
将三个控件的返回数据进行赋值,并按照上一笔记对数据进行固化(否则返回的全是空字符串),如下图:
在这里插入图片描述
目前所有的开发工作已经完成,启动项目调试(方法和上一笔记相同)
查看一下index.html的URL地址:
复制URL网址,打开浏览器,将URL粘贴到导航,回车访问
在这里插入图片描述
访问结果如下:
在这里插入图片描述
测试通过浏览器向后端写入数据(用POST方式)
浏览器前端写入数据和接收的返回数据如下
在这里插入图片描述
测试通过浏览器向后端写入数据(用POST方式)
后端接收数据如下:
测试结果:达到预期目标
在这里插入图片描述
测试通过浏览器向后端请求数据,(这里演示用GET方式)并显示在浏览器上
后端返回的数据如下:
在这里插入图片描述
测试通过浏览器向后端请求数据,(这里演示用GET方式)并显示在浏览器上
前端接收的数据并显示在浏览器如下:
测试结果:达到预期目标
在这里插入图片描述

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值