MVC + EFCore 項目實戰 - 數倉管理系統3 - 完成整體樣式風格配置

来源:https://www.cnblogs.com/miro/archive/2020/07/08/13264923.html

上次課程我們新建了管理員的模板頁。 本次我們就完善這個模板頁,順便加入樣式和一些基本的組件,配置好整個項目的UI風格。 一、引入 共用的css和js文件 後端庫用nuget, 前端庫用libman. 右鍵wwwroot文件夾,選擇菜單 Add / Client-Side Library 我們使用ad ...


上次課程我們新建了管理員的模板頁。

本次我們就完善這個模板頁,順便加入樣式和一些基本的組件,配置好整個項目的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裡面。

* jquery和bootstrap在vs模板中已有,我們可以不需要再用libman來管理。

 

修改整個文檔的結構

我們把文檔分成三部分:標題欄、側邊欄、內容塊。

最後我們用個div把這三個部分都包起來,方便代碼的展開收合。

緊跟著Body後面,結構如下:

 

下麵我們來逐步填充這三部分

官方網站 https://adminlte.io/ 給出了示例代碼,我們直接從示例代碼中粘貼修改即可快速完成前端展示頁面的樣式。

1、標題欄

由於Admin-LTE標題欄會用到一些第三方圖標,打開地址https://fontawesome.com/ 下載。

(如果網站打不開,也可以搜索fontawesome-free從其他網站下載)

我們在wwwroot/lib/admin-lte下新建個plugins文件夾,專門用來存放這些組件。

 

添加相關引用

 

我們加兩個鏈接,導航到新建項目預設生成的兩個視圖上,最終的標題欄代碼:

 

2、側邊欄

分兩部分,LOGO和側邊欄菜單,如下:

 

代碼:

 

3、內容塊

最後是內容塊。

 

 

 

三、使用管理員模板頁

1、新建View使用模板頁

打開 Controllers/HomeController.cs文件,增加一個action及相應的view

增加action

 

右鍵方法名,增加view,

 

2、運行查看並微調

我們再來調整兩個小問題:

如果將側邊欄摺疊起來,側邊欄會完全消失,如下圖:

我們需要給一個寬度,這樣可以看到菜單的圖標。做法很簡單,直接在body中應用 class="sidebar-mini",摺疊起來的效果如下。

另外,我們再增加一個底部欄,放一些版權信息啥的。最終的代碼結構如下:

 

 

最終效果圖

 

總結

本次教程我們完成了UI模板的修改。 註意兩點:

1、學會使用libman來管理前端庫。

2、熟悉前端UI框架admin-lte的基本結構,並熟練修改。對前端不熟悉的同學來說,熟練使用一套成熟的UI框架能節約不少時間。

 

祝大家學習進步 :)

 


您的分享是我們最大的動力!

更多相關文章
  • 1. 通過new對象實現反射機制( 對象.getClass() ) 2. 通過路徑實現反射機制( Class.forName("包名.類名") ) 3. 通過類名實現反射機制 ( 類名.Class ) class Student { private int id; String name; prot ...
  • 一個微小的投入就會帶來巨大的突變 集群安全模式 為什麼出現集群安全模式呢? ​ Namenode啟動時,首先將鏡像文件載人記憶體,並執行編輯日誌中的各項操作。一旦在內存中成功建立文件系統元數據的映像,則創建一個新的Fsimage文件和一個空的編輯日誌。此時,** Namenode開始監聽Datanod ...
  • 從事這麼多年的.NET,這段時間來,學習另外一門技術Python。 購買相關的書籍,不停地看書。 然後在VS安裝Python,然後可以上機練習,編寫代碼...... ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 在上面博客中已經將網站部署到了IIS上。 但是如果網站很大,頁面比較多,甚至每個頁面都有不少 ...
  • 用C#代替Javascript來做Web應用,是有多爽? 今天聊聊 Blazor。 Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。 可以理解為,這是一個 C# 語言的 Vue / Angular / React,可 ...
  • --先給GridView控制項註冊滑鼠按下事件gv.MouseDown += new System.Windows.Forms.MouseEventHandler(this.gv_MouseDown); --在滑鼠按下事件裡面增加滑鼠右鍵判斷,並增加滑鼠右鍵菜單複製單元格功能。 private voi ...
  • 場景 ASP.NET中新建MVC項目並連接SqlServer資料庫實現增刪改查: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107024544 在上面實現了新建簡單的MVC項目以及連接資料庫實現簡單的增刪改查後怎樣將網站部署到 ...
  • 場景 在使用IIS部署ASP.NET的Web項目時提示: InvalidOperationException:未能映射路徑“/” 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...