前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端框架搭建

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

作者头像
追逐时光者
发布于 2023-07-09 02:30:07
发布于 2023-07-09 02:30:07
28700
代码可运行
举报
文章被收录于专栏:编程进阶实战编程进阶实战
运行总次数:0
代码可运行

前言

  前面的章节我们介绍了一些值得推荐的Blazor UI组件库,通过该篇文章的组件库介绍最终我选用Ant Design Blazor这个UI框架作为ToDoList系统的前端框架。因为在之前的工作中有使用过Ant Design Vue、Ant Design Angular习惯并且喜欢Ant Design设计规范和风格,废话不多说今天我们先把ToDoList系统的Ant Design Blazor前端框架搭建起来。

Ant Design Blazor源码地址:https://github.com/ant-design-blazor/ant-design-blazor

MongoDB从入门到实战的相关教程

MongoDB从入门到实战之MongoDB简介👉

MongoDB从入门到实战之MongoDB快速入门👉

MongoDB从入门到实战之Docker快速安装MongoDB👉

MongoDB从入门到实战之MongoDB工作常用操作命令👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(1)-后端项目框架搭建👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(2)-Swagger框架集成👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(3)-系统数据集合设计👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(4)-MongoDB数据仓储和工作单元模式封装👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(5)-MongoDB数据仓储和工作单元模式实操👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(6)-Blazor介绍和快速入门👉

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(7)-Blazor UI框架选型👉

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

YyFlight.ToDoList项目源码地址

欢迎各位看官老爷review,有帮助的别忘了给我个Star哦💖!!!

GitHub地址:https://github.com/YSGStudyHards/YyFlight.ToDoList

安装.NET 7SDK

  本机上没有安装.NET 7 SDK的同学需要先安装好开发环境,安装地址:https://dotnet.microsoft.com/en-us/download/dotnet/7.0

新建YyToDoBlazor应用

注意:我们ToDoList系统Blazor应用选用Wasm托管模式来进行开发。

AntDesign.Templates:是一个开箱即用的中台前端/设计解决方案,提供了丰富的前端组件和布局,适用于构建中后台管理系统、企业级应用等。它基于 Ant Design Pro 框架,并为 Blazor 项目提供了模板和脚手架,Blazor 项目模板(Ant Design Pro)。

安装AntDesign.Templates模板

进入项目目录,cmd打开终端:

使用以下命令安装AntDesign.Templates 模板:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
dotnet new install AntDesign.Templates

模板创建 Ant Design Blazor Pro 项目

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
dotnet new antdesign -o YyToDoBlazor

-- 使用下面命令创建Ant Design Blazor Pro 项目会生成所有 Ant Design Pro 页面

模板的参数:

参数

说明

类型

认 值

-f | --full

如果设置这个参数,会生成所有 Ant Design Pro 页面

bool

false

-ho | --host

指定托管模型

'wasm' | 'server' | 'hosted'

'wasm'

--no-restore

如果设置这个参数,就不会自动恢复包引用

bool

false

添加现有项目到解决方案中

预览效果

新增Blazor组件页面

菜单路由配置

BasicLayout.razor 定义了网站的整体页面结构,通常包括顶部导航栏、侧边菜单栏、内容区域和底部页脚等。它提供了一个常用的布局模板,可以快速构建具有统一风格的页面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    private readonly MenuDataItem[] _menuData =
    {
        new MenuDataItem
        {
            Path = "/Dashboard",
            Name = "Dashboard",
            Key = "Dashboard",
            Icon = "bulb",
        },
        new MenuDataItem
        {
            Path = "/ToDoList",
            Name = "待办清单",
            Key = "ToDoList",
            Icon = "book",
        },
        new MenuDataItem
        {
            Path = "/User",
            Name = "个人信息",
            Key = "User",
            Icon = "user",
        },
        new MenuDataItem
        {
            Path = "/SystemSetting",
            Name = "系统更新",
            Key = "SystemSetting",
            Icon = "setting",
        }
    };

