离尘公子 發表於 2023-6-29 23:05:00

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建

<h2>前言</h2>
<p>　　前面的章节我们介绍了一些值得推荐的Blazor UI组件库，通过该篇文章的组件库介绍最终我选用Ant Design Blazor这个UI框架作为ToDoList系统的前端框架。因为在之前的工作中有使用过Ant Design Vue、Ant Design Angular习惯并且喜欢Ant Design设计规范和风格，废话不多说今天我们先把ToDoList系统的Ant Design Blazor前端框架搭建起来。</p>
<blockquote>
<p>Ant Design Blazor源码地址：https://github.com/ant-design-blazor/ant-design-blazor</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230628231235754-1212516920.png" alt="" loading="lazy"></p>
<h2>MongoDB从入门到实战的相关教程</h2>
<p>MongoDB从入门到实战之MongoDB简介👉</p>
<p>MongoDB从入门到实战之MongoDB快速入门👉</p>
<p>MongoDB从入门到实战之Docker快速安装MongoDB👉</p>
<p>MongoDB从入门到实战之MongoDB工作常用操作命令👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（1）-后端项目框架搭建👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（2）-Swagger框架集成👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（3）-系统数据集合设计👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（4）-MongoDB数据仓储和工作单元模式封装👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（5）-MongoDB数据仓储和工作单元模式实操👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（6）-Blazor介绍和快速入门👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（7）-Blazor UI框架选型👉</p>
<p>MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建👉</p>
<h2>YyFlight.ToDoList项目源码地址</h2>
<p><span style="color: rgba(255, 0, 0, 1)"><strong>欢迎各位看官老爷review，有帮助的别忘了给我个Star哦💖！！！</strong></span></p>
<blockquote>
<p>GitHub地址：https://github.com/YSGStudyHards/YyFlight.ToDoList</p>
</blockquote>
<h2>安装.NET 7SDK</h2>
<p>　　本机上没有安装.NET 7 SDK的同学需要先安装好开发环境，安装地址：https://dotnet.microsoft.com/en-us/download/dotnet/7.0。</p>
<h2>新建YyToDoBlazor应用</h2>
<p>注意：我们ToDoList系统Blazor应用选用Wasm托管模式来进行开发。</p>
<blockquote>
<p>AntDesign.Templates：是一个开箱即用的中台前端/设计解决方案，提供了丰富的前端组件和布局，适用于构建中后台管理系统、企业级应用等。它基于 Ant Design Pro 框架，并为 Blazor 项目提供了模板和脚手架，Blazor 项目模板（Ant Design Pro）。</p>
</blockquote>
<h3>安装AntDesign.Templates模板</h3>
<p>进入项目目录，cmd打开终端：</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629211556369-649427131.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629211611371-642963238.png" alt="" loading="lazy"></p>
<p>使用以下命令安装AntDesign.Templates 模板：</p>
<div class="cnblogs_code">
<pre>dotnet <span style="color: rgba(0, 0, 255, 1)">new</span> install AntDesign.Templates</pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629211818959-2117746824.png" alt="" loading="lazy"></p>
<h3>模板创建 Ant Design Blazor Pro 项目</h3>
<div class="cnblogs_code">
<pre>dotnet <span style="color: rgba(0, 0, 255, 1)">new</span> antdesign -o YyToDoBlazor<br><br>-- 使用下面命令创建Ant Design Blazor Pro 项目会生成所有 Ant Design Pro 页面</pre>
<pre>dotnet new antdesign -o YyToDoBlazor --host wasm --force</pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212157163-1919536004.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212226718-760669242.png" alt="" loading="lazy"></p>
<p><strong>模板的参数：</strong></p>
<table>
<thead>
<tr><th>参数</th><th>说明</th><th>类型</th><th>认 值</th></tr>
</thead>
<tbody>
<tr>
<td><code>-f</code>&nbsp;|&nbsp;<code>--full</code></td>
<td>如果设置这个参数，会生成所有 Ant Design Pro 页面</td>
<td>bool</td>
<td>false</td>
</tr>
<tr>
<td><code>-ho</code>&nbsp;|&nbsp;<code>--host</code></td>
<td>指定托管模型</td>
<td>'wasm' | 'server' | 'hosted'</td>
<td>'wasm'</td>
</tr>
<tr>
<td><code>--no-restore</code></td>
<td>如果设置这个参数，就不会自动恢复包引用</td>
<td>bool</td>
<td>false</td>
</tr>
</tbody>
</table>
<h3>添加现有项目到解决方案中</h3>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212436819-1559092615.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212509831-937349599.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212525491-1742919010.png" alt="" loading="lazy"></p>
<h3>预览效果</h3>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629212949483-2083012234.png" alt="" loading="lazy"></p>
<h2>新增Blazor组件页面</h2>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629225943677-470079864.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629230101624-1800710706.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629230301146-764706999.png" alt="" loading="lazy"></p>
<h2>菜单路由配置</h2>
<p>BasicLayout.razor 定义了网站的整体页面结构，通常包括顶部导航栏、侧边菜单栏、内容区域和底部页脚等。它提供了一个常用的布局模板，可以快速构建具有统一风格的页面。</p>
<div class="cnblogs_code">
<pre>    <span style="color: rgba(0, 0, 255, 1)">private</span> <span style="color: rgba(0, 0, 255, 1)">readonly</span> MenuDataItem[] _menuData =<span style="color: rgba(0, 0, 0, 1)">
    {
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MenuDataItem
      {
            Path </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/Dashboard</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Name </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Dashboard</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Key </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Dashboard</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Icon </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">bulb</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
      },
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MenuDataItem
      {
            Path </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/ToDoList</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Name </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">待办清单</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Key </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ToDoList</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Icon </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">book</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
      },
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MenuDataItem
      {
            Path </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/User</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Name </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">个人信息</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Key </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">User</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Icon </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">user</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
      },
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MenuDataItem
      {
            Path </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/SystemSetting</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Name </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">系统更新</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Key </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">SystemSetting</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
            Icon </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">setting</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
      }
    };</span></pre>
</div>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629230429404-54271767.png" alt="" loading="lazy"></p>
<h2>预览效果</h2>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202306/1336199-20230629225846596-770524193.png" alt="" loading="lazy"></p>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    <blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【&hearts;推荐&hearts;】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/17453162.html
頁: [1]
查看完整版本: MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建