NCF 的Azure Cosmos DB 演示案例

簡介

NCF想必看過我之前發的NCF的文章的同學們都已經很熟悉了

今天我們要來聊一聊的是NCF遇到Azure Cosmos DB後會碰撞出什麼樣的火花，讓我們一起往下看

我們先來說說什麼是Azure Cosmos DB

Azure Cosmos DB 是一個完全託管的無服務器 NoSQL 數據庫，適用於任何大小或規模的高性能應用程序。獲得保證的單位數毫秒性能和 99.999% 的可用性，由 SLA 提供支持，自動和即時可伸縮性，適用於 NoSQL 數據庫(包括 MongoDB 和 Cassandra)的企業級安全性和開源 API。使用多區域寫入和數據複製，在全球任何位置享受快速寫入和讀取功能。使用適用於 Azure Cosmos DB 的 Azure Synapse Link，通過無 ETL (提取、轉換、加載)分析獲取實時數據的見解。

主要優勢

保證任何規模的速度（獲得無與倫比的 SLA 支持的速度和吞吐量、快速的全局訪問和即時彈性）

簡化應用程序的開發（使用開源 API、多個 SDK、無架構數據和對操作數據的無 ETL 分析進行快速構建。）

關鍵任務就緒（保證每個應用程序的業務連續性、99.999% 的可用性和企業級安全性。）

完全託管和經濟高效（端到端數據庫管理，具有與應用程序和 TCO 需求相匹配的無服務器和自動縮放功能）

Azure Synapse Link for Azure Cosmos DB（Azure Synapse Link for Azure Cosmos DB 是一種雲原生混合事務和分析處理 (HTAP) 功能，可實現對 Azure Cosmos DB 中的操作數據進行準實時分析。 Azure Synapse Link 在 Azure Cosmos DB 和 Azure Synapse Analytics 之間建立緊密無縫的集成。）

步驟

下載NCF源碼
打開Visual Studio，切換分支到master
修改數據庫配置
運行NCF
安裝Xncf模塊生成器
生成Azure Cosmos DB的Xncf模塊
安裝Azure Cosmos DB的Xncf模塊
在Azure Cosmos DB模塊中引入ML.Blend
建立管理Cosmos DB的界面
編寫管理Cosmos DB的方法
處理頁面上的數據展示方式
對比Cosmos DB Emulator的數據
自由發揮

實施

下載NCF源碼

下載地址：https://github.com/NeuCharFramework/NCF (歡迎大家Star)

分支：master

打開Visual Studio，切換分支到master

修改數據庫配置

打開數據庫配置文件

修改Sql-Server節點的內容，如下所示

修改這三個位置即可

運行NCF

安裝Xncf模塊生成器

點擊黃色背景區域的後邊的按鈕安裝

點擊開啓模塊生成器

生成Azure Cosmos DB的Xncf模塊

選擇生成XNCF,輸入對應的參數，即可生成模塊，這裏以Azure Cosmos DB模塊爲例

安裝Azure Cosmos DB的Xncf模塊

進入主頁的頁面如上圖所示。

在Azure Cosmos DB模塊中引入nuget包ML.Blend

需要加載0.2.26的版本，裏面對Azure Cosmos DB的Core Api進行了優化，方便大家快速的完成應用

建立管理Cosmos DB的界面

創建一個管理的界面

在Register.Area中增加一個菜單的選項來進入CosmosDB的管理界面

編寫管理Cosmos DB的方法

創建頁面上的UI界面樣式

@page
@model ML.Xncf.CosmosDB.Areas.Admin.Pages.CosmosDB.ManageModel
@{
    ViewData["Title"] = "Azure Cosmos DB Manage";
    Layout = "_Layout_Vue";
}
@*參考網址：https://element.eleme.cn/#/zh-CN/component/table*@
@section HeaderContent{
<style>
    .mb-10 {
        margin-bottom: 10px;
    }
</style>
}

@section breadcrumbs {
<el-breadcrumb-item>擴展模塊</el-breadcrumb-item>
<el-breadcrumb-item>Azure Cosmos DB</el-breadcrumb-item>
<el-breadcrumb-item>管理</el-breadcrumb-item>
}