预览效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
2 条评论
热度
最新
IT行业,其实入门还是很简单的,但要是做好、做精、做专就很难很难了。还是要踏踏实实的学习。
IT行业,其实入门还是很简单的,但要是做好、做精、做专就很难很难了。还是要踏踏实实的学习。
回复回复点赞举报
当年我在实体纸质草稿本上用 html 写了 你好世界!后来在Windows 7上用记事本写了多元素组成的单页、之后在Windows10专业版上用着 VS2017企业版写大前端。
当年我在实体纸质草稿本上用 html 写了 你好世界!后来在Windows 7上用记事本写了多元素组成的单页、之后在Windows10专业版上用着 VS2017企业版写大前端。
回复回复点赞举报
推荐阅读
职业选择:开发VS测试
今天,来聊聊职业选择问题。对于每一个进入IT行业的人,不管是计算机科班出身,或者是半路转行,入行前可能都面临着这样的问题。
测试小牛
2022/04/26
6430
专访 | 商汤HPC负责人刘文志(风辰):未来战略的两大方向及招人的4个标准
记者 | 鸽子 前不久,商汤刚刚完成了4.1亿美金的B轮融资,创下了人工智能领域最大融资金额的记录。 据业界人士透露,之所以能完成这次巨大数额融资,一方面是因为商汤的算法在整个行业处于绝对领先的地位,另一方面,商汤的HPC部门十分强悍,近几年取得了不少突破性进展。 正是由于这样的突破,让投资方相信,商汤在未来完全有能力支撑其在商业化道路中的各项业务,稳步前进。 HPC,英文全称为High Performance Computing ——高性能计算,这是近一两年来随着深度学习的崛起,才逐渐进入人们视野的一
AI科技大本营
2018/04/27
2.5K0
专访 | 商汤HPC负责人刘文志(风辰):未来战略的两大方向及招人的4个标准
风口上的低代码:诱人的故事,危险的豪赌
在维格表、轻流等拿到数千万元的A+轮融资后,百特云享和伙伴云也在近期披露了数千万元A轮融资的消息。短短几年时间里,国内低代码市场已经出现了数十家创业者,其中不少企业已经拿到上千万元的融资。
Alter聊科技
2023/01/12
1890
效果广告点击率预估近期实践:在线学习
本文介绍了分布式深度学习在点击率预估中的应用,并总结了相关的技术实现和优化手段。主要内容包括:基于模型的点击率预估方法、基于分布式架构的深度学习模型训练、模型在线学习以及系统优化。这些技术可以有效地提高点击率预估的精度和实时性,具有广泛的应用场景和巨大的商业价值。
阁主的小跟班
2016/12/28
3.2K0
首个谷歌TensorFlow安全风险被腾讯找到:攻击成本低、迷惑性强
李根 发自 凹非寺 量子位 报道 | 公众号 QbitAI 首个TensorFlow安全风险被找到! 利用该风险,攻击者可以生成Tensorflow的恶意模型文件,对AI研究者进行攻击,对受害者自
量子位
2018/03/22
7400
首个谷歌TensorFlow安全风险被腾讯找到:攻击成本低、迷惑性强
实访用人单位:Prompt 工程师真是低门槛“香饽饽”?
15-50k 的月薪,另外还有年终奖和其他福利,你所要做的,就是研究、分析、设计在用汉语或英语做输入的情况下,更准确地描述业务想要做的事情,听起来是不是很难以置信?
深度学习与Python
2023/08/09
1.6K0
实访用人单位:Prompt 工程师真是低门槛“香饽饽”?
逃离 AI 赛道的投资人:做局失利、破局无力
“国内早些时候的风投圈,像是一个巨婴国。”一位退隐江湖的知名投资人任天扬(化名)向雷锋网感慨道。
AI科技评论
2021/11/05
4780
逃离 AI 赛道的投资人:做局失利、破局无力
谈谈人脸关键点的江湖
人脸关键点检测是一个非常核心的算法业务,应用广泛。比如我们常用的换脸、换妆、人脸特效等2C应用中的功能,都需要先进行人脸关键点的检测,然后再进行其他的算法业务处理;在一些2B的业务场景中也都有涉及,如疲劳驾驶中对人脸姿态的估计,人脸识别前的人脸对齐等。
Amusi
2020/06/11
1.7K0
谈谈人脸关键点的江湖
抖音电商前端架构师手把手教你 Koa 开发
目前大型互联网公司对于前端工程师的需求越来越大,一些高级的前端岗位依然非常缺人,候选人的面试通过率却非常低。究其原因,这些互联网公司对于前端工程师的要求越来越高,它们希望候选人不局限于掌握浏览器,也要掌握一些偏后端的技能。
五月君
2022/05/19
9100
抖音电商前端架构师手把手教你 Koa 开发
对话 HiDream.ai 梅涛:做一家对标 MJ 和 SD 的公司,比扎堆做 LLM 机会更大|AGI十人谈
梅涛2002年底就进入了微软,博士5年,他有3年半都在微软度过。2006年他拿到博士毕业证后,继续回到微软工作,直到12年后才离开微软亚洲研究院。
AI科技评论
2023/08/08
4880
对话 HiDream.ai 梅涛:做一家对标 MJ 和 SD 的公司,比扎堆做 LLM 机会更大|AGI十人谈
AutoML破解深度学习寒冬论,夏粉教小白5分钟搞定机器学习建模
新智元报道 作者:克雷格 【新智元导读】昨天,国内AutoML领域创业公司智铀科技发布了自动化机器学习产品“小智”,据公开数据显示,这是国内首款可私有部署的AutoML商用产品。新智元创始人杨静女
新智元
2018/06/22
6750
MCtalk·CEO对话×酷家乐:从智能涌现到应用涌现,AI在B端做了哪些事?
2015 年 10 月,网易数智发布第一款产品,正式踏上了 ToB 商业化之路。从那以后,网易数智每年举办不同主题的科技峰会,分享最新的行业体感和洞察;访谈各界企业领导者,记录他们的创新与创业经历;走过大大小小的城市,在一场场城市论坛中与开发者相见;在线上直播间,还原产品迭代的每一个细节… 数不清的科技峰会、跨界访谈、城市论坛、线上直播如长流的细水,影响了超过数百万人。
ToB行业头条
2024/07/25
1870
MCtalk·CEO对话×酷家乐:从智能涌现到应用涌现,AI在B端做了哪些事?
张一鸣:为什么 BAT 挖不走我们的人才?
很多企业失败的时候,总说是政策的变化、市场的变化、消费者需求的变化、技术发展的变化等等,导致了失败,其实这都是瞎说,归根结底还是人的原因,都是因为你招的人不行。可见,人才对于一个企业的重要性。
芋道源码
2020/02/20
6710
张一鸣:为什么 BAT 挖不走我们的人才?
效果广告点击率预估实践:在线学习
1.引言 技术钻研如逆水行舟,不进则退。公司的广告业务发展非常迅猛,有目共睹,激烈的外部竞争和客户越来越高的期望,都要求我们的技术不断进步;与此同时,我们也的确在生产实践中遇到了不少的技术问题和挑战,这些都促使我们在技术上不断的尝试突破。经过两年多时间的技术钻研和应用实践,同发表上一篇KM文章时的技术状态相比,团队和项目在技术架构和一些关键技术点上都向前迈进了一大步。我们打算通过几篇文章做一个简单的经验分享,这些文章会按照在线学习和深度学习两个技术方向做一个大致的划分。笔者会以两篇文章作为整个系列的开头,团
腾讯大数据
2018/01/29
9360
效果广告点击率预估实践:在线学习
为什么我说未来10年是AI和运维的天下
嗯,对于每个要就业的人来说,这个确实是一个很重要的问题。我们总希望找一个好的方向,然后一干一辈子。不论这个愿望是不是最终能够实现吧,至少转行的成本越低越好。
刀刀老高
2019/05/05
9620
为什么我说未来10年是AI和运维的天下
111. 精读《前端未来展望》
前端展望的文章越来越不好写了,随着前端发展的深入,需要拥有非常宽广的视野与格局才能看清前端的未来。
黄子毅
2022/03/14
4000
Spring Cloud Alibaba实战派作者,告诉你程序员如何破解35岁危机?
学习是一件需要长期投入的事情,尤其是在当下大环境恶劣的背景下,我们程序员必须要多多的投资自己,去加强自己的技术硬实力和软实力。
35岁程序员那些事
2022/09/23
3710
亏损7年,找对CTO,VIPKID终于赚钱了
前不久,VIPKID 宣布,公司单位运营利润 (UE) 连续两个季度为正,90% 的渠道首单实现盈利。VIPKID 表示,公司由此成为国内唯一一家收入在百亿级规模且实现 UE 转正的在线教育企业。
深度学习与Python
2020/09/14
5930
安全从业人员的职业规划
工作日久,会接到一些朋友关于专业就业、职业规划的问题。自从开通“君哥的体历”以来,也会收到后台留言,提及职业规划,以及有关工作迷茫的问题。
信安之路
2019/08/20
2.5K0
安全从业人员的职业规划
以细节诠释专业,用成长定义价值——对话@孟同学 |得物技术
在得物技术部,「稳定」「效率」「体验」「成长」「创新」是我们的关键词。这些关键词就像是战略航行的导航系统:在短期诱惑前构筑认知屏障,筛选干扰项;在组织进化中沉淀文化基因,保持创新。其中的「成长」就意味着专业深耕中永不自满的自我迭代、跨边界协作中主动打破能力天花板的勇气,以及在成就业务目标的同时构建个人价值护城河的清醒认知。
得物技术
2025/05/12
650
以细节诠释专业,用成长定义价值——对话@孟同学 |得物技术
推荐阅读
相关推荐
职业选择:开发VS测试
更多 >
LV.2
亚信科技高级架构师
目录
  • 前言
  • MongoDB从入门到实战的相关教程
  • YyFlight.ToDoList项目源码地址
  • 安装.NET 7SDK
  • 新建YyToDoBlazor应用
    • 安装AntDesign.Templates模板
    • 模板创建 Ant Design Blazor Pro 项目
    • 添加现有项目到解决方案中
    • 预览效果
  • 新增Blazor组件页面
  • 菜单路由配置
  • 预览效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档