jS正則和WEB架構Django的入門

最後更新：2017-07-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：action span exe blog checked 外掛程式 style 路由 str

JS正則

-test 判斷字串是否符合規定的Regex

-exec 擷取匹配的資料

test的例子：

從上述的例子我們可以看出，如果rep.test匹配到了就返回true,否則返回false

exec的例子

上述匹配的結果是一個數組，但是不管匹配幾次都只顯示第一個

正則中的分組

全域匹配

沒有分組的情況下，會依次從第一個開始取，擷取到最後一個如果再次擷取，就會獲得null,然後再沖第一個開始

如果這個時候採用分組效果如下：

Regex

/…/ 用於定義Regex

/…/g 表示全域匹配

/…/i 表示不區分大小寫

/../m 表示多行匹配

這裡的多行匹配需要注意：

預設情況下js的正則匹配就是多行匹配

通過下面例子理解加上m之後的正則匹配

從例子可以看出只匹配到第一行的內容，第二行的並沒有匹配，這裡是因為整個text是一個字串，所以當出現^以什麼開頭的時候，是從這個字串開頭開始的，所以只能匹配到一個，如果這個時候想要匹配到多個，實現方法就是通過m參數

這樣相當雩都是把每一行作為一個字串去匹配所以匹配到第二行的Java

關於事件的執行順序

有很多標籤有自己的事件，同時我們也可以再次給他賦予許可權，這樣就會產生順序的問題

預設事件先執行：

checkbox標籤

自訂事件先執行（大部分都是自訂事件優先順序高）：

a標籤 submit標籤

關於checkbox事件執行順序的一個驗證

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="checkbox" /><script src="jquery-1.12.4.js"></script><script>    $(":checkbox").click(function () {        var v = $(this).prop(‘checked‘);        console.log(v);    })</script></body></html>

分析：

如果是自己定義的事件先執行，那麼當選中的時候首先應該列印false,然後被選中，但是列印的是true,所以，可以判斷是checkbox是預設事件先執行

組件

BootStrap ----推薦使用這個

響應式：

@media

代碼例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .c1{            background-color: red;            height: 50px;        }        @media (min-width: 700px) {            .c2{                background-color: green;            }        }    </style></head><body>    <div class="c1 c2"></div></body></html>

從效果可以看出

當視窗小於一定值的時候，顯示為紅色

表徵圖文字

@font-face

在使用的時候一個關鍵的地方：

在css樣式的時候如果想要某個css樣式優先順序最高，例子如下：

        .c3{            border-radius: 0 !important;        }

就可以實現c3的css樣式優先順序最高，無論在上面還是在下面都會被應用

下面的兩個偏向於後台管理

jQueryUI

EasyUI

類似的外掛程式有很多，例如想實現一個輪播圖的效果：

則可以通過bxslider實現

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css" /></head><body><ul class="bxslider">    <li><img src="images/1.jpg" /></li>    <li><img src="images/2.jpg"/></li>    <li><img src="images/3.jpg" /></li>    <li><img src="images/4.jpg" /></li></ul>    <script src="jquery-1.12.4.js"></script>    <script src="jquery.bxslider/jquery.bxslider.js"></script><script>    $(document).ready(function () {        $(‘.bxslider‘).bxSlider();    });</script></body></html>

WEB架構

MVC架構:

Model View Controller

資料庫模板檔案業務處理

MTV：Django就是MTV架構

Model Template View

資料庫模板檔案業務處理

Django

pip2 install django

安裝好之後

D:\python35\Scripts目錄下會有：django-admin.exe

下面通過命令建立一個簡單的project

ango-admin startproject 工程名

jango-admin startproject mysite

會產生一個如下mysite目錄：

mysite -mysite    -_init_.py    -settings.py        #設定檔    -urls.py            #url對應關係    -wsgi.py              #遵循WSGI規範，實際用uwsig+nginx -manage.py             #管理Django規範                         這裡可以執行：                            --python manage.py                             --python manage.py start xx                            --python manage.py makemigrations                            --python manage.py migrate

啟動上述建立的mysite

通過python manage.py runserver就可以啟動，這裡也可以加參數127.0.0.1：:8001這樣就能定義啟動的連接埠，啟動過程如下：

