【記錄】Django學習14

來自專欄 Python與Web

這篇實現密碼修改。

[關於Url鏈接硬編碼]

舉個例子，登出之後會跳轉到這樣一個頁面，頁面提供再次登錄的鏈接，所以有一個帶href屬性的a標籤。

{% extends "base.html" %}{% block title %}logout{% endblock %}{% block content %}<div class="row text-center vertical-middle-sm"> <p>You have log out.</p> <p>You can <a href="{% url account:user_login %}">login </a>again</p></div>{% endblock %}~

其中，"{% url account:user_login %}"這種寫法就不是硬編碼。

硬編碼是這樣的 http://localhost:8000/account.login」，壞處是等以後有了域名放到生產，前面部分是要改動的，這時候這部分也要隨之改動。

好的代碼應該要消滅這種情況。

所以這裡用="{% url account:userlogin %}"，其中account是應用的namespace，後面的user_login是一條URL的name：

url(r^login/$, auth_views.LoginView.as_view(), name="user_login")

這時根據user_login這個名字來跳轉，也稱URL的別名：先找到這個URL，然後跳轉到這個URL指定的auth_views.LoginView.as_view()。

如果硬編碼，http://localhost:8000/account.login根據URL內容也是會跳轉到這個URL的。

所以看到等效。

也可以加上reverse，通過別名引用某個URL：

article_url = reverse("my_artical")

引用的時候需要注意，別名查找是從./mysite/跟下開始找，所以如果是app里的路徑，路徑里指定到app，所以看到上面的例子是"{% url account:user_login %}"而不是"{% url user_login %}"。

修改密碼這裡也用到了reverse。

因為改密碼是用到了內置的兩個class：class PasswordChangeView和class PasswordChangeDoneView，將url定向到它們。

看效果，有兩個報錯：

1）是/account/password-change/被重定向302到/accounts/login/?next=/account/password-change-done/?

一度以為是被攻擊……

想了一會應該是改密碼之前必須登錄狀態，所以未登錄會被要求先登錄，這個應該是內置的功能。

登陸了，出現改密碼界面，果然……

2）修改之後本該跳轉到改密碼成功的頁面，而現在……報錯

提示NoReverseMatch at /account/password-change/

這就是上面提到的reverse函數了，報錯原因是路徑不對。因為我們把內置的東西拿來自用，有一些路徑是需要有變化的，這個前面也遇到過幾次了。

這裡叫做lazy_reverse，這個參數在源代碼裡面：

根據經驗，這種xxView的類中定義的屬性的值是可以通過在as_view()中通過傳參改寫的，所以改寫如下：

from django.urls import reverse_lazyapp_name = "account"urlpatterns = [ ... url(r^password-change/$, auth_views.PasswordChangeView.as_view(success_url=reverse_lazy(account:password_change_done)), name="password_change"), url(r^password-change-done/$, auth_views.PasswordChangeDoneView.as_view(), name="password_change_done"),]

這裡當然可以有另外一種方法，直接修改源代碼里success_url = reverse_lazy(password_change_done)這一行，而不是後面傳參覆蓋。

但是當然不要這麼做……源代碼就是源代碼！以後可能還要用的。

慣例，以上只是修改了url，頁面樣式用的其實是內置的，如果我們想要用自己的html呢？

也是可以的，做法參考【記錄】Django學習10：

本來內置是這樣的：

通過簡單改寫樣式，變成了這樣：

到現在，修改密碼的功能是實現了。

當同樣了，類似於登錄。我們準備在右上角導航欄添加一個修改入口，便於隨時修改，於是修改header.html。

{% if user.is_authenticated %} <li> <div class="dropdown" stylex="margin-top:8px"> <button type="button" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">{{ user.username }}<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="{% url account:password_change %}">修改密碼</a></li> </ul> </div> </li> <!-- <li><a href="#" >{{user.username}}</a></li> --> <li><a href="{% url account:user_logout %}" >Logout</a></li> {% else %} <li><a href="{% url account:user_login %}">LOGIN</a></li> {% endif %}

點擊button彈出下拉框，這裡需要js支持，於是在最後還要加上：

<script src="{% static js/jquery.js %}"></script><script src="{% static js/bootstrap.js %}"></script>

但至此下拉框並沒有如期出現，這裡排查了很久。

為此了解一下Bootstrap，原來它與jquery是這麼個關係：

Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery插件。

Bootstrap 按鈕下拉菜單?

www.runoob.com

打開瀏覽器檢查，發現是bootstrap找不到jquery。

但是明明jquery文件已經下載下來，也不像其他人說的引入順序有問題。

再看source，其實jquery第一行也報錯。

也就是說雖然這個文件下載下來了，但是因為有錯，跟沒下載一樣。

那麼到底是什麼錯呢？找到了如下錯誤：

1. 開頭/*!中間多了空格
2. 正文開始用了中文

反正這個文件就是不對（記得當初是官網整體下載解壓的，不知道為什麼會有錯，也可能是我手動怎麼替換過）。

解決辦法是從jquery官方github重新下載覆蓋。

在這裡：https://github.com/jquery/jquery-ui/blob/master/external/jquery-2.2.4/jquery.js

伺服器文件更新以後，還要注意清空瀏覽器緩存。不然瀏覽器會很懶，依然給你載入舊文件。

中途也考慮是不是bootstrap和jquery的版本不匹配引起，事實證明不是。

最後、終於……