欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 - 完成整体样式气概设置

admin 3个月前 (07-08) 科技 37 0

上次课程我们新建了治理员的模板页。

本次我们就完善这个模板页,顺便加入样式和一些基本的组件,设置好整个项目的UI气概。

 

一、引入 共用的css和js文件

后端库用nuget, 前端库用libman.

右键wwwroot文件夹,选择菜单 Add / Client-Side Library

我们使用admin-lte作为前端UI。

输入admin-lte搜索会自动发生推荐的版本号,如下图,安装路径默认在wwwroot/lib/admin-lte文件夹。

 

安装完后,可以看到响应位置已经有了admin-lte相关文件。

而且项目根目录下会发生 libman.json 设置文件,我们可以直接修改这份设置文件来利便的治理客户端库(如新增、删除库,修改库版本号等, 而且vs编辑器也是有智能感知的)。

 

二、完善 治理员模板页

打开 Views/Shared/_LayoutAdmin.cshtml

首先引入响应的css和js文件

css放到head内里

 

js放到body内里。

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第1张

* jquery和bootstrap在vs模板中已有,我们可以不需要再用libman来治理。

 

修改整个文档的结构

我们把文档分成三部门:标题栏、侧边栏、内容块。

最后我们用个div把这三个部门都包起来,利便代码的睁开收合。

紧跟着Body后面,结构如下:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第2张

 

下面我们来逐步填充这三部门

官方网站 https://adminlte.io/ 给出了示例代码,我们直接从示例代码中粘贴修改即可快速完成前端展示页面的样式。

1、标题栏

由于Admin-LTE标题栏会用到一些第三方图标,打开地址https://fontawesome.com/ 下载。

(若是网站打不开,也可以搜索fontawesome-free从其他网站下载)

我们在wwwroot/lib/admin-lte下新建个plugins文件夹,专门用来存放这些组件。

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第3张

 

添加相关引用

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第4张

 

我们加两个链接,导航到新建项目默认天生的两个视图上,最终的标题栏代码:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第5张

 

2、侧边栏

分两部门,LOGO和侧边栏菜单,如下:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第6张

 

代码:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第7张

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第8张

 

3、内容块

最后是内容块。

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第9张

 

 

 

三、使用治理员模板页

1、新建View使用模板页

打开 Controllers/HomeController.cs文件,增添一个action及响应的view

增添action

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第10张

 

右键方法名,增添view,

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第11张

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第12张

 

2、运行查看并微调

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第13张

我们再来调整两个小问题

若是将侧边栏折叠起来,侧边栏会完全消逝,如下图:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第14张

我们需要给一个宽度,这样可以看到菜单的图标。做法很简单,直接在body中应用 class="sidebar-mini",折叠起来的效果如下。

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第15张

另外,我们再增添一个底部栏,放一些版权信息啥的。最终的代码结构如下:

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第16张

 

 

最终效果图

欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 完成整体样式气概设置 第17张

 

总结

本次教程我们完成了UI模板的修改。 注重两点:

1、学会使用libman来治理前端库。

2、熟悉前端UI框架admin-lte的基本结构,并熟练修改。对前端不熟悉的同砚来说,熟练使用一套成熟的UI框架能节约不少时间。

 

祝人人学习提高 :)

 

,

欧博亚洲注册

欢迎进入欧博亚洲注册(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

Sunbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:欧博亚洲网址:MVC + EFCore 项目实战 - 数仓治理系统3 - 完成整体样式气概设置

网友评论

  • (*)

最新评论

标签列表

    文章归档

      站点信息

      • 文章总数:649
      • 页面总数:0
      • 分类总数:8
      • 标签总数:1018
      • 评论总数:288
      • 浏览总数:11727