python學習之路 JavaScript正則與Django

JavaScript正則

一、text     判斷字符串是否符合規定的正則表達式css

rep = /\d+/;html

rep.test('sadkjfh287dadlk')  #這個判斷後面的字符串符合不符合前面的rep正則表達式符合就返回true反之falsepython

二、exec   獲取匹配到的數據jquery

rep = /\d+/;nginx

rep.exec('asdasd123dasd321')  # 結果爲 '123'   這個只要找到第一個匹配項就不會繼續找下去,返回的也是第一匹配項正則表達式

正則中的分組

var pattern = /\bJava(\w*)\b/;  # 這個表示的是匹配的是一個單詞 數據庫

# 其中的\b通常指單詞邊界(空格、空行、標、tab)至關於單詞的分隔符 如 dada dadsa aswdx   裏面的 'dada'和'dadsa' 'aswdx'認爲是一個可是django

pattern.exec('JavaScript is more fun than Java or JavaBeans!')瀏覽器

# 結果爲['JavaScript', 'Script']   這個就是分組產生的他會匹配第一個匹配的字符並返回匹配到的字符和分組裏面的字符app

全局匹配

var pattern = /\bJava\w*\b/g;  #這個後面加了一個g表示匹配全部

pattern.exec('JavaScript is more fun than Java or JavaBeans!') # 這個執行一次就出一個結果一直到找到空的再從頭到爲再找

# ['JavaScript'],['Java'],['JavaBeans'] , ['',''] # 會把整個字符串中符合正則的都匹配出來不像上面的只要匹配到就不匹配

 

var pattern = /\bJava(\w*)\b/g  # 這個就是匹配出全部並把每一項做爲一個列表前面是匹配項後面的分組中的值

pattern.exec('JavaScript is more fun than Java or JavaBeans!') # 這個執行一次就出一個結果一直到找到空的再從頭到爲再找

#['JavaScript', 'Script']、['Java','']、['JavaBeans','Beans']、['','']

 

正則表達式的一些意思

/…/ 用於定義正則表達式

/…/g 表示全局匹配

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

/../m 表示多行匹配

記住js在默認的狀況下是多行匹配的這個多行匹配

上面咱們能夠看到當咱們匹配以什麼開頭的時候他只認是這個字符串開頭,不會管這個字符串是否是多行,以一個字符串爲總體

上面這個加了m之後他就會看看這個字符串有沒有換行符,有的話,她就會以每行做爲開頭,去匹配。

 

時間執行的順序

不少標籤都有本身的事件,同時咱們也能夠賦予他們事件,這樣就會產生順序的問題。

擁有本身的事件叫作默認事件、咱們賦予的叫作自定義事件

默認事件先執行:checkbox標籤

自定義事件先執行: a 標籤submit標籤

下面是一個驗證checkbox標籤是默認事件先執行的示列

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

上面能夠看出當咱們點擊的時候纔會出現true也就是說這個裏面的默認事件,若是是自定義事件優先的話,在咱們點擊它的時候開始應該先顯示false而後纔是true。

 

組件的學習

BootStrap     --->推薦使用這個

 BootStrap是基於HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前段開發框架,使Web開發更加快捷。

 1、響應式:

@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>

上面代碼就是當咱們把瀏覽器的窗口調到小於 700px的時候就會使.c2生效

 

 

 上面就是效果圖。

2、圖標、字體

@font-face

其餘兩個插件

JQueryUI

EasyUI

不過相對於第一個下面這兩個偏向於後臺,這三個是經常使用的也還有其餘的一些相似的插件。

 

WEB框架

MVC

  Model        View      Controller

  數據庫    模板文件         業務處理

MTV   Django就是這個框架

  Model       Template       View

  數據庫        模板文件        業務處理

 

Django

咱們要使用Django這個框架就要先安裝django

一、咱們可使用pip來安裝Django

個人電腦上安裝了py3和py2因此pip有2個設置了pip2和pip3

我這裏使用的是python3

因此安裝Django:pip3 install django

二、建立一個Django的project(我這裏使用的是命令建立的使用pycharm能夠直接建立,能夠百度下pycharm如何建立django項目)

django-admin startproject mysite   # 我這裏給這個項目起名字爲mysite,也能夠取別的名字

建立好後會有一個項目出現,咱們進去目錄結構是:

mysite

  -musite

     - _init_.py

     -settings.py     #這個是配置文件

     -urls.py            # url對應的關係

     -wsgi.py   # 遵循WSGI規範,實際用uwsig+nginx

          -manage.py     # 管理django程序:項目管理腳本

              - python manage.py 

              - python manage.py startapp xx            這個是用來建立app

              - python manage.py makemigrations     這個是用來

              - python manage.py migrate

當咱們建立好django的項目的時候就能夠啓動這個項目:

啓動項目:python3 manage.py runserver 

啓動好項目後咱們就能夠經過127.0.0.1:8000來訪問這個網頁

由於這裏默認啓動的本地訪問也就是127.0.0.1默認端口爲8000

若是想要指定端口號就能夠  :python3 manage.py runserver 8080

若是想要指定端口和ip的話:python3 manage.py runserver 192.168.0.1:8080

 

咱們建立好項目後有時候須要建立app這個時候咱們就要進入到這個項目裏面(和manager.py同一個目錄)

使用:python3 manager.py startapp app01      # 這個裏面的python3表示的在doc下輸入python3會進到python3的交互界面。

建立完app後在這個目錄裏面有一些文件,分別是:

app01

  migrations       數據修改表結構(是一個文件夾)

  admin        Django爲咱們提供的後臺管理

  apps                          配置當前的app

  models      ORM,寫指定類,經過命令能夠建立數據庫結構

  tests       單元測試

  views       業務代碼

 

咱們在mysite/app01/views.py文件中,編寫一個視圖:代碼爲

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return HttpResponse('hello world')

 

爲了使用該視圖咱們須要編寫一個路由系統因此咱們能夠在mysite/mysite/urls.py

from django.contrib import admin
from django.conf.urls import url
from django.urls import path
from cmdb import views

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'index/', views.index),
]

 

咱們運行這個項目而後到到瀏覽器打開127.0.0.1:8000/index就會出現上面咱們寫的‘hello world’

上面只是一個簡單的例子沒有用到html的模板,通常模板都會放到manager.py同級目錄下面的templates目錄下面

同時咱們如今把項目下的setting.py裏面的配置找到 'django.middleware.csrf.CsrfViewMiddleware'並把它註釋掉,後面會說相關的事。

這個templates目錄須要咱們本身建立。同時咱們還要建立static目錄用來放置靜態文件等同時咱們要在項目目錄裏面的settings.py文件中最後一行設置

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

 

這裏的static目錄通常放置css和js的文件。

下面我麼作一個關於登錄界面

咱們的在路由系統裏面這樣寫

from django.conf.urls import url
from django.contrib import admin
from cmdb import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login', views.login),
]

 

在試圖函數裏面咱們編寫一個視圖

def login(request):
    # 包含用戶提交的全部信息
    # 獲取用戶提交方法
    # print(request.method)
    error_msg = ""
    if request.method == "POST":
        # 獲取用戶經過POST提交過來的數據
        user = request.POST.get('user', None)
        pwd = request.POST.get('pwd', None)
        if user == 'root' and pwd == "123":
            # 去跳轉到
            return redirect('/login')
        else:
            # 用戶密碼不配
            error_msg = "用戶名或密碼錯誤"
    return render(request, 'login.html', {'error_msg': error_msg})

 

裏面的login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.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" name="user" type="text" />
        </p>
        <p>
            <label for="password">密碼:</label>
            <input id="password" name="pwd" type="password" />
            <input type="submit" value="提交" />
            <span style="color: red;">{{ error_msg }}</span>
        </p>
    </form>
    <script src="/static/jquery.min.js"></script>
</body>
</html>

上面的示列咱們能夠看出當咱們須要咱們作的是定義路由規則、定義視圖函數、模板渲染

定義路由規則

咱們在建立項目的時候最外層和內層的有一個相同的名字的目錄,在外層的目錄與django無關只是項目的容器,能夠任意命名

內層的目錄是真正的項目文件包裹目錄,它的名字是內部文件的包名。下面咱們說的項目名稱就是指的是內部的這個目錄

項目名稱/url.py

url(r'^login', views.login),  這裏面的login訪問的就會尋找views裏面的login函數

定義圖函數

咱們定義app01/views.py裏面的函數

def  login(request):

  request.method   判斷前段是以何種方式把數據傳到後臺的,這裏只是簡單說一下 GET/POST方式

  request.GET.get('',None)  獲取以GET的方式提交的數據

  request.POST.get('',None) 獲取以POST的方式提交的數據

  以何種方式返回頁面的請求

    return HttpResponse('字符串')   直接返回一個字符串

    return render(request,'HTML模板',{key:value,key1:value1...})  這裏面後面是一個字典是把數據傳輸到HTML模板中進行模板渲染 ,這個能夠有能夠沒有

    return redirect('/只能填URL')

模板渲染

  是一個特殊的模板語言。

  咱們在HTML中經過{{views傳過來的變量名 }}使用從views傳過來的數據

def func(request):

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

 

 

index.html

<html>

..

  <body>

    <div>{{current_user}}</div>    # 獲取到上面傳入的'alex',至關於<div>alex</div>

  </body>

</html>

若是咱們傳入的是一堆數據咱們就能夠在HTML裏面使用for循環

def func(request):
return render(request, "index.html", {'current_user': "alex", 'user_list': ['alex','eric']})


index.html

<html>
..
<body>
<div>{{current_user}}</div> # 至關於<div>alex</div>

<ul>
{% for row in user_list %} # user_list爲 ['alex','eric']

{% if row == "alex" %} # 判斷語句
<li>{{ row }}</li>
{% endif %}

{% endfor %}
</ul>

</body>

</html>
上面的for循環在HTML裏面必須是 開始爲{% for i in user %} 結束爲 {% endfor %}
判斷語句在HTML的使用也是同樣的咱們有多個if語句的時候:
   {% if age %}
<a>有年齡</a>
{% if age > 16 %}
<a>老男人</a>
{% else %}
<a>小鮮肉</a>
{% endif %}
  {% elif age%}
    <a>有年齡</a>
  {% else %}
    <a>無年齡</a>
  {% endif %}


若是咱們傳入的是一個列表,字符串等咱們能夠經過索引的方式取值
...
  return render(request, 'index', {'current_user': "alex",
                     'user_list': ['alex','eric'],
                      'user_dict': {'k1': 'v1', 'k2': 'v2'}}})

...
<div> {{user_list.1}}</div> # 列表取值 取列表中的數據和python同樣,索引也是從0開始的。這裏和python使用的方式不同不是用list[]方式取得而是用list.的方式把[]換爲 .
<div> {{user_dict.k1}}</div>   # 字典取值
...
相關文章
相關標籤/搜索