透過Vue實現限制數入字數

我們都知道,平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter,Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是,當使用者在輸入的同時,提示使用者還有多少字可以輸入,當使用這輸入的字數達到限制時,及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢? 有兩的點需要注意: 如何計算使用者輸入了多少字? 當使用這輸入的字數達到限制時,該如何停止繼續輸入? 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先,我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30”

Django下載與安裝

下載與安裝Django有下面幾個步驟:

在撰寫Django程式碼之前,先建立一個虛擬環境,並且在這個虛擬環境裡面開發你的程式。
由於virtualenv最大的好處是,可以讓每一個python項目單獨使用一個環境,而不會影響python系統環境,也不會影響其他項目的環境。這樣子的話,如果開發項目中的程式有什麼問題,也不會破壞到原本電腦系統中的其他項目。
因此,我們在安裝Django的步驟前面建議先加上建立虛擬環境的步驟。如果你不想要建立虛擬環境的話,也可以直接從第二步驟開始安裝Django。

步驟一:建立虛擬環境

virtualenv安裝的位置在 venv/中的 lib/site-packages/目錄裏,而不是在原本系統的python的lib/site-packages目錄裏。換句話說,virtualenv 創建的虛擬環境與主機的 Python 環境無關,你主機配置的libary不能在 virtualenv 中直接使用。你需要在虛擬環境中利用 pip install 再次安裝配置後才能使用。


1. 在python 3下安裝 virtualenv,用這樣創建的 virtualenv 預設的 python版本是python3。
pip3 install virtualenv   

2. 透過virtualenv 建立一個虛擬環境:venv

python3 -m virtualenv venv


3. 進入venv資料夾中
cd venv


4. 啟動虛擬環境
source bin/activate


步驟二:在虛擬環境中安裝Django


你可以安裝最新版本的Django
pip install django


或者,你可以指定特定的Django版本來安裝,例如下面的指令我們指定要安裝Django 2.0.2版。
pip install django==2.0.2

在目前這種做法下,你可以重複第一步驟來開啟多個虛擬環境,並且在每個虛擬環境中安裝不一樣版本的Django。這些程式雖然版本不同,但是它們只在自己的虛擬環境中發會作用,虛擬環境與虛擬環境相互之間卻不會互相干擾。

步驟三:透過 django-admin 開啟一個專案


接下來你可以透過 django-admin 開啟一個專案,下面的mysite就是你的專案名稱,你可以依照需要為你的專案命名。
django-admin start project mysite

檢查:執行完上面的指令後,檢查看看在你的電腦上是不是已經建立了專案資料夾(在這裡指的是mysite資料夾)以及一個manage.py檔案?

步驟四:移轉資料庫

如果你直接跳過這個步驟,去執行下一個步驟的話,你會得到下面的警告訊息。這個訊息告訴你你的專案可能無法正確的被執行。為了移除這個訊息,你可以執行下面的指令。當然,你也可以在嗣後要寫資料庫時再執行這個指令。

You have 14 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them.
cd mysite


python manage.py migrate


步驟五:啟動伺服器


python manage.py runserver

執行上面指令後,打開你的瀏覽器,輸入下的路徑。
http://127.0.0.1:8000/
如果你看到這個畫面與文字『The install worked successfully! Congratulations! 』那就表示你已經成功安裝Django了。



Okay, you are ready to rock and roll.


留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

Vue元件實作,將HTML網頁Vue元件化

Python基礎篇--[條件]如果發生這種狀況時,我該怎麼辦?