<div>
    <el-container class="mb-10">
        <el-row>
            <el-button @@click="addItem()" type="primary">添加</el-button>
            <el-button @@click="toggleSelection([cosmosData[0], cosmosData[1]])">選中前2行</el-button>
            <el-button @@click="toggleSelection()">取消選擇</el-button>
        </el-row>
    </el-container>
    <el-container>
        <el-table tooltip-effect="dark"
                  ref="multipleTable"
                  :data="cosmosData.filter(data => !search ||
            data.lastName.toLowerCase().includes(search.toLowerCase()))"
                  style="width: 100%"
                  @@selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             show-overflow-tooltip="true"
                             width="55">
            </el-table-column>
            <el-table-column label="Id"
                             prop="id">
            </el-table-column>
            <el-table-column label="Key"
                             prop="partitionKey">
            </el-table-column>
            <el-table-column label="LastName"
                             prop="lastName">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search"
                              size="mini"
                              placeholder="輸入關鍵字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini"
                               @@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="mini"
                               type="danger"
                               @@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-container>
</div>

以上代碼內容完全可以參考Element UI中的組件部分，找到自己想使用的，直接使用就好了

創建界面上的對應數據及按鈕需要調用的事件和方法

@section scripts{
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                moduleData: null,
                uid: '',
                search: '',
                tableData: [],
                cosmosData:[],
                multipleSelection: []
            }
        },
        computed: {
            backgroundColor() {
                let rgba = `rgba(${this.moduleData.colorDto.red},${this.moduleData.colorDto.green},${this.moduleData.colorDto.blue},1)`
                return rgba;
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            async getList(){
                const res = await service.get('/Admin/CosmosDB/Manage?handler=List');
                this.cosmosData = res.data.data;
            },
            async addItem(){
                const res = await service.get('/Admin/CosmosDB/Manage?handler=Add');
                this.getList();
            },
            async handleEdit(index, row) {
              console.log(index, row);
              const res = await service.get('/Admin/CosmosDB/Manage?handler=Edit&id=' + row.id + '&key=' + row.partitionKey);
              this.getList();
            },
            async handleDelete(index, row) {
              console.log(index, row);
              const res = await service.get('/Admin/CosmosDB/Manage?handler=Delete&id=' + row.id + '&key=' + row.partitionKey);
              this.getList();
           },
           toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
        }
    });
</script>
}

這是上一步中UI界面上對應的按鈕，Table組件需要調用的數據請求及按鈕觸發的方法

創建CosmosDBService來處理增刪改查的業務

在Domain/Services下創建業務類CosmosDBService

public class CosmosDBService
    {
        private string strEndpointUrl = "https://localhost:8081";
        private string strPrimaryKey = "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
        private string strApplicationName = "CosmosDBDotnetQuickstart";
        private string DatabaseName = "db01";
        private string ContainerName = "c01";

        public CosmosDBService()
        {
        }

        public async Task<List<Family>> GetList()
        {
            CoreApi coreApi = new CoreApi(strEndpointUrl, strPrimaryKey, strApplicationName);
            await coreApi.CreateDatabaseIfNotExistsAsync("TODOList01");
            await coreApi.CreateContainerAsync(ContainerName);
            await coreApi.ScaleContainerAsync();
            await coreApi.AddItemsToContainerAsync();
            var sqlQueryText = "SELECT * FROM c WHERE 1=1 ";
            var result = await coreApi.QueryItemsAsync<Family>(sqlQueryText);
            return result;
        }

        public async Task AddItem()
        {
            CoreApi coreApi = new CoreApi(strEndpointUrl, strPrimaryKey, strApplicationName);
            await coreApi.CreateDatabaseIfNotExistsAsync("TODOList01");
            await coreApi.CreateContainerAsync(ContainerName);
            await coreApi.ScaleContainerAsync();
            string strName = "MartyZane";
            Family andersenFamily = new Family
            {
                Id = $"{strName}{DateTime.Now.ToString("yyyyMMddHHmmssfff")}",
                PartitionKey = $"{strName}{DateTime.Now.ToString("yyyyMMddHHmmssfff")}",
                LastName = $"{strName}{DateTime.Now.ToString("yyyyMMddHHmmssfff")}",
                Parents = new Parent[]
                {
                    new Parent { FirstName = "Thomas" },
                    new Parent { FirstName = "Mary Kay" }
                },
                Children = new Child[]
                {
                    new Child
                    {
                        FirstName = "Henriette Thaulow",
                        Gender = "female",
                        Grade = 5,
                        Pets = new Pet[]
                        {
                            new Pet { GivenName = "Fluffy" }
                        }
                    }
                },
                Address = new Address { State = "WA", County = "King", City = "Seattle" },
                IsRegistered = false
            };
            await coreApi.AddItemsToContainerAsync<Family>(andersenFamily, andersenFamily.Id, andersenFamily.PartitionKey);
        }

        public async Task UpdateItem(string id, string key)
        {
            CoreApi coreApi = new CoreApi(strEndpointUrl, strPrimaryKey, strApplicationName);
            await coreApi.CreateDatabaseIfNotExistsAsync("TODOList01");
            await coreApi.CreateContainerAsync(ContainerName);
            await coreApi.ScaleContainerAsync();
            await coreApi.ReplaceFamilyItemAsync(id,key);
        }

        public async Task DeleteItem(string id,string key)
        {
            CoreApi coreApi = new CoreApi(strEndpointUrl, strPrimaryKey, strApplicationName);
            await coreApi.CreateDatabaseIfNotExistsAsync("TODOList01");
            await coreApi.CreateContainerAsync(ContainerName);
            await coreApi.ScaleContainerAsync();
            await coreApi.DeleteFamilyItemAsync(id,key);
        }
    }

