列举一些常用的镜像启动配置，方便用到复制 👍


# 集合


## mysql,npm,portainer 个人新系统必备三镜像

```
version: '3.1'
services:
  #数据库
  mysql:
    image: mysql:latest
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: "a1075858260"
      MYSQL_DATABASE: "database"
      MYSQL_USER: "ln"
      MYSQL_PASSWORD: "a1075858260"
      MYSQL_COLLATION_SERVER: utf8mb4_unicode_ci
      MYSQL_CHARACTER_SET_SERVER: utf8mb4
    ports:
      - "6611:3306"
    volumes:
      - /home/docker_data/mysql_data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password
    #nginx管理
  app:
    image: 'chishin/nginx-proxy-manager-zh:latest'
    # image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
    - '80:80'
    - '81:81'
    - '443:443'
    volumes:
    - /home/docker_data/nginx-proxy-manager/data:/data
    - /home/docker_data/nginx-proxy-manager/letsencrypt:/etc/letsencrypt
    #docker管理
  portainer:
    image: portainer/portainer-ce
    ports:
      - 8000:8000
      - 9000:9000
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - /home/docker_data/portainer_data:/data
    restart: always

```

## .Net开发常用

### AgileConfig 配置中心
```dockercospom
version: '3.8'
services:
  agile_config:
    container_name: agile_config
    environment:
    - TZ=Asia/Shanghai
    - adminConsole=true
    - db__provider=mysql
    - db__conn=server=xxx;Port=6607;Database=agile_config;Uid=root;Pwd=a1075858260
    ports:
    - 172.17.0.1:5001:5000
    volumes:
    - /home/ln/volumes/agile_config:/app/db
    image: kklldog/agile_config:latest
    restart: always

```


### rabbitMQ 消息的队列
```
docker run -d --name my-rabbitmq -p 5672:5672 -p 15662:15672 rabbitmq:3-management 
```

### 私有图床miniuo

- #### 直接run起来

```
docker run -p 9000:9000 -p 9090:9090 \
     --net=host \
     --name minio \
     -d --restart=always \
     -e "MINIO_ACCESS_KEY=minioadmin" \
     -e "MINIO_SECRET_KEY=minioadmin" \
     -v /home/ln/minio/data:/data \
     -v /home/ln/minio/config:/root/.minio \
     minio/minio server \
     /data --console-address ":9090" -address ":9000"
```
- #### docker-compose 方式
```
version: '3.8'
services:
  minio:
    image: minio/minio
    container_name: minio
    restart: always
    networks:
      - host
    ports:
      - "9000:9000"
      - "9090:9090"
    environment:
      - MINIO_ACCESS_KEY=minioadmin
      - MINIO_SECRET_KEY=minioadmin
      - MINIO_CONSOLE_ADDRESS=:9090
    volumes:
      - /home/ln/volumes/minio/data:/data
      - /home/ln/volumes/minio/config:/root/.minio
    command: server /data --console-address ":9090" --address ":9000"
networks:
  host:
    external: true
```

### mongodb 数据库
```
# Use root/example as user/password credentials
version: '3.1'

services:

  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
      - ./configdb:/data/configdb

  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example
      ME_CONFIG_MONGODB_SERVER: mongo
    depends_on:
      - mongo


```


### redis 字典数据库
```
docker run -d --name redis -p 6610:6379 \
-v /home/ln/web/redis-data:/data \
redis redis-server --appendonly yes --requirepass "123456789"
```


### BBS

` docker run -d -p 9080:80 -v answer-data:/data --name answer answerdev/answer:latest `

docker常用镜像

> 🔊 dom类型断言是：HTMLElement





# 第一种方式
```html
<template>
  <div class="block-area" ref="area">
    <div v-for="i of 3" :key="i" class="block" ref="divs">
      {{ i }}
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, toRef } from 'vue';





const area = ref<HTMLElement | null>(null);
// const arrBlock = ref<HTMLElement[]>([]);
const divs = ref<HTMLElement[]>();

onMounted(() => {

  //预留：
  //1.api传来block总数
  //2.block 长宽高，颜色，行为 由api传递
  const min = 50;
  const max = 150;

  divs.value?.forEach((element, index, array) => {
    console.log(`Element: ${element} 索引: ${index} ary: ${array}`);

    let h = Math.floor(Math.random() * (max - min + 1)) + min;
    let w = Math.floor(Math.random() * (max - min + 1)) + min;
    element.style.height = `${h}px`;
    element.style.width = `${w}px`;
    element.style.backgroundColor = `#000`;
  });


})





// const divs = (el: HTMLElement) => {
//   // 断言为HTMLElement类型的数组
//   if (el)
//     (arrBlock.value as Array<HTMLElement>).push(el);
// };
</script>
<style scoped lang='scss'>
.block-area {
  position: relative;
  .block {
    position: absolute;
  }
}
</style>
```

# 其他方式处理dom数组

```html

<div :ref="(el)=> boxHanddlde(el)"></div>


<div :ref="(el)=> boxArray.push(el)"></div>

<script lang='ts'>
let boxArray = reactive<any[]>([])
const boxHanddle(e:any){
    console.log(e)
}
onMounted(()=>{
    console.log(boxArray)
})
</script>

```

vue3操作dom

- [👍快捷启动工具 Dawnlauncher](https://dawnlauncher.com/)

工具收集汇总

- [老牌bootcss](https://v5.bootcss.com/docs/components/toasts/)

- [谷歌的一款](https://m2.material.io/components/banners/web#using-banners)
- [Bulma样式](https://bulma.io/documentation/overview/)






# Vue 相关 🎀

- [Vue.js 的头号组件库 Vuetify](https://vuetifyjs.com/en/components/buttons/)
- [也很不错的Quasar](https://quasar.dev/layout/gallery)
- [buefy](https://buefy.org/)

样式库选择

> 信号量作用用于控制对有限资源的访问





# 😀 主要操作

P（Proberen，尝试）操作：这个操作会尝试减少信号量的值。如果信号量的值大于零，那么它会被减一，表示请求资源成功。如果信号量的值为零，那么执行 P 操作的线程会被阻塞，直到信号量的值变为正数。

V（Verhogen，增加）操作：这个操作会增加信号量的值。每当有线程释放资源时，它会执行 V 操作。当信号量的值增加时，可能会唤醒因执行 P 操作而阻塞的线程。

# 🎀 相关代码

` System.Threading.Semaphore `

基于操作系统，适用于跨进程同步

` System.Threading.SemaphoreSlim ` 

轻量级版本，适用于同一进程内的线程同步，性能更高


# 🃏 示例Demo

```csharp

private static SemaphoreSlim semaphore = new SemaphoreSlim(3); // 允许最多 3 个线程同时访问资源

    static void Main(string[] args)
    {
        Task[] tasks = new Task[10];

        for (int i = 0; i < 10; i++)
        {
            tasks[i] = Task.Run(() => AccessResource());
        }

        Task.WaitAll(tasks);
    }

    static void AccessResource()
    {
        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 正在等待访问资源...");
        semaphore.Wait(); // P 操作

        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 已获得访问权限");
        Thread.Sleep(1000); // 模拟资源访问

        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 已释放访问权限");
        semaphore.Release(); // V 操作
    }

```