![](https://blog.shizhuoran.top/static/img/180bd0b869aca9c454b33f8859453a91.fineui114.webp)
今天对场景做了测试，

一个场景是每个页面打开都应该有一个`menuid`菜单ID，在打开页面和页面回发时用以判断权限；

另一个场景一般我开发编辑功能 列表主页面使用`IFrame`打开编辑的页面，需要将编辑的`id`传给子页面，拼接在`url`后面，在子页面保存时提交将`id`传到后台

这两个场景都用到了`__doPostBack`带自定义参数；按之前的写法我直接写js自定义回发



# 1. 菜单权限

[直接参考这个就行了](https://www.cnblogs.com/sanshi/p/18193981)，我还没有试😅

# 2. OnClickParameterN

如果是`Button` 可以使用 `OnClickParameterN`，这个N是个数，给了6个，

![图片.png](/static/img/3ce82b1c4f4d59708a158a143831e73e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

直接这么写就行了✍️
``` cshtml
<f:Button ID="btnChangeEnable" Text="回发测试" 
   OnClick="btnChangeEnable_Click" CssClass="marginr" runat="server" 
   OnClickParameter1="@(new Parameter("menuid", "F.queryString('menuid')"))"  />
```

这时前台的绘制变成了
``` js
var _f5=new F.Button({
	id:'btnChangeEnable',
	renderTo:'#btnChangeEnable_wrapper',
	cls:'marginr',
	text:'回发测试',
	handler:function (event) {
        F.doPostBack({
            eventTarget: 'btnChangeEnable',
            eventArgument: 'click',
            url: '?handler=btnChangeEnable_Click',
            disableControl : 'btnChangeEnable',
            params: {
                menuid: F.queryString('menuid')
            }
        });
    }
});
```

可以看到参数放在了`params`里;回发的实际请求会带上`menuid`

![图片.png](/static/img/695cedd912deaaaecd40b7f50c62e00f.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

后台使用`Request.Form`获取
```
var menuid = Request.Form["menuid"];
```

# 3. 其他事件
如果不是`Button`没有`OnClickParameterN`，除了可以自己写`F.doPostBack`，我还发现了一个参数`F.postBackParams`,这是一个前台参数API里没有，但是外露到`F`上了，在`FienUI8` 给`Window.hidePostBack`用了一下，到`FienUI10`就没用，这个参数会`$.extend`提交的参数上;

比如可以在 `Shared\_Layout.cshtml`中
```
<script>
    F.postBackParams = {
        menuid: F.queryString('menuid'),
        IDS: F.toJSON(Object.keys(F.all)) 
    }
</script>
@RenderSection("script", false)
```

这样回发就带着了

![图片.png](/static/img/e0fcf4973feac697d41550989c97017e.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

但是这个参数用完就清除了`F.postBackParams = undefined`，哈哈😂，第二次回发就没了;

改成不让设置为`undefined`就行了👌
```
<script>
    $(function () {
        F._postBackParams = {};
        Object.defineProperty(F, 'postBackParams', {
            get() {
                return Object.assign(F._postBackParams, {
                    menuid: F.queryString('menuid'),
                    IDS: F.toJSON(Object.keys(F.all))
                })
            },
            set(value) {
                if (value === undefined) {
                    console.log('不让');
                } else {
                    F._postBackParams = value;
                }
            },
            enumerable: true,
            configurable: true
        });
    });
</script>
```

这写可能用处不大，但是有个好处，可以凑字数；

# 4. FormBase.GetData

我注意到 `ShowNotify`可以接收表单控件，原来增加了一个方法`ResolveFormFields`，我来优化下，可以转为`JObject`,直接这么用就行了`var data = SimpleForm1.GetData();`

```
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Reflection;

namespace FineUICore
{
    public static class FormBaseEx
    {
        /// <summary>
        /// 从给定的<see cref="FormBase"/>实例中获取类型为<T>的序列化数据。
        /// </summary>
        /// <param name="f">要从中提取数据的表单基础实例。</param>
        /// <typeparam name="T">要转换的目标类型。</typeparam>
        /// <returns>一个可空的<T>对象，表示从表单字段序列化的数据。</returns>
        public static T? GetData<T>(this FormBase f)
        {
            List<Field> resolvedFields = ResolveFormFields(f);
            var jobj = GetDataByFields(resolvedFields);
            return jobj.ToObject<T>();
        }
        /// <summary>
        /// 从给定的<see cref="FormBase"/>实例中获取JSON对象表示的数据。
        /// </summary>
        /// <param name="f">要从中提取数据的表单基础实例。</param>
        /// <returns>一个包含表单字段数据的JSON对象。</returns>
        public static JObject GetData(this FormBase f)
        {
            List<Field> resolvedFields = ResolveFormFields(f);
            var jobj = GetDataByFields(resolvedFields);
            return jobj;
        }
        /// <summary>
        /// 根据提供的字段列表创建一个JSON对象，其中包含每个字段的ID和文本值。
        /// </summary>
        /// <param name="resolvedFields">要处理的字段列表。</param>
        /// <returns>一个包含字段ID和文本值的JSON对象。</returns>
        private static JObject GetDataByFields(List<Field> resolvedFields)
        {
            var jobj = new JObject();
            foreach (Field field in resolvedFields)
            {
                string text = "";
                if (field is CheckBoxList)
                {
                    text = String.Join(", ", (field as CheckBoxList).SelectedValueArray);
                }
                else if (field is RadioButtonList)
                {
                    text = (field as RadioButtonList).SelectedValue;
                }
                else
                {
                    // 获取 Text 属性的值
                    var propertyInfo = field.GetType().GetProperty("Text", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic);
                    if (propertyInfo != null)
                    {
                        text = propertyInfo.GetValue(field).ToString();
                    }
                }

                if (!String.IsNullOrEmpty(text))
                {
                    jobj.Add(field.ID, text);
                }
            }
            return jobj;
        }
        /// <summary>
        /// 递归地解析<see cref="ControlBase"/>及其子控件，收集所有字段。
        /// </summary>
        /// <param name="control">要解析的控件基础实例。</param>
        /// <returns>一个包含所有找到的字段的列表。</returns>
        private static List<Field> ResolveFormFields(ControlBase control)
        {
            var resolvedFields = new List<Field>();
            if (control is PanelBase)
            {
                if (control is FineUICore.Form)
                {
                    foreach (FormRow row in (control as FineUICore.Form).Rows)
                    {
                        foreach (ControlBase rowItem in row.Items)
                        {
                            resolvedFields.AddRange(ResolveFormFields(rowItem));
                        }
                    }
                }

                foreach (ControlBase item in (control as PanelBase).Items)
                {
                    resolvedFields.AddRange(ResolveFormFields(item));
                }
            }
            else if (control is Field)
            {
                resolvedFields.Add(control as Field);
            }
            return resolvedFields;
        }
    }
}

```

---

:::info{title="相关连接"}
[FineUI11初体验](https://blog.shizhuoran.top/post/39)

[FineUI11过滤器WebFormsFilter（一）](https://blog.shizhuoran.top/post/40)

[FineUI11过滤器WebFormsFilter（二）](https://blog.shizhuoran.top/post/41)

[FineUI11表单回发测试](https://blog.shizhuoran.top/post/42)

[FineUI11控件扩展（一）](https://blog.shizhuoran.top/post/44)

[FineUI11控件扩展（二）](https://blog.shizhuoran.top/post/45)

[FineUI11控件扩展（三）](https://blog.shizhuoran.top/post/46)

[FineUI11控件扩展（四）](https://blog.shizhuoran.top/post/47)
:::



![336ed2bd17b80a3cfeab2f7e0219227.jpg](/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUI11.0-CoreWebForms笔记（四）

![formsfilter2.png](/static/img/208c5910aa851eb8e0878e334912b002.formsfilter2.webp)
继续上一个稿子，[FineUI11.0-CoreWebForms笔记（二）](https://blog.shizhuoran.top/post/40)

# 2. OnPageHandlerExecuting（页面处理开始前）

这里的实现`MethodInfo methodInfo = A(context, handlerInstance);`
是这么写的
```
MethodInfo result = null;
StringValues stringValues = P_0.HttpContext.Request.Query["handler"];
if (!string.IsNullOrEmpty(stringValues))
{
    result = P_1.GetType().GetMethod(stringValues, BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic);
}
```

:::warning{title="注意"}
`handler`的方法 `btnChangeEnable_Click`不能有重载！否则报错；
:::


如果要避开默认的`handler`的方法，只要找不到这个`methodInfo`就行了，后台改个名就找不到了;

下面自已写一个`Filter`试试




```

namespace FineUICore
{
    public class MyWebFormsFilter : IPageFilter, IFilterMetadata
    {
        public void OnPageHandlerExecuting(PageHandlerExecutingContext context)
        {
            object handlerInstance = context.HandlerInstance;
            bool flag = context.HttpContext.Request.Method == "POST";
            HandlerMethodDescriptor handlerMethod = context.HandlerMethod;
            if (flag && PageContext.IsFineUIAjaxPostBack() && PageManager.Instance.EnableWebForms)
            {
                string id = context.HttpContext.Request.Form["__EVENTTARGET"].ToString();
                string handler = context.HttpContext.Request.Query["handler"];
                if (!string.IsNullOrEmpty(handler)
                    && !string.IsNullOrEmpty(id))
                {
                    Console.WriteLine($"按钮{id} 触发了方法{handler}");
                }
            }
        }
    }
}

```

# 3. OnPageHandlerExecuted（页面处理结束后）

由于事件的方法都是 `void`，具体的响应在
`WebFormsFilter`中`OnPageHandlerExecuted`， 将`Result`定义为了`FineUICore.UIHelper.Result();` 用以继续管道；

当操作属性后，将状态保存到了`ControlBase.FState`

```
public virtual bool Enabled
{
    get
    {
        object obj = FState["Enabled"];
        if (obj != null)
        {
            return (bool)obj;
        }

        return true;
    }
    set
    {
        FState["Enabled"] = value;
    }
}
```

后面生成响应的js，读取`FState`中属性变化的值，应该是`WebFormsFilter`干的事，触发了`ControlBase.OnAjaxPreRender`方法（可能是），有兴趣的可以细抠；

`OnPageHandlerExecuted`方法如下

```
public void OnPageHandlerExecuted(PageHandlerExecutedContext context)
{
    object handlerInstance = context.HandlerInstance;
    bool flag = context.HttpContext.Request.Method == "POST";
    HandlerMethodDescriptor handlerMethod = context.HandlerMethod;
    if (flag && PageContext.IsFineUIAjaxPostBack() && PageManager.Instance.EnableWebForms)
    {
        D.C().E();
        if (handlerMethod == null && context.Result is PageResult)
        {
            context.Result = UIHelper.Result();
        }
    }
}
```

---

---

:::info{title="相关连接"}
[FineUI11初体验](https://blog.shizhuoran.top/post/39)

[FineUI11过滤器WebFormsFilter（一）](https://blog.shizhuoran.top/post/40)

[FineUI11过滤器WebFormsFilter（二）](https://blog.shizhuoran.top/post/41)

[FineUI11表单回发测试](https://blog.shizhuoran.top/post/42)

[FineUI11控件扩展（一）](https://blog.shizhuoran.top/post/44)

[FineUI11控件扩展（二）](https://blog.shizhuoran.top/post/45)

[FineUI11控件扩展（三）](https://blog.shizhuoran.top/post/46)

[FineUI11控件扩展（四）](https://blog.shizhuoran.top/post/47)
:::



![336ed2bd17b80a3cfeab2f7e0219227.jpg](/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUI11.0-CoreWebForms笔记（三）

![formsfilter1.png](/static/img/2ce379e2891542974877cbf77edc35ea.formsfilter1.webp)
今天继续体验发现FineUI11的变化；

本次记录一下`FineUI11实现WebForms模式`的探索，解读一下`WebFormsFilter`到底干了什么；

上期提到了通过属性的`get` `set`  `状态FState`实现了`WebForms`的写法，今天来拆解一下的内部机制

我注意到`Startup.cs`页面增加了一行代码
``` cs
 // 自定义WebForms过滤器（仅在启用EnableWebForms时有效）
 options.Filters.Insert(0, new FineUICore.WebFormsFilter());
```
核心就是`WebFormsFilter`过滤器，直接`F12`



# 1. 核心方法 🔑

`F12`后发现 `WebFormsFilter` 继承 `IPageFilter` 和 `IFilterMetadata`；

`IPageFilter` 有三个核心方法用于拦截 Razor 页面生命周期中的特定事件

方法|生命周期 ⏳
-|-
OnPageHandlerExecuting|页面处理开始前
OnPageHandlerExecuted|页面处理结束后
OnPageHandlerSelected|执行页面处理程序被选定但尚未执行之前

`WebFormsFilter`就实现了 `OnPageHandlerExecuting` 和 `OnPageHandlerExecuted`，一前一后；

# 2. OnPageHandlerExecuting（页面处理开始前）

在看具体实现前，先来做一下猜测，首先看回发的前台代码

``` js
F.doPostBack({
    eventTarget: 'btnChangeEnable',
    eventArgument: 'click',
    url: '?handler=btnChangeEnable_Click',
    disableControl : 'btnChangeEnable'
});
```
`F.doPostBack`的具体实现就部看了，就是ajax，执行后的回发内容如下
![](/static/img/9353295b872dcef9dcdf3e9c42509773.å¾ç.webp)

通过观察参数，不难推断 `OnPageHandlerExecuting` 主要实现了这么几件事：

* 1️⃣根据`handler`找到当前页面的方法（反射），通过`url`找：应该是在`HttpContext.Request.Query["handler"]`里，当前页面就是`context.HandlerInstance`;
* 2️⃣解析`__FSTATE`,这里存着前台控件的状态，通过ID 或 发射 声明控件的实例并赋值，就得到了所有的控件;推测应该存到了`FineUIExtensions.AllControls`
* 3️⃣根据`__EVENTTARGET` 找到当前的控件；这个有现成的方法`FineUIExtensions.FindControl`其实也是`AllControls`;
* 4️⃣最后`__EVENTARGUMENT`应该也没啥用，随便放`EventArgs`里就行了；

与后台方法的关系如下：

```
               1️⃣ [handler]         3️⃣[__EVENTTARGET] 4️⃣[__EVENTARGUMENT]
protected void btnChangeEnable_Click(object sender,    EventArgs e)
{
    2️⃣[__FSTATE]
    btnEnable.Enabled = true;
    btnEnable.Text = "本按钮已经启用（点击弹出对话框）";
}
```
以下是`WebFormsFilter`反编译后的代码:
``` WebFormsFilter
public void OnPageHandlerExecuting(PageHandlerExecutingContext context)
{
    object handlerInstance = context.HandlerInstance;
    bool flag = context.HttpContext.Request.Method == "POST";
    HandlerMethodDescriptor handlerMethod = context.HandlerMethod;
    if (flag && PageContext.IsFineUIAjaxPostBack() && PageManager.Instance.EnableWebForms)
    {
        A(handlerInstance);
        a(context, handlerInstance);
        MethodInfo methodInfo = A(context, handlerInstance);
        if (methodInfo != null)
        {
            A(context, handlerInstance, methodInfo);
        }
    }
}
```
这里我直接写上注释，与推断基本吻合

上面的内容写了一个小时，我的能量已经耗尽了😩
``` WebFormsFilter
public void OnPageHandlerExecuting(PageHandlerExecutingContext context)
{
    //当前页面处理程序的实例
    object handlerInstance = context.HandlerInstance;
    //是否是POST请求
    bool flag = context.HttpContext.Request.Method == "POST";
    //没用上
    HandlerMethodDescriptor handlerMethod = context.HandlerMethod;
    //如果是POST请求，并且是FineUI的AJAX请求，并且开启了WebForms模式
    if (flag && PageContext.IsFineUIAjaxPostBack() && PageManager.Instance.EnableWebForms)
    {
        //还原__FSTATE 2️⃣
        A(handlerInstance);
        //找Page_Load并且执行
        a(context, handlerInstance);
        //得到handler方法 1️⃣
        MethodInfo methodInfo = A(context, handlerInstance);
        //如果handler不为null，执行handler方法
        if (methodInfo != null)
        {
            //解析__EVENTTARGET3️⃣和__EVENTARGUMENT4️⃣ 并执行handler 
            A(context, handlerInstance, methodInfo);
        }
    }
}
```

---

:::info{title="相关连接"}
[FineUI11初体验](https://blog.shizhuoran.top/post/39)

[FineUI11过滤器WebFormsFilter（一）](https://blog.shizhuoran.top/post/40)

[FineUI11过滤器WebFormsFilter（二）](https://blog.shizhuoran.top/post/41)

[FineUI11表单回发测试](https://blog.shizhuoran.top/post/42)

[FineUI11控件扩展（一）](https://blog.shizhuoran.top/post/44)

[FineUI11控件扩展（二）](https://blog.shizhuoran.top/post/45)

[FineUI11控件扩展（三）](https://blog.shizhuoran.top/post/46)

[FineUI11控件扩展（四）](https://blog.shizhuoran.top/post/47)
:::



![336ed2bd17b80a3cfeab2f7e0219227.jpg](/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUI11.0-CoreWebForms笔记（二）

![fineui111.png](/static/img/076f89da632a13ed17aaf09e6c72839c.fineui111.webp)
拿到了FineUI11的测试包，今天上午有时间下来看看，这里做个记录，给没有拿到的尝个新鲜；

具体的更新变化就说了，[这里已经说了](https://www.cnblogs.com/sanshi/p/18186007)，我来啰嗦下个人感受到的变化；



# 1. .cshtml.designer.cs 📐

对使用Fineui的开发者，本次最大的更新就是多了一个`.cshtml.designer.cs` ，每个`.cshtml.cs`文件对应一个`.designer.cs`，就是当前页面`Model`的另一"部分"(`partial`)，里面存的是类型为FineUI控件的字段，字段名就是控件的ID名，等于根据ID名，在cs页面创建了一个字段，就可以直接用了，WebForm就是这么干的，就不多说；


![图片.png](/static/img/bbd8873c75349fd32bfb011ec4a2e9b3.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

具体来看是怎么实现的，为什么写`cshtml`会自动生成呢，非常的合理，因为启动了一个监听程序 `自动生成设计时文件.exe` ，是手动开启的一个exe文件（WindowsX86限定外挂）


![图片.png](/static/img/26c9225280fcecf71e0bb832a64df207.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

原理自然就是监听 .cshtml 文件的变化，读取页面的控件ID，然后写入`.designer.cs`，因为我自己也写了一个面向FineUICore的vs插件，这里F产品没有写成vs插件可能是维护成本比较大，因为我自己写只兼容vs2022就行了；

下面是我自己写的，原理是一样的：

![](https://blog.shizhuoran.top/static/img/54bc068d86e1e002bb355d3821bf118d.QQå¾ç20240514135639.webp)

![图片.png](/static/img/3c94fc5bae75702e010cc23aee21385a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

# 2. 属性操作 🔧
自动添加了控件是第一步，我们看到cs的代码可以直接给属性赋值，

![图片.png](/static/img/e2aebd717a2ee02dcd49b3272be5bff3.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这里其实还是生成了js代码，然后响应到前台

![图片.png](/static/img/d2bfaf24e05f871f3195efc3dea28d22.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这里其实也很明显，在属性的`get` `set`操作就行了，老朋友`FState`终于登场，最后应该使用拦截`FineUIMiddleware` `WebFormsFilter`生成被抛出响应，这里就不深挖了；

# 3. 回发 🔙
新的回发也是老熟人了，应该是将页面的控件属性加密后（就是Base64）回发了，然后赋值到控件的属性上，后台就可以拿到了，和WebForms一样（真的一样💯！），

![图片.png](/static/img/9353295b872dcef9dcdf3e9c42509773.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这是当前版本的回发

![图片.png](/static/img/d5410f8f1b70f867802f45cd62b7dff5.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)
# 4. 事件 💡
前台事件是这么写的 `OnClick="btnChangeEnable_Click" `

绘制生成了对应的代码
``` js
var _f5=new F.Button({
	id:'btnChangeEnable',
	renderTo:'#btnChangeEnable_wrapper',
	cls:'marginr',
	text:'启用后面的按钮',
	handler:function (event) {
        F.doPostBack({
            eventTarget: 'btnChangeEnable',
            eventArgument: 'click',
            url: '?handler=btnChangeEnable_Click',
            disableControl : 'btnChangeEnable'
        });
    }
});
```
`F.doPostBack` 用了新的参数，这里回发前会调用`disableControl` ,回发完成再`f_enable`

这里回发的这个sender就是当前的控件

![图片.png](/static/img/0f16987d2da8ad74adb73e298efef14d.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

---
就先看这么多吧，我大概率用不上WebForm开发模式，至于页面响应效率我到不上心，得瑟才是我的本质😏


---

:::info{title="相关连接"}
[FineUI11初体验](https://blog.shizhuoran.top/post/39)

[FineUI11过滤器WebFormsFilter（一）](https://blog.shizhuoran.top/post/40)

[FineUI11过滤器WebFormsFilter（二）](https://blog.shizhuoran.top/post/41)

[FineUI11表单回发测试](https://blog.shizhuoran.top/post/42)

[FineUI11控件扩展（一）](https://blog.shizhuoran.top/post/44)

[FineUI11控件扩展（二）](https://blog.shizhuoran.top/post/45)

[FineUI11控件扩展（三）](https://blog.shizhuoran.top/post/46)

[FineUI11控件扩展（四）](https://blog.shizhuoran.top/post/47)
:::



![336ed2bd17b80a3cfeab2f7e0219227.jpg](/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUI11.0-CoreWebForms笔记（一）

![](/static/img/dafbbb4e80f5df55c8bf177d6331a32b.FineDrawioDockerbushu.webp)

之前[给开源项目 drawio 用 FineUI 套了个壳](https://gitee.com/shixixiyue/fine-drawio-public)，一直有BUG， 长时间挂后台保存后会丢（画完发现白了😢），最近又改了一版（也不知道能不能修复），放在了dockerhub上，安装很方便拉取就可以用了，数据库指定了容器没有自定义，这里放拉取代码。

![_MB5inDhpi6rJH2I8aiCoOzmvs_1icPzSNfiu0pgQxc.png](/static/img/d5899a7a2897ba7aa9d4012a68281a41._MB5inDhpi6rJH2I8aiCoOzmvs_1icPzSNfiu0pgQxc.webp)


# 1 docker环境
## 1.1 安装docker
```
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
```
```
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
```
 sudo systemctl start docker
```
## 1.2 安装 docker-compose
```
sudo curl -L "https://github.com/docker/compose/releases/download/{VERSION}/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```
```
sudo chmod +x /usr/local/bin/docker-compose
```
# 2 拉取执行

创建文件夹

```
mkdir -p /home/finedrawio
cd /home/finedrawio
```
创建文件
```
vim docker-compose.yml 
```
```
services:
  finedrawio:
    image: 935732994/finedrawio
    #8000是对外端口
    ports:
      - "8000:80"
    depends_on:
      - finedrawiodb
  #这个名字写死了，不要改
  finedrawiodb:
    image: 935732994/finedrawio:db
    #端口也可以布外露，可以删掉，我是测试用的
    ports:
      - "3307:3306"
    #这里也没有外露mysql 的数据卷
```
运行
```
docker compose up -d
```
访问 ip:8000,因为要导入数据库，这里做了90秒的延迟（我服务器卡）,所以要多等会

初始用户 test 123456,管理员账户（可以进入后台） admin _admin 

![myGCP8BoxIGCAyz3kXwxw5W0scEZeemFVGX_HMZ4s8A.png](/static/img/e273e4664edef1f21059f8b51a698f24.myGCP8BoxIGCAyz3kXwxw5W0scEZeemFVGX_HMZ4s8A.webp)

![f0X9mZ1l34VPFvuIxqFEM1fZ47QkeUwPTO4veD6AJko.png](/static/img/9b4ee7278697d574fddfab25e24b6d80.f0X9mZ1l34VPFvuIxqFEM1fZ47QkeUwPTO4veD6AJko.webp)

![2kfyLScgT79PGDP1rMiUVOAQyKSldbEKonBEQnpcBV4.png](/static/img/a8b684379683ef5d33bd5f492d7abaf9.2kfyLScgT79PGDP1rMiUVOAQyKSldbEKonBEQnpcBV4.webp)


# 3 构建

构建挺坎坷，这里记录下，

没正经学过docker，第一版拉了一个centos7镜像，现安装.net6 和 mysql环境，然后还原数据库，虽然挺稳定，但是太大了 2G+，拉取太慢，最后就分开了，分别拉取了 .net6 和 mysql5.7的镜像，构建程序和数据库，然后用compose.yml 和一块，命令如下


``` appDockerfile
#拉取
FROM mcr.microsoft.com/dotnet/aspnet:6.0 as build

RUN apt-get update \
    && apt-get install -y netcat \
    && rm -rf /var/lib/apt/lists/*
    
WORKDIR /app

# 暴露端口80
EXPOSE 80 

#复制程序
COPY ./publish /app
RUN chmod +x FineDrawio.Web

COPY start.sh /start.sh
RUN chmod +x /start.sh
#在启动后执行
CMD ["/start.sh"]

```
``` start.sh
#!/bin/bash

# 启动MySQL
#/usr/sbin/mysqld --user=mysql &
echo "Finedrawiodb Waiting..."
sleep 90 #睡一觉看看mysql起来了没有
while ! nc -z finedrawiodb 3306; do
    echo "Waiting for database port to be open..."
    sleep 5
done

echo "Initializing dotnetapp..."
# 等待MySQL启动
#sleep 60

echo "Initializing dotnet..."
# 启动.NET应用程序
./FineDrawio.Web

```
``` mysqlDockerfile
# 使用官方MySQL镜像作为基础镜像
FROM mysql:5.7.44 as build

# 设置环境变量，MySQL容器会使用这些环境变量来初始化数据库设置
ENV MYSQL_DATABASE=finedrawio
ENV MYSQL_USER=finedrawio
ENV MYSQL_PASSWORD=finedrawio
ENV MYSQL_ROOT_PASSWORD=finedrawio

# 设置默认的字符集和比较规则
ENV MYSQL_CHARSET=utf8mb4
ENV MYSQL_COLLATION=utf8mb4_unicode_ci

# 将初始化SQL脚本复制到容器内的特定位置，容器启动时会自动执行这些脚本
COPY finedrawio.sql /docker-entrypoint-initdb.d/

# 指示Docker容器在运行时监听3306端口
EXPOSE 3306
```

app 和 db 分别上传到了一个项目`935732994/finedrawio`的不同`tag`


最后在`compose`时加入`depends_on`表示这个容器启动时要依赖`finedrawiodb`；