以上源碼，是所有的Service中的業務方法

在頁面的調用方法中

在此文件中加入替換下面的源碼

public class ManageModel : Senparc.Ncf.AreaBase.Admin.AdminXncfModulePageModelBase
    {
        private readonly IServiceProvider serviceProvider;

        public ManageModel(IServiceProvider serviceProvider, Lazy<XncfModuleService> xncfModuleService) : base(xncfModuleService)
        {
            this.serviceProvider = serviceProvider;
        }

        public async Task<IActionResult> OnGetListAsync()
        {
            CosmosDBService cosmosDBService = new CosmosDBService();
            var result = await cosmosDBService.GetList();
            return Ok(result);
        }

        public async Task<IActionResult> OnGetAddAsync()
        {
            CosmosDBService cosmosDBService = new CosmosDBService();
            cosmosDBService.AddItem();
            return Ok("200");
        }

        public async Task<IActionResult> OnGetEditAsync(string id, string key)
        {
            CosmosDBService cosmosDBService = new CosmosDBService();
            cosmosDBService.UpdateItem(id,key);
            return Ok("200");
        }

        public async Task<IActionResult> OnGetDeleteAsync(string id,string key)
        {
            CosmosDBService cosmosDBService = new CosmosDBService();
            cosmosDBService.DeleteItem(id,key);
            return Ok("200");
        }
    }

以上內容就是我們今天要聊的實例的所有源碼

處理頁面上的數據展示方式

經過上面的操作後，呈現出來的樣子如圖所示，列表的展示，查詢，添加，修改，刪除功能就全部擁有了。

那麼這些數據有沒有工具可以可視化的查看呢？

答案：是肯定的，就是我們馬上要聊的Azure Cosmos DB Emulator

對比Cosmos DB Emulator的數據
- 下載Cosmos DB Emulator的工具
  下載地址：https://aka.ms/cosmosdb-emulator
- 運行Cosmos DB Emulator
  
  圖中展示的是Azure Cosmos DB的首頁
- 操作管理的模塊
  
  這個是數據的資源管理器，可以點擊查看的數據的內容
- 對比數據
  當我們在NCF操作了增刪改數據的操作之後，那麼可以直接到Emulator中去對應數據查看是否正確
  
  還可以根據自己的查詢條件來快速查詢數據
  
  查詢的語句沿用了SQL Server的一些語法，大家可以去嘗試一下
- 查看請求性能
  最後我們來看看使用Azure Cosmos DB的性能如何
  
  平均的請求效率在幾十毫秒，所以這個Azure Cosmos DB可以作爲我們另外的一個管理數據的選擇之一
自由發揮

到此一個NCF集成Azure Cosmos DB的Demo實例就完整展示了，希望能夠幫助到您。

後期精彩內容（敬請關注）

NCF 的Azure Cosmos DB 演示案例

簡介

主要優勢

保證任何規模的速度（獲得無與倫比的 SLA 支持的速度和吞吐量、快速的全局訪問和即時彈性）

簡化應用程序的開發（使用開源 API、多個 SDK、無架構數據和對操作數據的無 ETL 分析進行快速構建。）

關鍵任務就緒（保證每個應用程序的業務連續性、99.999% 的可用性和企業級安全性。）

完全託管和經濟高效（端到端數據庫管理，具有與應用程序和 TCO 需求相匹配的無服務器和自動縮放功能）

步驟

實施

《日本蠟燭圖》讀書筆記 & 技術分析回測

Python多線程編程深度探索：從入門到實戰

《期貨-市場技術分析》讀書筆記

mongodb處理json數據很好

頂級 Javaer 都在用的 20 個類庫，真香！

[轉帖]cpupower

google瀏覽器插件開發

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

發佈並部署NCF站點的那些事

基於NCF的多模塊協同實例

NCF 的Azure Cosmos DB 演示案例

NCF 的Dapr應用實例的運行

NCF對接Dapr之旅系列-初識Dapr

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結