D:\mysite>python manage.py runserverPerforming system checks...System check identified no issues (0 silenced).You have 13 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.December 06, 2016 - 20:49:54Django version 1.10.4, using settings ‘mysite.settings‘Starting development server at http://127.0.0.1:8000/Quit the server with CTRL-BREAK.

然後登陸http://127.0.0.1:8000/

這樣就表示成功了

建立app命令

python manage.py startapp app名稱

python manage.py startapp cmdb

產生如的目錄

在views.py裡添加如下代碼：

from django.shortcuts import HttpResponsedef home(request):    return HttpResponse(‘<h1>CMDB</h1>‘)

同時在mysite目錄下urls.py裡添加如下：

urlpatterns = [    url(r‘^admin/‘, admin.site.urls),    url(r‘^aa.html/‘,views.home ),]

這樣登入

關於app目錄的解釋：

migrations 存放修改表結構時的記錄

admin.py Django為我們提供的後台管理

apps.py 配置當前app

models.py ORM，寫指定的類通過命令就可以建立資料庫結構

tests.py 用於做單元測試

views.py 業務代碼

寫一個簡單的例子

在cmdb下的views.py裡寫如下代碼：

from django.shortcuts import render def login(request):    return render(request,‘login.html‘)

這裡沒有填寫絕對路徑是已經為在setting裡已經進行了配置：

在myDjango目錄下的urls.py寫如下代碼：

from cmdb import viewsurlpatterns = [    url(r‘^admin/‘, admin.site.urls),    url(r‘^login/‘, views.login),]整個目錄如下：

整個目錄如下：

登入效果如下：

關於靜態檔案的存放

這是目錄結構

將css以及js放在一個static目錄下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="/static/common.css" />    <style>        label{            width: 80px;            text-align: right;            display: inline-block;        }    </style></head><body>    <form action="/login" method="post">        <p>            <label for="username">使用者名稱：</label>            <input id="username" type="text" />        </p>        <p>            <label for="password">密碼：</label>            <input id="password" type="text" />            <input type="submit" value="提交" />        </p>    </form>    <script src="/static/jquery-1.12.4.js"></script></body></html>

settings.py設定檔中的配置：

STATIC_URL = ‘/static/‘STATICFILES_DIRS=(    os.path.join(BASE_DIR,‘static‘),)

css中給背景添加了灰色

從結果中也可以看出js和css都載入成功

擷取使用者的資訊

views.py中的代碼如下：

