做一個官網需要多長時間
作者:小馬鈴薯
博客園:www.cnblogs.com/HouJiao/
掘金://juejin.cn/user/2436173500265335
1. 前言
最近在做一個官網,主頁菜單欄
有六項
,對應六個大的模塊,每個模塊的展示形式大致如下:
1.1 純圖片展示
一張主圖橫向鋪滿瀏覽器:
1.2 表格展示
1.3 圖片+文字左右兩列布局展示
第一種左右兩列布局:
第二種左右兩列布局:
1.4 圖片+文字上下兩行布局展示
1.5 12宮格三行四列的圖片展示
1.6 瀑布流式的圖片展示
1.7 動態效果
除了上面的那些布局之外,還有一些鼠標懸浮的動態效果
。
1.8 新聞資訊模塊
另外還有一個新聞資訊
模塊,可以查看新聞詳情
以及帶分頁
功能的新聞列表
。雖然沒有詳細討論這個模塊的具體內容,但是大概知道這個模塊可能還需要一個簡單的後台管理系統
去發佈
、編輯
文章。
2. 到底花了多長時間
當時看完設計稿就覺得這個官網的內容還是有點多的,因為很多布局都不太一樣,而且還需要一個後台管理系統
;最終經過一番思考,定下了3周
的工作量(不包含周末)。
最終大體做完花了兩周的時間,因為前期缺乏溝通出現UI
返工問題,後面還完善了一些功能,所以又花了一周時間,整體也算按時交付。
那接下就這個項目中的一些樣式
、功能
的實現以及整個過程中出現的一些問題總結出來,希望能給大家一些參考。
3. 本文適合那些人閱讀
- 想學習CSS技能,但不知道從何下手的
- 想簡單複習一下CSS技能
- 最近有意願做官網項目的
- 純前端開發,有意向入門後端,希望能獨立做一套完整但是又不複雜的前後端項目
4. 頁面布局和一些CSS效果
做官網這種項目,主要考驗一個人的CSS
功底,那在這個項目完成的過程中都用到了那些CSS
技巧呢?
定位
:相對定位、絕對定位彈性布局
:Flex布局百分比布局
文本溢出
: 單行文本溢出、多行文本溢出鼠標懸浮顯示遮罩
:利用display
和絕對定位
以上就是整個項目中用到的一些CSS
技巧,接下來我們就來複習一下這些內容和一些相關的實踐應用。
4.1 相對定位
元素設置相對定位
以後仍然在文檔流中佔據着自己原來的位置,通過設置top
、bottom
、left
、right
,可以使元素相對於原來的位置進行移動,相對定位不會影響其他元素的布局。
4.1.1 相對定位-應用1
在項目中,有下面這樣的例子就是利用相對定位
實現的。
我們基礎的布局是下面這樣的:
<p class="logo">公司<br/>logo</p> <!--這裡實際是img元素 -->
<p class="name">公司<br/>X<br/>名稱</p>
p.logo
後期直接替換成img
元素即可
正常情況下,上面的代碼瀏覽器渲染結果如下(尺寸需要通過CSS
設置):
此時我們可以通過給p.name
設置相對定位,並且設置其偏移量
就可以實現最終的效果。
p.name{
position: relative;
left: 100px;
}
4.1.2 相對定位-應用2
table
中有一列數據為名稱
,我們需要在數據前面加上對應的logo
。
其實正常情況下,不對logo
添加任何樣式,顯示出來是下面這樣的效果:
很明顯的能看出來logo
的位置並不是很合適:logo
應該垂直居中,同時增加和文字的間距。
增加logo
和文字之間的間距可以通過給logo
設置padding-right
或者margin-right
來實現。
調整logo
垂直居中一般會選擇vertical-align
,但是我們經常會發現vertical-algin
的效果總是不盡人意,那這個時候相對定位
就是非常好的選擇。我們可以對logo
設置相對定位,然後設置top
將logo
向下偏移。
.logo{
positive: relative;
top: 4px;
}
4.2 絕對定位
元素設置絕對定位以後,就會脫離正常文檔流,原先在文檔流中佔據的位置會被刪除,所以會影響它後面的元素。
為絕對定位的元素設置偏移量後,絕對定位的元素的位置是相對於最近的已定位祖先元素
,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊html
元素。
已定位
指的是設置了position:relative;
或者position:absolute;
。其中塊級元素
設置絕對定位
以後其內容將不再默認佔滿瀏覽器一整行,它的寬將由內容撐開。
在後面的內容中會有關於絕對定位
的具體應用。
4.3 彈性布局
Flex
布局也被稱為是彈性布局
,通過給元素設置display:flex
來實現。
Webkit
內核的瀏覽器,必須加上-webkit
前綴,即display: -webkit-flex;
如果元素設置了display:flex
,那麼該元素就被稱為Flex容器
,該元素內的子元素
就被稱為Flex項目
。
我們都知道,div
是塊級元素
。
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
所以上面這段代碼在瀏覽器的布局如下:
如果我們給div.wrapper
設置display:flex;
則div.wrapper
就是一個Flex容器
,它的子元素div.box
都是Flex項目
,而對應的布局會變成下面這樣:
即Flex容器
內部的Flex項目
都會成為行內元素
,水平依次排列且默認左對齊。
我們可以通過設置Flex容器
的justify-content
控制Flex項目
的水平對齊方式。
有關更多
Flex
布局的內容可以點擊這裡
那接下來我們看看項目中的Flex布局
應用。
4.3.1 彈性布局應用
項目中應用到了Flex布局
的就是下面這個模塊:
該模塊由六張不同尺寸的圖片組成,並且六張圖片拼接成了一張完整的大圖。
剛開始看到這個設計的時候也沒多想,後面真正做的時候才開始摳腳o(╥﹏╥)o。網上搜索了一下,這種布局大致可以稱之為瀑布流式的布局
。
大概看了網上的一些方法,總覺得看的不是很明白(實際是因為一直持續在做頁面布局,大腦有些反應不過來),於是自己就在琢磨怎樣先把目前的這個需求給實現了。
於是腦子各種發散,剛開始嘗試了浮動+相對定位
,確實也實現了基本的布局。但是因為浮動導致父元素失去高度,後續有一個鼠標懸浮的特性無法實現,經過一些折騰沒能解決就放棄了這種辦法。
出現的問題為:
浮動導致父元素高度塌陷
,感興趣的可以去了解一下~
之後經過一番諮詢,得到了一個非常簡單而支持自適應的方案,那就是Flex布局
。那接下來就來掰掰我這個例子是怎麼用Flex布局
實現的。
我們整體的布局是下面這樣的:
首先我們將整個布局規整為三個div.box
,並且給最外層的div.wrapper
設置display:flex;
:
對應的代碼如下:
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.wrapper{
display: -webkit-flex;
display: flex;
}
</style>
接着在對中間的div.box
進行規整:
對應的代碼修改如下:
<div class="wrapper">
<div class="box"></div>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="box"></div>
</div>
<style>
.wrapper{
display: -webkit-flex;
display: flex;
}
</style>
我們的
Flex容器
為div.wrapper
,Flex項目
是三個div.box
,div.box
內部的子元素div.top
、div.bottom
,它們的表現形式不會發生變化,依然是默認的塊級元素
展示形式,所以我們在div.box
內部增加的div.top
、div.bottom
各占父元素的一行。
最後在將div.top
、div.bottom
分別拆分成兩個div.imgbox
,並且給div.top
和div.bottom
設置display:flex
:
對應的代碼修改如下:
<div class="wrapper">
<div class="box"></div>
<div class="box">
<div class="top">
<div class="imgbox"></div>
<div class="imgbox"></div>
</div>
<div class="bottom">
<div class="imgbox"></div>
<div class="imgbox"></div>
</div>
</div>
<div class="box"></div>
</div>
<style>
.wrapper{
display: -webkit-flex;
display: flex;
}
.wrapper .box .top, .wrapper .box .bottom{
display: -webkit-flex;
display: flex;
}
</style>
那麼此時整個頁面的布局工作基本完成了。接下來,我們將對應的圖片
引入:
<div class="wrapper">
<div class="box">
<img src='./1.png'/>
</div>
<div class="box">
<div class="top">
<div class="imgbox">
<img src='./3.png'/>
</div>
<div class="imgbox">
<img src='./4.png'/>
</div>
</div>
<div class="bottom">
<div class="imgbox">
<img src='./5.png'/>
</div>
<div class="imgbox">
<img src='./6.png'/>
</div>
</div>
</div>
<div class="box">
<img src='./2.png'/>
</div>
</div>
刷新頁面,大致的效果就已經出來了:
有沒有瞬間覺得Flex布局
真香~
接着就是按照設計稿簡單調整一下間距就可以了。如果我們需要做自適應,那還需要給圖片設置一個百分比:
.box img{
width: 100%;
}
最終的自適應效果:
彈性布局對於本應用有點曲線救國的感覺,它真正更強大的可應用的地方有更多,比如我們前面提到12宮格頁面布局,就可以用Flex布局來實現,更多有關Flex布局的應用大家自行就探索吧~
4.4 百分比布局
假如我們有一個尺寸為1200*562
的圖片,如果不對圖片設置的尺寸做任何限制,當瀏覽器的屏幕寬度小於1200px
時,瀏覽器就會出現橫向的滾動條:
當屏幕寬度大於1200px
時,瀏覽器
左側就會有空白:
那如何讓這張圖片橫向鋪滿整個瀏覽器,既不會在小尺寸的屏幕上出現滾動條,也不會在大尺寸的屏幕上出現留白呢?
百分比布局
就可以幫我們輕鬆這個解決。
對於前面的那張圖片,不管在什麼在多大尺寸的瀏覽器中,我們為其設置一個百分比寬度,讓其在當前尺寸的瀏覽器中橫向鋪滿瀏覽器,不出現滾動條也不留白:
這個時候,我們的圖片就會適應各種尺寸的屏幕,不會出現滾動條,也不會留白:
如果對於其他元素我們也想實現這樣的效果,就可以將其寬度設置為一個百分比數據,這樣就能實現自適應的效果。
為元素設置百分比的寬度後,高度就不需要在進行設置了,高度會按照比例自行調節
4.5 文本溢出
在很久很久以前,做文本溢出的時候我都是採用字符串截取
然後在拼接······
的方式。後面一直沒有去更新這方面的技能,傻傻的用了很久。直到這次get
到了實現文本溢出
的新技能,所以將內容總結如下。
4.5.1 單行文本溢出
我們有下面這樣一段文本:
<p>Hello大家好,我是小馬鈴薯,關注"不知名寶藏程序媛"第一時間獲取最新文章</p>
<style>
p{
padding: 10px;
border: 1px dashed rgb(100, 98, 98);
color: rgb(100, 98, 98);
}
</style>
如果p
元素的寬度
能夠容納這行文本,文本內容正常就在一行展示:
此時
p
元素的width
為600px
如果p
元素的寬度
無法容納這行文本,文本內容就會自動換行展示:
此時
p
元素的width
為500px
,而且沒有設置元素的高度
那這個時候如果我們想讓內容其單行顯示,並且多餘的內容使用······
代替,要怎麼實現呢?
其實也非常簡單,三個CSS
屬性就能輕鬆解決:
p{
padding: 10px;
border: 1px dashed rgb(100, 98, 98);
color: rgb(100, 98, 98);
width: 500px;
/* 以下便是解決單行文本溢出的三個CSS屬性 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
其中white-space
屬性可以控制p
元素內的文本內容不換行:
overflow: hidden;
可以讓溢出的部分隱藏起來:
text-overflow: ellipsis;
就可以設置用省略號
顯示溢出且未顯示的那部分內容。
4.5.2 多行文本溢出
下面有一段文本:
<p>Hello大家好,我是小馬鈴薯,關注"不知名寶藏程序媛"第一時間獲取最新文章|Hello大家好,我是小馬鈴薯,關注"不知名寶藏程序媛"第一時間獲取最新文章|Hello大家好,我是小馬鈴薯,關注"不知名寶藏程序媛"第一時間獲取最新文章</p>
<style>
p{
padding: 10px;
border: 1px dashed rgb(100, 98, 98);
color: rgb(100, 98, 98);
width: 500px;
line-height: 30px;
}
</style>
默認在瀏覽器中的展示結果:
實現多行文本溢出
最簡單方法的就是用純CSS
來實現:
p{
padding: 10px;
border: 1px dashed rgb(100, 98, 98);
color: rgb(100, 98, 98);
width: 500px;
line-height: 30px;
/* 純css實現多行文本溢出的四個必要屬性 */
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow : hidden;
}
其中-webkit-line-clamp
就是用來控制文本顯示的行數
,設置為3
表示文本內容只顯示3行
。
給p
元素設置這四個必要屬性以後,我們來看看效果如何:
咦,出現了意外狀況,最後一行的文字似乎被截斷了導致第四行的部分內容顯示出來了。不要慌,這個時候我們將p
元素的行高調整成35px
就可以了:
看到很多文章說
-webkit-line-clamp
屬性是一個非標準屬性,只適用於webkit
內核的瀏覽器。但實際上我在Firefox
和Microsoft Edge
中做了測試,發現是可以實現多行文本溢出
的效果;只有IE瀏覽器
不支持。(尤大都官宣Vue3將不再支持IE11了,所以暫且認為這個方案是成功的 O(∩_∩)O哈哈~)
當然實現文本溢出
的方法還有很多,這裡只列出來了最簡單便捷的方法,其他的方法大家感興趣的可以自行研究~
4.6 鼠標懸浮顯示遮罩
鼠標懸浮顯示遮罩的實現方式一般都是在目標懸浮元素
的同級寫一個隱藏的元素,然後通過:hover
讓隱藏的元素顯示出來。
隱藏元素一般都會採用
絕對定位
,所以這個例子也是前面絕對定位
的一個應用。
首先我們先寫下面這樣一段代碼:
<div class="wrapper">
<div class="target">
div.target
</div>
<div class="mask">
div.mask
</div>
</div>
<style>
.target{
width: 120px;
height: 120px;
padding: 10px;
background-color: #ccc;
color: #fff;
}
.mask{
width: 120px;
height: 120px;
padding: 10px;
background-color: rgb(192, 53, 53);
color: #fff;
}
</style>
上面代碼的內容非常簡單,就一個父元素div.wrapper
包裹這兩個同級子元素:div.target
和div.mask
;除此之外,我們還給子元素設置了寬高
、內邊距
、字體顏色
和背景色
這幾個常規的樣式屬性。
所以上面的代碼在瀏覽器中展示效果如下:
那現在我們的目標就是:鼠標懸浮在div.target
的時候顯示div.mask
。
4.6.1 第一步
第一步
我們先調整div.mask
的位置:將其調整到div.target
的位置,並且與之重合。
那這一步考察的就是CSS
的定位,大致的思路就是:父元素div.wrapper
設置相對定位
,子元素div.mask
設置絕對定位
並且按照需要調整偏移量。
/* 省略前面給子元素設置的`寬高`、`內邊距`、`字體顏色`和`背景色`這些樣式屬性 */
.wrapper{
position: relative;
}
.mask{
position: absolute;
top:0px;
}
注意這裡的樣式省略了前面設置的一些基礎屬性,只將這一步新增的樣式貼出來了。
之後瀏覽器查看:
可以看到第一步已經完成了。
4.6.2 第二步
第二步就是隱藏div.mask
:
/* 省略前面給子元素設置的`寬高`、`內邊距`、`字體顏色`和`背景色`這些樣式屬性 */
.mask{
position: absolute;
top: 0px;
display: none;
}
4.6.3 第三步
第三步也是最後一步,就是實現:鼠標懸浮在div.target
元素上,讓div.mask
顯示。這個需求前半句好像比較好實現,就是為div.target
添加偽類:hover
,但是如何在div.target:hover
的時候讓它的同級兄弟元素div.mask
顯示呢?
那這個問題使用CSS
的相鄰兄弟選擇器(Adjacent sibling selector)
就能實現:
.target:hover + .mask{
display: inline-block;
}
以上代碼完成後,我們看看效果:
這個結果似乎是有了,但是卻不盡人意,當我們在div.target
元素上移動鼠標,div.mask
出現了閃爍。
這個問題說來剛開始也很困惑,不過因為時間的關係就沒有在深入研究其原因,而是找了個別的辦法規避了。 最近在做回顧的時候又思路了一番,大致猜測了一下原因:當鼠標懸浮在div.target
上的時候,div.mask
元素顯示;當鼠標發生移動,鼠標監測當前懸浮在div.mask
元素上,那這個時候div.target:hover
就失效了,失效的結果就是div.mask
隱藏;當div.mask
隱藏以後,div.target:hover
又生效,div.mask
又顯示出來了。在鼠標移動時,這個過程就在循環執行,所以就出現了div.mask
的閃爍。
後面就這個問題探索到了很多種解決方案,一 一給大家列出來。
第一個解決方案就是將目標hover
元素由div.target
改為它的父元素div.wrapper
。
因為我們的父元素
div.wrapper
是默認的塊級元素,並且沒有設置尺寸,因此它默認展一整行,所以div.wrapper:hover
的範圍是一整行。所以第一個方案還需要對父元素的尺寸進行控制,可以直接給父元素設置寬度,或者為父元素設置屬性display:inline-block;
.wrapper{
position: relative;
display: inline-block;
}
/* CSS選擇器由「子元素選擇器」變為「子元素選擇器」 */
.wrapper:hover > .mask{
display: inline-block;
}
其他樣式代碼不變
第二種方案是為div.mask
設置pointer-events: none;
,保持hover
依然定義在div.target
元素上。
.wrapper{
position: relative;
}
.mask{
/* 省略其餘樣式代碼 */
pointer-events: none;
}
/* hover目標元素依然是div.target */
.target:hover + .mask{
display: inline-block;
}
5. Django和Django Admin
django
是一個python web
框架,它是一個和MVC
非常接近的MVT
框架:
而且內部自帶開發服務器
、一個名為SQLite
的輕量級數據庫和一個後端管理系統django admin
,安裝和使用也比較簡單,總體來說對一個前端開發者還是非常友好的。
介於本次官網的文章管理
功能不是很複雜,UI
上面也沒有任何的要求,只需要實現兩個基礎的功能:登錄
和文章的發佈和編輯
,所以就用Django
框架實現後台管理系統
。
關於
Django
的安裝和簡單使用可以移步 官網 或者 菜鳥教程,那這裡直接開始整理本次項目中使用Django
的一些重要步驟。
5.1 創建項目
本地的python
和django
環境安裝好以後,cmd
命令行執行django-admin startproject 項目名稱
可以創建一個項目:
項目創建成功後,進入項目根目錄,在項目根目錄執行django-admin startapp 模塊名稱
可以創建細分的功能模塊:
使用
django-admin startapp
命令創建細分的功能模塊後,一定要將該模塊配置到settings.INSTALLED_APPS
中:# 代碼位置:/mySystem/mySystem/settings.py INSTALLED_APPS = [ # ...省略部分代碼 'article' ]
接着在項目根路徑下執行python manage.py runserver 8888
就可以啟動後端服務。命令執行以後,控制台如果打印如下信息,證明後端服務
啟動成功:
後端服務
啟動成功以後,控制台的信息已經告訴我們該服務的地址為://127.0.0.1:8888
,那我們在瀏覽器中訪問這個URL
就能看到django
服務提供的默認頁面:
5.2 默認數據表生成
接着我們需要創建admin管理系統
相關的默認數據表
,即在項目根目錄下執行python manage.py migrate
:
完成之後,瀏覽器中輸入//127.0.0.1:8888/admin
就可以訪問django
提供的admin管理系統
:
進入admin管理系統
是需要登錄的,所以我們接下來我們要做的事就是為admin管理系統
創建一個賬號。
創建賬號
依然是在項目根路徑下執行python manage.py createsuperuser
,接着在命令行輸入用戶名
、郵箱
、密碼
和確認密碼
,就可以成功創建出一個賬號。
之後我們就可以用這個賬號登錄django admin後台管理系統
,以下是登錄成功之後的頁面:
到這一步是有沒有驚奇的發現後台管理系統
的第一個功能登錄
已經完成了╰(°▽°)╯。
5.3 數據表基礎操作
第一個功能我們已經在不經意間完成了,那接下來就是文章
的發佈
和編輯
了。
首先我們需要創建一張數據表
,在django
框架中,創建數據表
的第一步是創建一個models
類:
# *_*coding:utf-8 *_*
from django.db import models
# Create your models here.
class Article(models.Model):
a_id = models.AutoField(primary_key=True, verbose_name="編號") # 文章編號 主鍵 自動生成
a_text = models.TextField(verbose_name="正文內容") # 文章內容
class Meta:
verbose_name_plural='文章'
代碼位置:
/mySystem/article/models.py
,使用djang-admin startapp
創建article
模塊時會自動生成models.py
文件。
代碼中的verbose_name
和verbose_name_plural
分別為字段
和數據表
定義中文名稱
,所以後面我們看到的article
數據表和表中的字段
都會是中文的;如果不配置這兩個屬性,默認顯示的是英文。
之後在項目根目錄下分別執行python manage.py makemigrations
和python manage.py migrate
命令:
python manage.py makemigrations
會根據models.py
文件中定義的數據表
和字段
生成對應的數據表初始化文件,即/mySystem/article/migrations/0001_initial.py
;後者會根據生成的0001_initial.py
文件創建數據表
;如果後期表結構
發生變化,先修改models.py
,在重複執行這兩個命令即可。
以上兩個命令執行成功後,數據表
就已經創建出來了,接着我們還需要將這個數據表
註冊到admin
中:
# *_*coding:utf-8 *_*
from django.contrib import admin
from article.models import Article
# Register your models here.
admin.site.register(Article)
代碼位置在:
/mySystem/article/admin.py
,創建article
模塊時會自動生成admin.py
。
這個時候我們在刷新頁面就能看到我們剛剛創建的article
數據表了:
數據表
註冊到admin
中這一步是不能缺少的,否則admin管理系統
是不會顯示article
這個數據表的
5.4 數據表定製
對於我們剛剛創建的article
數據表,點擊頁面的+Add
按鈕,輸入正文內容
,點擊右下角的SAVE
按鈕就可以新增一條文章:
models.py
中只定義了兩個字段編號(a_id)
和正文內容(a_text)
,其中編號
是自增主鍵
,所以我們在新增文章的時候,只需要填入正文內容
即可。
點擊ARTICLE
或者文章
,可以查看錶中的數據:
勾選列表中的複選框
,點擊動作
右側的下拉框,選擇刪除所選的文章
就可以刪除文章:
點擊文章的編號就能修改對應的文章內容:
以上就是文章的增
、刪
、改
、查
操作,也是我們整個後台管理系統需要實現的第二個功能。
不過從以上的結果可以發現列表顯示Article Object
而不是具體的數據,而且除了前面我們給數據表
和字段
設置的中文以外,其他的操作按鈕均是英文的。
這個兩個問題其實是admin管理系統
的默認顯示,當然我們也可以對這些顯示做一些定製。
5.4.1 列表展示具體字段
想讓列表顯示具體的字段,第一種方法就是為article
模型定義__str__
方法並返回想要顯示的字段:
# *_*coding:utf-8 *_*
from django.db import models
# Create your models here.
class Article(models.Model):
a_id = models.AutoField(primary_key=True, verbose_name="編號") # 文章編號 主鍵 自動生成
a_text = models.TextField(verbose_name="正文內容") # 文章內容
class Meta:
verbose_name_plural='文章'
def __str__(self):
return self.a_text
這個時候在刷新文章列表
就能看到效果:
另外一種方法就是在為article
定義對應的ArtcileAdmin
類,並且在list_display
設置列表需要展示的字段即可,最後在將ArticleAdmin
註冊到admin
中:
# *_*coding:utf-8 *_*
from django.contrib import admin
from article.models import Article
# 為article模型定義對應的ArtcileAdmin
class ArticleAdmin(admin.ModelAdmin):
list_display = ('a_id','a_text') # 設置列表需要展示的字段
# Register your models here.
admin.site.register(Article, ArticleAdmin) # 將ArticleAdmin也註冊到admin中
代碼位置在:
/mySystem/article/admin.py
最後我們看下效果文章列表:
可以看到列表
已經成功的顯示了我們定義的內容。
5.4.2 中文配置
為了方便我們的操作,一般會將頁面配置成中文模式的,那admin
管理系統的中文模式
也非常好實現,直接在settings.py
文件中定義一個中間件
即可:
MIDDLEWARE = [
'django.middleware.locale.LocaleMiddleware'
]
代碼位置在:
/mySystem/mySystem/settings.py
配置完成以後,在刷新頁面就能看到中文模式的admin管理系統。
5.5 功能二次開發
數據表定製完成以後,你以為就結束了嗎?no no no,前面我們實現的文章功能太簡單了,只能以純文本的形式編輯文章的正文內容,所以接下來我們就需要在這個基礎上對文章的新增
和編輯
功能做一個二次開發。
一般情況下,一篇文章包含的字段至少包含:
文章標題
、文章作者
、發佈時間
、正文內容
、文章封面
等這些內容,而所以需要對文章的新增
和編輯
進行二次開發;而文章的列表展示
和刪除功能
都是比較簡單的操作,現有的功能已經可以滿足。
從瀏覽器中我們可以看到新增文章
頁面url
為
//127.0.0.1:8888/admin/article/article/add/
:
那麼我們就可以自己配置一個路由為:/admin/article/article/add/
,然後編寫對應的視圖文件
和模板文件
。
首先我們需要在主路由
文件中配置路徑:
from django.contrib import admin
from django.urls import path
from django.urls import include # 新增代碼
import article
urlpatterns = [
path('admin/article/', include('article.urls')), # 新增代碼
path('admin/', admin.site.urls),
]
代碼位置:
/mySystem/mySystem/urls.py
,新增的代碼在備註中有說明
該文件為整個項目的主路由文件,所有的請求url
都從這裡開始分發,一般為了項目的模塊化和更好的分工,會將不同模塊的路由到對應模塊的urls.py
文件中,
接着將後半部分路徑配置到article
模塊下的路由文件中:
from django.urls import path
from article import views
urlpatterns = [
path('article/add/', views.addArticle),
]
代碼位置:
/mySystem/article/urls.py
然後我們編寫對應的視圖函數
:
from django.shortcuts import render
# Create your views here.
def addArticle(request):
return render(request, 'add.html', {})
代碼位置:
/mySystem/article/views.py
視圖文件中我們針對/admin/article/article/add/
請求渲染了一個模板文件add.html
,所以我們還需要創建對應的模板文件。
首先在/mySystem/article/
創建文件夾templates
:
接着在templates
目錄下創建add.html
:
我們在add.html
中寫入一些簡單的內容:
<p>新增一些文章吧</p>
最後一步還需要在settings.py
中對模板文件的位置進行配置:
import os # 新增
TEMPLATES = [
{
# 省略代碼...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
# 省略代碼...
},
]
代碼位置:
/mySystem/mySystem/settings.py
這個時候我們在刷新頁面:
我們會發現新增頁面已經路由到了我們自定義的add.html
,這個時候我們就可以在add.html
中自由發揮了,比如新增表單控件、嵌入富文本編譯器等等。
對於文章的編輯功能也是同樣的方法,先找到編輯功能的完整URL
://127.0.0.1:8888/admin/article/article/2/change/
。
仔細分析這個URL
會發現這個URL
中有一個參數是變化的,那就是文章的編號
,所以我們的路由
配置必須要用正則
才能進行匹配:
from django.urls import path, re_path
from article import views
urlpatterns = [
path('article/add/', views.addArticle),
re_path('article/(\d+)/change/', views.updateArticle), # 正則路徑
]
代碼位置在:
/mySystem/article/urls.py
需要注意的是,本地搭建的django
版本為3.x
,所以正則路由
是需要使用re_path
來配置;如果是django 1.x
版本,不管是普通路由
還是正則路由
,均可使用url
匹配即可,詳細可參考官方文檔
。
接下來就是為文章編輯
功能編寫對應的視圖函數
和模板文件
即可,這塊同前面的新增功能,所以就不在多說了。
因為我們對新增
和編輯
功能進行二次開發,那同時還需要實現對應的提交保存數據庫
邏輯。比如我們的文章新增
功能,在add.html
中新增表單後,需要有對應的提交
功能,這個提交
功能就是將用戶填寫的文章信息
提交並保存到數據庫。那這個功能同樣是先配置路由:
from django.urls import path, re_path
from article import views
urlpatterns = [
path('article/submitAdd', views.submitAdd) # 將文章內容保存到數據庫
]
代碼位置在:
/mySystem/article/urls.py
這裡省略了前面配置的文章新增
和文章編輯
路由
然後在編寫對應的視圖函數submitAdd
。
以上兩個步驟完成以後,前端在提交表單時的url
為:/admin/article/article/submitAdd
,用戶填寫好內容點擊提交後,後端就會將數據保存到數據庫中。
5.6 小結
那到這裡整個後端功能就結束,大部分功能都我們藉助了django admin
,同時對文章新增
和文章編輯
功能做了二次開發。
如果在整個項目中後端功能比較複雜且UI要求比較高,那我們可能就得自己從0開始實現一個後台管理系統
,對於後台管理系統
最基礎且重要的功能就是登錄功能
,關於這個功能我之前也有過總結,是用django+vue
實現的項目,詳細可以查看以下兩篇文章:
《Vue結合Django-Rest-Frameword實現登錄認證(一)》
《Vue結合Django-Rest-Frameword實現登錄認證(二)》
6. 項目部署
項目部署也不是什麼複雜的事情,只是在這一步也有一些需要注意的東西。
6.1 後端項目部署
對於後端項目,服務器也是需要提供python
和django
框架,安裝教程這裡就不說了,可自行在網上搜索。
但是需要注意的是,最好是先確定好服務器
端的python
版本和django
版本,因為不同版本的django
需要不同的python
版本支持:
Django 1.x
使用python2
的環境即可
這裡解釋一下為什麼需要先確定服務器上的環境版本。
有些時候我們使用的服務器
有可能已經存在python
環境,如果是python2
的環境,那django
只能選擇1.x
的版本;
如果是python3
的環境,那django
版本的選擇就沒有什麼限制;
還有大多時候服務器
會並存python2
和python3
,這個時候我們還是需要抉擇用哪個python
版本。
假如我們直接先在本地去搭建,就可能存在本地環境和服務器環境軟件版本不一致的問題。
確定好服務器中軟件的版本以後,我們本地搭建環境就和服務器保持一致,編寫完功能以後就可以將本地整個目錄代碼拉到服務器中的某個目錄下,後續也不會因為版本問題導致本地測試正常而服務器報錯的問題。
本地代碼拉到服務器上以後,在服務器項目根目錄下執行python manage.py migrate
,就能生成對應的數據表,並且還能將本地開發環境中生成的有關數據庫的測試數據同步到服務器。
在同步本地開發環境中生成的有關數據庫的測試數據之前,需確保本地生成了數據庫初始化文件,生成該文件的方法前面已經說過,就不在贅述。
這些準備工作完成以後,如果是自己練習的項目,可以直接啟動django
內置的server
即可,整個後端項目就算部署完成;如果是公司級別的項目,最好用在服務器中安裝Apache
和mod_wsgi
來部署項目。
6.2 前端項目部署
前端部署項目非常簡單,在服務器
安裝nginx
即可,然後將編譯打包後的代碼源碼上傳至服務器
的某個位置,在修改nginx
的配置文件nginx.conf
:
server {
listen 80; # 通過那個端口訪問前端網頁
server_name localhost;
location / {
root /var/www/lr/; # 前端編譯打包後的代碼路徑
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /admin/ { # 將以/admin/開頭的請求轉發到proxy_pass 配置的服務
proxy_pass //127.0.0.1:8888/admin/; # 後端服務路徑
}
}
7.問題解決
7.1 部署樣式出現問題
前端的功能本地開發好以後,就開始部署到服務器上,但是發現很多自定義的樣式沒有生效。但是瀏覽器查看元素會發現能看到我們自定義的樣式,但是它的優先級比較低,被element-ui
的樣式給覆蓋了。
這個問題最合適的解決方案就是將main.js
中element
的樣式文件引入順序放到App
組件的前面:
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
7.2 hover閃爍問題
鼠標懸浮顯示遮罩導致的hover閃爍問題
前面我們已經做過總結,這裡就不在重複,僅僅將這個問題列出來。
其實整個過程中也不止這兩個問題,其他出現的問題在前面一些部分寫到了注意事項中,所以這裡就沒有總結;還有一部分是當時出現問題的時候沒有記錄,現在回想不起來了o(╥﹏╥)o
8.結束
那到此整個項目就總結完了,沒有什麼特別複雜的地方,但是也有一部分內容讓我學習到了新的技能。
當然整個過程中不止技術上的進步,更有血和淚的教訓,所以後面一篇文章會對這次的項目做一個經驗教訓總結,所以下次見嘍~
9. 寫在最後
如果這篇文章有幫助到你,❤️關注+點贊❤️鼓勵一下作者
文章公眾號
首發,關注 不知名寶藏程序媛
第一時間獲取最新的文章
筆芯❤️~