在winform CefSharp中使用Vue頁面支援開發個人助手

在winform中使用Vue頁面支援，自動化部署，開發個人助手

• 效果圖
• 具體代碼下載下傳源碼檢視
• • 1.下載下傳碼雲上的代碼架構[個人助手 傳送門](https://gitee.com/jpw_code/cef-sharp-file-manager)
• 使用架構
• • 1.下載下傳碼雲上的代碼架構[傳送門](https://gitee.com/jpw_code/cef-sharp-vue)
  • 2.架構注意事項
  • • 2.1使用準備
    • 2.2 從頁面調用後端方法
    • 2.４ 從頁面控制窗體
    • 2.5 雙工通訊的使用
    • 2.6 注冊鍵盤跟換焦點
    • 2.7 其他内容檢視源代碼[傳送門](https://gitee.com/jpw_code/cef-sharp-vue)

• • 本項目已托管至碼雲，可下載下傳進行檢視具體代碼。 個人助手
• • 代碼會經常更新，下載下傳碼雲代碼檢視最新程式

效果圖

具體代碼下載下傳源碼檢視

1.下載下傳碼雲上的代碼架構個人助手 傳送門

使用架構

1.下載下傳碼雲上的代碼架構傳送門

2.架構注意事項

2.1使用準備

• 下載下傳項目

  https://gitee.com/jpw_code/cef-sharp-vue

• 找到目錄

  CefSharpVue/ui/vue

  目錄，使用cmd指令執行

  npm install

  初始化vue依賴
• 繼續在

  CefSharpVue/ui/vue

  目錄執行指令（使用cmd指令執行）

  npm run dev

• 打開visual studio 2019 啟動項目即可檢視結果

2.2 從頁面調用後端方法

• 在vue項目（

  CefSharpVue/ui/vue

  目錄）中找到

  api-method.js

  添加如下方法

const api = {
  //用于控制窗體 最大，最小化，關閉和擷取視窗狀态
  windowHander:apiReq.windowHander,

  //建立login函數，函數使用post方式，送出參數，并擷取背景傳回結果
  login: function(data) {
    //這裡設定的第三個參數為 請求類型，目的是為了 無縫切換使用http請求模式
    return request('/login/login', data, 'POST');
  },
}
           

• 在winform項目（

  CefSharpVue/

  目錄）中找到

  CefSharpVue/Project/Controllers

  目錄，建立

  TestController.cs

  添加如下方法

using System.Collections.Generic;
using CefSharpVue.Core.Attributes;
using CefSharpVue.Core.Utils.Response;
using CefSharpVue.Project.Entitys;
using CefSharpVue.Services;

namespace CefSharpVue.Project.Controllers
{
   [Controller]
   [RequestMapping("/login")]
   public class TestController
   {
   
        /// <summary>
        /// 測試指定參數指派
        /// </summary>
        /// <returns></returns>
        [RequestMapping("/login", MethodType.POST)]
        public BaseResponse GetLogin(string phone, string password)
        {
            if (phone == "18888888888" && password == "1234567890")
            {
                Dictionary<string, string> useInfo = new Dictionary<string, string>{{"phone","18888888888"},{"nickName","超級管理者"},{"sex","1"}};
                return new BaseResponse("登入成功！", useInfo);
            }
            return new BaseResponse(StatusCode.Fail, "使用者名或密碼錯誤！",new object[] { phone,password });
        }
	}   
}
           

• 在vue頁面中調用

this.$api.login({phone: '18888888888', password: '123456' }).then(res => {
     console.log("擷取到結果：",res);
  });
           

• 以上内容就完成了一個簡單的業務請求，支援參數自動注入

2.４ 從頁面控制窗體

• 窗體拖拽，為頁面元素添加樣式

  dom-drag

  或者添加style樣式

  -webkit-app-region: drag;

• 窗體

  不

  拖拽，為頁面元素添加樣式

  dom-no-drag

  或者添加style樣式

  -webkit-app-region: no-drag;

• 窗體最大、最小、關閉、還原、擷取狀态等調用
• • 在vue項目（

    CefSharpVue/ui/vue

    目錄）中找到

    api-method.js

    在對象

    api

    中添加如下代碼

//用于控制窗體 最大，最小化，關閉和擷取視窗狀态(注意上下文之間保留逗号,)
  windowHander:apiReq.windowHander,
           

• • 使用如下方法進行操作,他們的傳回值都是

    Promise

    對象
• • • 擷取窗體狀态：

      this.$api.windowHander("getWindowState")

      或

      window.extend.getWindowState()

      ;
• • • 最小化：

      this.$api.windowHander("minimized")

      或

      window.extend.minimized()

      ;
• • • 還原：

      this.$api.windowHander("normal")

      或

      window.extend.normal()

      ;
• • • 最大化：

      this.$api.windowHander("maximized")

      或

      window.extend.maximized()

      ;
• • • 關閉：

      this.$api.windowHander("close")

      或

      window.extend.close()

      ;

2.5 雙工通訊的使用

• 在vue頁面中使用

/**
節點代碼
*/
 export default {
    data() {
    	return {
			socket:null,
		}
    },
    //...
    methods: {
    	//發送消息
    	sendMsg(msg){
    		this.socket.send(msg);
		},
		getMsg(evt){
			console.log("擷取到消息",evt);
		},
		//...
	},
	created(){
		this.socket=window.socket;
		this.socket.connection("ws://socket");
		this.socket.open = () => {
        	//socket連接配接成功，觸發事件
			alert("連結雙工通信成功！")
        }
		
       //socket連接配接成功，擷取後端發送的消息
		this.socket.message = (evt) => {
			this.getMsg(evt);
			alert("接收到後端發過來的消息！" + JSON.stringify(evt));
		}
	}
 }
           

• 在winform項目（

  CefSharpVue/

  目錄）中找到

  CefSharpVue/Project/Controllers

  目錄，建立`SocketController.cs添加如下方法

using System;
using CefSharpVue.Core.Attributes;

namespace CefSharpVue.Project.Controllers
{
    [Controller]
    [RequestMapping("/socket")]
    [CSharpSocket(url ="socket")]
    public class SocketController
    {

        private static string url;
        /// <summary>
        /// 建立連接配接
        /// </summary>
        /// <param name="obj"></param>
        [Open]
        public static void Open(string _url)
        {
            url = _url;
        }


        /// <summary>
        /// 接受消息
        /// </summary>
        /// <param name="obj"></param>
        [Message]
        public static void Mesage(object obj)
        {
            //處理消息
            Console.WriteLine("socket處理消息");
        }


        /// <summary>
        /// 發送消息
        /// </summary>
        /// <param name="obj"></param>
        [Send]
        public static void Send(object obj)
        {
            VueStart.socket.WsSend(url, obj);

            Console.WriteLine("socket發送消息");
        }


        /// <summary>
        /// 主動關閉消息時，觸發前端通知，
        /// </summary>
        /// <param name="obj"></param>
        [Close]
        public static void Close(object obj)
        {
            //關閉
            Console.WriteLine("socket關閉");
        }


        /// <summary>
        /// 發生異常關閉時觸發
        /// </summary>
        /// <param name="obj"></param>
        [Error]
        public static void Error(object obj)
        {
            //異常
            Console.WriteLine("socket異常");
        }

    }
}

           

2.6 注冊鍵盤跟換焦點

• 找到需要跟換焦點的vue頁面
• 為焦點dom添加屬性

  focus="序号"

  序号為數字并且數字需連續
• 在vue頁面中添加如下代碼

/**
節點代碼
*/
 export default {
    data() {
    	return {
			//...
		}
    },
    //...
        //start-鍵盤回車支援
    mounted() {
      //這裡的`'[focus]'`直接作為 document.querySelectorAll()的參數，查詢需要注冊回車事件的節點
      this.$enterFocus('[focus]');
    },
    updated() {
      //這裡的`'[focus]'`直接作為 document.querySelectorAll()的參數，查詢需要注冊回車事件的節點
      this.$enterFocus('[focus]');
    },
    //end-鍵盤回車支援

    methods: {
		//...
	},
	created(){
	}
 }
           

2.7 其他内容檢視源代碼傳送門