html5 轮询自动刷新数据,后台调用exe，前端定时轮询调用结果
前提
使用asp.net core 2.1
前端使用vue
ui使用element-ui
前端發送請求用Axios
新建asp.net core程序
1.jpg
修改Index.html
@{
Layout = null;
}
test{{ msg }}
發送請求打開記事本
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '準備發送請求打開exe'
},
methods: {
opennotepad() {
var _this = this;
axios.get('/Home/OpenNotepad') // 發送請求到后端控制器
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
},
mounted() {
}
});
修改HomeController.cs
使用 System.Diagnostics 這個庫
詳細介紹：
.Net中Process類功能十分強大。它可以接受程序路徑啟動程序，接受文件路徑使用默認程序打開文件，接受超鏈接自動使用默認瀏覽器打開鏈接，或者打開指定文件夾等等功能
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
namespace CalculationTest.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public void OpenNotepad()
{
//打開外部程序
ProcessStartInfo state = new ProcessStartInfo(); //啟動信息
state.FileName = "notepad.exe"; ; //設置需要啟動的應用程序
Process.Start(state); //啟動應用程序
}
}
}
效果
2.jpg
打開外部程序并傳入參數
先創建一個.net core 2.1 控制臺應用程序
using System;
namespace CaculateConsole
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hello World!");
if (args != null)
{
int argsLength = args.Length;
Console.WriteLine("Main函數參數args的長度：" + argsLength);
for (int i = 0; i < argsLength; i++)
{
Console.Write("第" + (i + 1) + "個參數是：");
Console.WriteLine(args[i]);
}
}
Console.WriteLine("Hello World!");
Console.ReadLine();
}
}
}
修改 Index
3.jpg
修改 HomeController.cs
4.jpg
效果
5.jpg
缺點
目前，asp.net core 調用外部程序無法打開程序窗口 ， 只能以后臺進程的方式啟動。
原因 ：可能與 .net core 的設計有關， .net core 程序以類似Windows 服務的方式運行(也可能就是服務)，服務無法啟動程序窗體，只能以后臺方式啟動進程。
前端定時輪詢調用結果
后臺調用的exe 計算程序 可以往數據庫寫入一個 標記 ，表示已經 計算完成 ，前端設一個定時器 ，隔一定時間查詢數據庫是否有 計算完成的標記 ， 如果有 就計算完畢 ，結束定時器。
定時器：
javascript中的循環定時器 ： timename=setInterval(function(){},delaytime);
第一個參數“function()”是定時器觸發時要執行的動作 ，
而第二個參數“delaytime”則是間隔的時間，以毫秒為單位，填寫“5000”，就表示5秒鐘。
clearInterval() 清除已設置的setInterval定時器，如：clearInterval(timename);
如：
在data中初始化一個定時器對象
data: {
interval: {}
},
結合vue生命周期鉤子函數，在組件掛載到頁面的時候，開啟定時器。
mounted() {
this.interval = setInterval(function () {
//要執行的代碼
console.log("執行一次");
}, 3000);
}
執行邏輯后可以清除定時器。
清除定時器
在methods中清除定時器
clearInterval() {
clearInterval(this.interval);
}
效果：
1.jpg
總結
以上是生活随笔為你收集整理的html5 轮询自动刷新数据,后台调用exe，前端定时轮询调用结果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5 tab菜单切换页面,11个常
- 下一篇： 优化-浏览器缓存和压缩优化