美文网首页
后台调用exe,前端定时轮询调用结果

后台调用exe,前端定时轮询调用结果

作者: GongZH丶 | 来源:发表于2018-08-10 17:51 被阅读151次

    前提

    • 使用asp.net core 2.1
    • 前端使用vue
    • ui使用element-ui
    • 前端发送请求用Axios

    新建asp.net core程序

    1.jpg

    修改Index.html

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>test</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    </head>
    <body>
        <div id="app">
    
            <p>{{ msg }}</p>
    
            <el-button type="success" v-on:click ="opennotepad">发送请求打开记事本</el-button>
    
        </div>
    
        <script>
            // 创建 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() { 
                    
                }
            });
        </script>
    
    </body>
    </html>
    

    修改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);
                }
    

    执行逻辑后可以清除定时器。

    <el-button type="primary" v-on:click="clearInterval">清除定时器</el-button>
    
    

    在methods中清除定时器

    
                    clearInterval() {
                        clearInterval(this.interval);
                    }
    
    效果: 1.jpg

    相关文章

      网友评论

          本文标题:后台调用exe,前端定时轮询调用结果

          本文链接:https://www.haomeiwen.com/subject/yofkbftx.html