from django.shortcuts import renderfrom django.shortcuts import redirectdef login(request):    print(request.method)    error_msg = ""    if request.method == "POST":        user = request.POST.get("user",None)        pwd = request.POST.get("pwd",None)        print(user,pwd)        if user == "root" and pwd == "123":            return redirect(‘http://www.baidu.com‘)        else:            error_msg="使用者名稱密碼錯誤"    return render(request,‘login.html‘,{‘error_msg‘:error_msg})

html代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="/static/common.css" />    <style>        label{            width: 80px;            text-align: right;            display: inline-block;        }    </style></head><body>    <form action="login" method="POST">        <p>            <label for="username">使用者名稱：</label>            <input name = "user" id="username" type="text" />        </p>        <p>            <label for="password">密碼：</label>            <input name="pwd" id="password" type="text" />            <input type="submit" value="提交" />            <span style="color:red;">{{ error_msg }}</span>        </p>    </form>    <script src="/static/jquery-1.12.4.js"></script></body></html>

紅色的為添加的內容

這樣就實現了對輸入使用者和密碼的判斷

輸入的賬戶和密碼不匹配的時候：

如果正確則會跳轉到百度

下面是一個完整的例子

views.py中的代碼如下：

from django.shortcuts import renderfrom django.shortcuts import redirectdef login(request):    print(request.method)    error_msg = ""    if request.method == "POST":        user = request.POST.get("user",None)        pwd = request.POST.get("pwd",None)        print(user,pwd)        if user == "root" and pwd == "123":            return redirect(‘/home‘)        else:            error_msg="使用者名稱密碼錯誤"    return render(request,‘login.html‘,{‘error_msg‘:error_msg})USER_LIST =[    {"username":"zhaofan","gender":"男","email":"[email protected]",},    {"username":"zhaoy","gender":"男","email":"[email protected]",},    {"username":"zssan","gender":"女","email":"[email protected]",}]def home(request):    if request.method == "POST":        u = request.POST.get(‘username‘)        g = request.POST.get(‘gender‘)        e = request.POST.get(‘email‘)        temp = temp = {"username":u,"gender":g,"email":e}        USER_LIST.append(temp)    return render(request,‘home.html‘,{‘user_list‘:USER_LIST})

urls.py中的代碼如下：

from django.conf.urls import urlfrom django.contrib import adminfrom cmdb import viewsurlpatterns = [    url(r‘^admin/‘, admin.site.urls),    url(r‘^login‘, views.login),    url(r‘^home‘, views.home),]

home.html代碼如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body style="margin:0;">    <div style="height: 48px;">></div>    <div>        <form action="/home" method="POST">            <input type="text" name = "username" placeholder="使用者名稱">            <input type="text" name = "gender" placeholder="性別">            <input type="text" name = "email" placeholder="郵箱">            <input type="submit" value="添加">        </form>    </div>    <div>        <table border="1">            <thead>            <tr>                <th>姓名</th>                <th>性別</th>                <th>郵箱</th>            </tr>            </thead>            <tbody>                {% for row in user_list %}                    <tr>                        <td>{{ row.username }}</td>                        <td>{{ row.gender }}</td>                        <td>{{ row.email }}</td>                    </tr>                {% endfor %}            </tbody>        </table>    </div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="/static/common.css" />    <style>        label{            width: 80px;            text-align: right;            display: inline-block;        }    </style></head><body>    <form action="login" method="POST">        <p>            <label for="username">使用者名稱：</label>            <input name = "user" id="username" type="text" />        </p>        <p>            <label for="password">密碼：</label>            <input name="pwd" id="password" type="text" />            <input type="submit" value="提交" />            <span style="color:red;">{{ error_msg }}</span>        </p>    </form>    <script src="/static/jquery-1.12.4.js"></script></body></html>

運行結果如下：

輸入正確的使用者名稱和密碼提交，跳轉到home頁面

這裡可以添加新的資料：

知識點整理：

建立Django工程

django-admin startproject 工程名

建立APP

cd 工程名

python manage.py startapp cmdb

靜態檔案

project.settings.py

STATICFILES_DIRS = (

os.path.join(BASE_DIR, "static"),

)

模板路徑

DIRS ==> [os.path.join(BASE_DIR,‘templates‘),]

settings中

middlerware

# 注釋 csrf

定義路由規則

url.py

"login" --> 函數名

定義視圖函數

app下views.py

def func(request):

# request.method GET / POST

# http://127.0.0.1:8009/home?nid=123&name=alex

# request.GET.get(‘‘,None) # 擷取請求發來的而資料

# request.POST.get(‘‘,None)

# return HttpResponse("字串")

# return render(request, "HTML模板的路徑")

# return redirect(‘/只能填URL‘)

模板渲染

特殊的範本語言

-- {{ 變數名 }}

def func(request):

return render(request, "index.html", {‘current_user‘: "alex"})

index.html

<html>

<body>

<div>{{current_user}}</div>

</body>

</html>

====> 當渲染後產生如下的字串

<html>

<body>

</body>

</html>

這裡的for迴圈比較特殊：

{% for index in range(20)%}

………

{%endfor%}

同時在範本語言中，都是有開始有結束

在範本語言中的索引

def func(request):        return render(request, "index.html", {                ‘current_user‘: "alex",                 ‘user_list‘: [‘alex‘,‘eric‘],                 ‘user_dict‘: {‘k1‘: ‘v1‘, ‘k2‘: ‘v2‘}})                index.html                <html>        ..        <body>              <div>{{current_user}}</div>                        <a> {{ user_list.1 }} </a>                        <a> {{ user_dict.k1 }} </a>                        <a> {{ user_dict.k2 }} </a>                    </body>                </html>

在範本語言中通過{{ user_list.1 }}方式擷取內容

jS正則和WEB架構Django的入門

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jS正則和WEB架構Django的入門

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support