CS和BS融合开发-NanUI前后端交换数据

最新推荐文章于 2022-12-14 18:16:56 发布

大鹏展翅888

最新推荐文章于 2022-12-14 18:16:56 发布

阅读量935

点赞数 2

分类专栏： .net

本文链接：https://blog.csdn.net/zhupengfei/article/details/109489484

版权

.net 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

安装包NetDimension.NanUI.DataServiceResource
在这里插入图片描述

在代码中注册数据接口包
app.UseDataServiceResource(“http”, “api.app.local”);

详细代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using NetDimension.NanUI;
using NetDimension.NanUI.DataServiceResource;
using NetDimension.NanUI.LocalFileResource;

namespace WindowsFormsApp1
{
    static class Program
    {
        static void Main()
        {
            // ...
            WinFormium.CreateRuntimeBuilder(env => {

                env.CustomCefSettings(settings =>
                {
                    // 在此处设置 CEF 的相关参数
                });

                env.CustomCefCommandLineArguments(commandLine =>
                {
                    // 在此处指定 CEF 命令行参数
                });

            }, app =>
            {
                // 指定启动窗体
                app.UseMainWindow(context => new MainWindow());

                //加载本地资源
                app.UseLocalFileResource("http", "static.app.local", @"D:\myGtreeCode\demo1\WindowsFormsApp1\wwwroot");

                // ...
                app.UseDataServiceResource("http", "api.app.local");
            })
            .Build()
            .Run();
        }
    }
}

新建一个HelloService.cs类文件
代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using NetDimension.NanUI.DataServiceResource;
using NetDimension.NanUI.ResourceHandler;


namespace WindowsFormsApp1
{
    public class HelloService : DataService
    {
        //在不指定路由特性的情况下，数据服务适配器根据数据服务的名称来生成路由。例如上面的示例将自动生成路由Hello/Hi。
        //另外，如果数据处理程序不指定 Http 方法时，任何提交的请求不论 HttpMethod 是什么方法都将命中路由。
        public ResourceResponse Hi(ResourceRequest request)
        {
            return Text("Hello NanUI!");
        }
    }
}

这样在前端就可以调用http://api.app.local/hello/hi 获取数据
前端页面

<html>

<head>

</head>

<body>
    <span>zhupengfei</span>

    <a href="http://api.app.local/hello/hi">测试一</a>

</body>

</html>

效果图
在这里插入图片描述

接下来模拟一个用户登录的过程，实现从前端获取数据，传入后端，然后后端返回数据到前端的例子。
新建一个PassportService.cs的类文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using NetDimension.NanUI.DataServiceResource;
using NetDimension.NanUI.ResourceHandler;


namespace WindowsFormsApp1
{
    [DataRoute("/account")]
    public class PassportService : DataService
    {
        // 用户登录模型
        public class UserInfo
        {
            public string Passport { get; set; }
            public string Password { get; set; }
        }

        // 获取当前时间戳
        private string GetTimeStamp()
        {
            TimeSpan ts = DateTime.Now - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalSeconds).ToString();
        }

        [RoutePost("user/login")]
        public ResourceResponse Login(ResourceRequest request)
        {
            // 反序列化 JSON 数据
            var result = request.DeserializeObjectFromJson<UserInfo>();

            // 模拟延迟操作
            //Task.Delay(2000).GetAwaiter().GetResult();

            // 返回登录成功
            return Json(new { success = true, timestamp = GetTimeStamp(), result });
        }
    }
}

前端的html代码，调整如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>zhupengfei nanui</title>
</head>

<body>
    <span>zhupengfei</span>

    <a href="javascript:void(0)" onclick="test1();return false;">测试一</a>

    <a href="javascript:void(0)" onclick="test2();return false;">测试二</a>
    <script>
        function test1() {
            console.log("get http://api.app.local/hello/hi");
            var xhr = new XMLHttpRequest();//第一步：新建对象
            xhr.open('GET', 'http://api.app.local/hello/hi', true);//第二步：打开连接  将请求参数写在url中 
            xhr.send();//第三步：发送请求  将请求参数写在URL中
            /**
             * 获取数据后的处理程序
             */
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = xhr.responseText;//获取到json字符串，解析
                    console.log(res);
                }
            };
        }

        function test2() {
            console.log("get http://api.app.local/account/user/login");
            var xhr = new XMLHttpRequest();//第一步：新建对象
            xhr.open('POST', 'http://api.app.local/account/user/login', true); // 建立连接
            xhr.setRequestHeader("Content-type", "application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
            var obj = { Passport: 'zhansgan', Password: "111111" };
            xhr.send(JSON.stringify(obj));//发送请求 将json写入send中
            /**
             * 获取数据后的处理程序
             */
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 代码逻辑
                    var res = xhr.responseText;//获取到json字符串，解析
                    console.log(res);
                }
            };
        }
    </script>
</body>

</html>

运行效果如下

在这里插入图片描述

大鹏展翅888

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CS和BS融合开发-NanUI前后端交换数据

安装包NetDimension.NanUI.DataServiceResource在代码中注册数据接口包app.UseDataServiceResource(“http”, “api.app.local”);详细代码如下using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using System.Windows.Forms;using NetDimensi
复制链接

扫一扫