![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`；

FineDrawio Docker部署

![splay.png](/static/img/f2b57040804585f3defd325793e72da0.splay.webp)
五一开车带着家人去旅游🚗，打开手机听歌🎵

然后一言难尽，反正服务器闲着，自己部署一个，这里做个记录，避免后人的坑；

* **系统**：阿里云Centos7
* **环境**：[Doker](https://docs.docker.com/get-docker/) & [Docker compose](https://docs.docker.com/compose/install/)
* **项目**：[SPlayer](https://github.com/imsyy/SPlayer)
* **其他**：域名 && [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 



# 1. 准备工作📋
## 1.1 域名 🌐
我之前申请了域名，在腾讯申请的，服务器是阿里云，在阿里云备案，拿到备案号，这步没什么坑，按照表单填写就行了，阿里也挺负责提交后有人打电话告诉你怎么填写，然后就通过了；

如果没有域名也有免费的域名（没试过）B站有教程；

然后去腾讯云域名管理添加二级域名： 控制台-我的域名-解析-记录管理-添加记录

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

## 1.2 Doker & Docker compose 📦

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
```
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
```

3. 默认网段 
    
    可能会出现IP冲突的情况 占用 172 网段，需要配置默认的IP 
    ```
    vi /etc/docker/daemon.json
    ```
    ```
    {
    "bip":"169.254.0.1/24"
    }
    //也可能是这个生效
    {
    "bip":"169.254.0.1/24",
    "default-address-pools" : [
            {  "base" : "192.168.0.0/16",
               "size" : 24      }
     ]
    }
    ```
然后重启 docker `systemctl restart docker`

## 1.3 Nginx代理 🛡️
这里的选择也挺多，我选择了 [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 

这里有个教程 [彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0) 尽量看一遍


```
mkdir -p /home/Nginx
vim docker-compose.yml 
```
```
version: '3'
services:
  app:
    image: 'chishin/nginx-proxy-manager-zh:release'
    restart: always
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
```
`这里注意 人家给的都是 docker-compose up -d 但我的服务器上是 docker compose 不知道为什么`
```
docker compose up -d
```

nginx-proxy占用了80端口和443 端口，因为需要他SSL证书和代理；

安装完后按照教程配置SSL证书，非常方便就不截图了


# 2. 音乐项目选择 💭

我要选择一个支持doker部署(因为centos7比较老，本地编译会出问题)，带收藏夹，手机端也可以用的

我分别部署测试了以下的项目,全部基于 [NeteaseCloudMusicApi](https://github.com/radishes-music/radishes/)（违规已经不让维护了，千万不要去doker上搜🔍）


项&nbsp;目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|啰嗦
-|-
[YesPlayMusic](https://github.com/qier222/YesPlayMusic) |手机浏览没有适配，doker上 oaklight/yesplaymusic 这个比较新，支持 Last.fm，但是我就没成功过![202110142354283.png](/static/img/fdba6eadbe5625ba8499c29ce884e739.202110142354283.webp)
[R3PLAYX](https://github.com/Sherlockouo/music)|手机端倒是可以看，登录WY后显示收藏，但是没有办法维护收藏，是YesPlayMusic的二开，颜值最高![202312251127644.png](/static/img/23cd3e88b2f03268480f7bdf897a556e.202312251127644.webp)
[Radishes](https://github.com/radishes-music/radishes/)|手机浏览没有适配![home.jpg](/static/img/d03174d48b9699cf07e77573f6231b22.home.webp)
[SPlayer](https://github.com/imsyy/SPlayer)|手机端适配，有收藏夹，可以操作收藏夹![SPlayer - 主页面.jpg](/static/img/f9be4df39a5b9cbb833c96112e6563e1.SPlayer%20-%20%C3%A4%C2%B8%C2%BB%C3%A9%C2%A1%C2%B5%C3%A9%C2%9D%C2%A2.webp)





然后发现这些项目docker内部的API都有问题，过期了，NeteaseCloudMusicApi 更新的比较快

最后选择了 SPlayer 手机适配完美，而且能操作收藏夹，有时候也会暂停，

# 3. 部署 ⚙️
## 3.1 SPlayer
还是 docker-compose.yml ，注意 7899是原始端口，2221 是暴漏端口

```
version: '3'
services:
  splayer:
    image: imsyy/splayer
    container_name: splayer
    ports:
      - 2221:7899
    restart: always
```
## 3.2 netease_cloud_music_api
```
docker pull binaryify/netease_cloud_music_api
docker run -d -p 3001:3000 --name netease-music-api binaryify/netease_cloud_music_api
```

这里自己拉了一个netease_cloud_music_api，注意将服务器的3001端口开开，因为SPlayer接口基本都过期了，所有代理到 3001，



## 3.3 配置代理

域名代理
![图片.png](/static/img/73b7eda67ccf305bfc5575968ea56d6a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

因为 SPlayer 的内置API过期，这里需要转一下

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

这里说下代理配置
```
    #将当前代理/api/下的连接(就是 [:2221/api/...])转到 :3001
    #如果 返回 404 就是 :3001/... 没通，就转到 @fallback（这里@fallback是一个配置块）
    location /api/ {
        proxy_pass http://XXX:3001/;
        proxy_intercept_errors on;
        error_page 404 = @fallback;
    }
    #@fallback配置块 转到这里说明没成功，就用原始的连接 即[:2221/api/...]，:2221被域名代理了
    location @fallback {
        proxy_pass https://XXX.top$request_uri;
    }
```

项目|代理地址
-|-
YesPlayMusic|/api/
R3PLAYX|/netease/
SPlayer|/api/

---

到这就结束了，手机扫码登录后，1分钟的歌就变成3分钟了，终于可以享受🥰持久带来的快乐了(实名羡慕)！


---
参考

[彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0)

[老苏的blog](https://laosu.cf/2024/01/10/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BD%91%E6%98%93%E4%BA%91%E6%92%AD%E6%94%BE%E5%99%A8Radishes/?highlight=%E9%9F%B3%E4%B9%90)

Doker部署一个SPlayer听歌

![](/static/img/f2f6d37cb67424810faf269c876df080.FineUIGridçªåºè¡.webp)

🌟分享个样式的代码，Grid列表突出某行🔍，

![选择行.gif](/static/img/bb2bb75587907e939044edb7c0813874.%C3%A9%C2%80%C2%89%C3%A6%C2%8B%C2%A9%C3%A8%C2%A1%C2%8C.gif)



## js ⌨️
``` js
//...事件
let id = 'xxx';//行ID
F.ui.Grid1.selectRow(id, { scrollTo: true });//选择行，并滚动到
F.ui.Grid1.getRowEl(id).addClass(`blink`);//新增样式 
$(`.f-grid-bodyct`).css(`overflowX`, 'hidden');//隐藏横向滚动条
//延迟删除样式 恢复 
setTimeout(() => {
    F.ui.Grid1.getRowEl(id).removeClass(`blink`);
    $(`.f-grid-bodyct`)[0].style.removeProperty('overflow-x');
}, 800);
```

## css 🎨
``` css
@@keyframes glow {
    0% {
        transform: scale(1);
        background-position: 1% 0;
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        background-position: 110% 0;
    }
}

.blink {
    animation: glow .8s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    background-image: linear-gradient(to right, transparent, white, transparent);
    background-size: 200px 100%;
    background-repeat: no-repeat;
}
```

---
![](https://blog.shizhuoran.top/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUIGrid突出行

![文章2.png](/static/img/6408dc362890eb384cb9edafcfb985e0.%C3%A6%C2%96%C2%87%C3%A7%C2%AB%C2%A02.webp)

没事写点文章📝总结下代码，插入一些Emoji表情显得没那么无聊😏，

但是随手插入还是不方便🙅‍♂️，微软自带的检索很难匹配到🔍，gpt倒是能给我推荐一些，但是每次都要打开网页问，

我一直装着[Pot翻译](https://gitee.com/mirrors/Pot?_from=gitee_search#/mirrors/Pot/blob/master/README_EN.md)，

类似的有好多，这样的，选中文字，快捷键就可以出来



![34440c6051ad6f3bdec2d1fb52a487965d00e530.webp](/static/img/2a81e8bc9cbbb269d3cd6a08d01c2532.34440c6051ad6f3bdec2d1fb52a487965d00e530.webp)

而且还支持 openai自定义，所以就写了一个Emoji表情助手📚

这样配置

![4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp](/static/img/e2b81dd0da4a8309872025769af4e1be.4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp)
图片
图片800×600 41.9 KB

密钥自己写

图片

![5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp](/static/img/11c50c111a5f94e48cde0fe34ecbb2a7.5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp)
效果如下
图片

![c7386e73f153d77b8765216741f48d034734e0f1.png](/static/img/7c2f6a09372527e6d6cb4f8e96ab462d.c7386e73f153d77b8765216741f48d034734e0f1.webp)

写可以加上 “只输出一个最匹配的Emoji表情即可，不要输出其他内容” 的字样，这样就可以直接复制📋了