臨清做網(wǎng)站推廣站長網(wǎng)站提交
此項目基于Django + MySQL + HTML + CSS + JS + jQuery + bootstrap實現(xiàn)的功能有
- 學(xué)生管理
- 部門管理
- 代辦清單管理
- 校園論壇
- 校園醫(yī)療服務(wù)
- 校園看點
- 校園生活助手
- 常用功能入口
1. 一些注意點
1. 頁面body會自動有一些邊界距，處理方法：
<head><style>body{ <---margin:0; <---} <---</style>
</head>
2. 當(dāng)html中部分語句樣式為float時，記得在最后一定清除
<body><div class="header"><div class="menu">菜單</div><div class="account">賬戶</div><!--有浮動一定記得最后的清除 --><div style="clear: both"></div> <------- **</div>
</body>
3. 內(nèi)容居中
- 區(qū)域居中
.c1{width: 200px; # 注意，*這里寬度必須指定*margin: 0 auto; # 上下邊距為0，左右自動居中
}
- 文本居中
<div style="width: 2000px; text-align: center;">摩西摩西</div>
4. 如果想用別人的樣式
5. 塊級和行內(nèi)標(biāo)簽
- 塊級
- 行內(nèi)
- css樣式：標(biāo)簽 ->
display:inline-block
示例：行內(nèi)&塊級特性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}</style>
</head>
<body><span class="c1">中國</span><span class="c1">聯(lián)通</span><span class="c1">聯(lián)通</span><span class="c1">聯(lián)通</span>
</body>
</html>
示例：塊級和行內(nèi)標(biāo)簽的設(shè)置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body><div style="display: inline;">中國</div><span style="display: block;">聯(lián)通</span>
</body>
</html>
2.快速開發(fā)網(wǎng)站
pip install flask
from flask import Flaskapp = Flask(__name__)# 創(chuàng)建了網(wǎng)址 /show/info 和 函數(shù)index 的對應(yīng)關(guān)系
# 以后用戶在瀏覽器上訪問 /show/info，網(wǎng)站自動執(zhí)行 index
@app.route("/show/info")
def index():return "中國聯(lián)通"if __name__ == '__main__':app.run()
-
Flask框架為了讓咱們寫標(biāo)簽方便，支持將字符串寫入到文件里。
-
from flask import Flask,render_templateapp = Flask(__name__)@app.route("/show/info")def index():# Flask內(nèi)部會自動打開這個文件，并讀取內(nèi)容，將內(nèi)容給用戶返回。# 默認(rèn)：去當(dāng)前項目目錄的templates文件夾中找。return render_template("index.html")if __name__ == '__main__':app.run()
3.瀏覽器能識別的標(biāo)簽
2.1 編碼（head）
<meta charset="UTF-8">
2.2 標(biāo)題
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的聯(lián)通</title>
</head>
<body><h1>1級標(biāo)題</h1><h2>2級標(biāo)題</h2><h3>3級標(biāo)題</h3><h4>4級標(biāo)題</h4><h5>5級標(biāo)題</h5><h6>6級標(biāo)題</h6>
</body>
</html>
2.3 div和span
<div>內(nèi)容</div><span>asdfa</span>
-
div，一個人占一整行。【塊級標(biāo)簽】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>我的聯(lián)通</title> </head> <body><div>山東藍(lán)翔</div><div>挖掘機哪家強</div> </body> </html> -
span，自己多大占多少?！拘袃?nèi)標(biāo)簽、內(nèi)聯(lián)標(biāo)簽】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>我的聯(lián)通</title> </head> <body><span>山東藍(lán)翔</span><span>挖掘機哪家強</span> </body> </html>2.4.5 超鏈接
跳轉(zhuǎn)到其他網(wǎng)站 <a href="http://www.chinaunicom.com.cn/about/about.html">點擊跳轉(zhuǎn)</a>跳轉(zhuǎn)到自己網(wǎng)站其他的地址<a href="http://127.0.0.1:5000/get/news">點擊跳轉(zhuǎn)</a> <a href="/get/news">點擊跳轉(zhuǎn)</a># 當(dāng)前頁面打開 <a href="/get/news">點擊跳轉(zhuǎn)</a># 新的Tab頁面打開 <a href="/get/news" target="_blank">點擊跳轉(zhuǎn)</a>2.4.6 圖片
<img src="圖片地址" />直接顯示別人的圖片地址（防盜鏈）： <img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" /><img src="自己圖片的地址" /> 顯示自己的圖片：- 自己項目中創(chuàng)建：static目錄，圖片要放在static- 在頁面上引入圖片<img src="/static/wbq.png" />關(guān)于設(shè)置圖片的高度和寬度
<img src="圖片地址" style="height:100px; width:200px;" /> <img src="圖片地址" style="height:10%; width:20%;" />小結(jié)
-
學(xué)習(xí)的標(biāo)簽
<h1></h1> <div></div> <span></span> <a></a> <img /> -
劃分
- 塊級標(biāo)簽<h1></h1><div></div> - 行內(nèi)標(biāo)簽<span></span><a></a><img /> -
嵌套
<div><span>xxx</span><img /><a></a> </div>
-
2.4.7 列表
<ul><li>中國移動</li><li>中國聯(lián)通</li><li>中國電信</li>
</ul>
<ol><li>中國移動</li><li>中國聯(lián)通</li><li>中國電信</li>
</ol>
2.4.8 表格
<table><thead><tr> <th>ID</th> <th>姓名</th> <th>年齡</th> </tr></thead><tbody><tr> <td>10</td> <td>武沛齊</td> <td>19</td> </tr><tr> <td>11</td> <td>吳陽軍</td> <td>19</td> </tr><tr> <td>12</td> <td>劉東</td> <td>19</td> </tr><tr> <td>13</td> <td>郭智</td> <td>19</td> </tr><tr> <td>14</td> <td>電摩</td> <td>19</td> </tr></tbody>
</table>
2.4.9 input系列（7個）
<input type="text" />
<input type="password">
<input type="file"> <input type="radio" name="n1">男
<input type="radio" name="n1">女<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球<input type="button" value="提交"> -->普通的按鈕
<input type="submit" value="提交"> -->提交表單
2.4.10 下拉框
<select><option>北京</option><option>上海</option><option>深圳</option>
</select><select multiple><option>北京</option><option>上海</option><option>深圳</option>
</select>
2.4.11 多行文本
<textarea></textarea>
2.4.12網(wǎng)絡(luò)請求
-
在瀏覽器的URL中寫入地址，點擊回車，訪問。
瀏覽器會發(fā)送數(shù)據(jù)過去，本質(zhì)上發(fā)送的是字符串： "GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"瀏覽器會發(fā)送數(shù)據(jù)過去，本質(zhì)上發(fā)送的是字符串： "POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n數(shù)據(jù)庫" -
瀏覽器向后端發(fā)送請求時
-
GET請求【URL方法 / 表單提交】
-
現(xiàn)象：GET請求、跳轉(zhuǎn)、向后臺傳入數(shù)據(jù)數(shù)據(jù)會拼接在URL上。
https://www.sogou.com/web?query=安卓&age=19&name=xx注意：GET請求數(shù)據(jù)會在URL中體現(xiàn)。
-
-
POST請求【表單提交】
- 現(xiàn)象：提交數(shù)據(jù)不在URL中而是在請求體中。
-
注意點：
.sub-header .logo a {margin-top: 22px;display: inline-block <!-- 塊級標(biāo)簽， a默認(rèn)為行內(nèi)標(biāo)簽，無法實現(xiàn)一行浮動 -->
}.sub-header .menu-list a{display: inline-block;padding: 0 10px; <!-- 填補下內(nèi)邊距，使得鼠標(biāo)在鏈接對應(yīng)字體外一定距離也能點擊跳轉(zhuǎn) -->color: #333;font-size: 16px;text-decoration: none; <!-- 取消鏈接下默認(rèn)的下劃線 -->
}.sub-header .menu-list a:hover{ <!--- 鼠標(biāo)移動到鏈接對應(yīng)入口處變色 --->color: #ff6700;
}
-
a標(biāo)簽是行內(nèi)標(biāo)簽，行內(nèi)標(biāo)簽的高度、內(nèi)外邊距，默認(rèn)無效。
-
垂直方向居中
- 本文 + line-height
- 圖片 + 邊距
-
a標(biāo)簽?zāi)J(rèn)有下劃線。 - - - >
text-decoration: none -
鼠標(biāo)放上去之后hover
.c1:hover{... } a:hover{}
登錄驗證
加密
首先導(dǎo)入下方代碼用md5實現(xiàn)加密
from django.conf import settings
import hashlibdef md5(data_string):obj = hashlib.md5(settings.SECRET_KEY.encode('utf-8'))obj.update(data_string.encode('utf-8'))return obj.hexdigest()
登錄 and 確認(rèn)登錄
from django import forms
from app01.utils.bootstrap import BootStrapModelForm
class AdmiModelnForm(BootStrapModelForm):confirm_password = forms.CharField(label="確認(rèn)密碼",widget=forms.PasswordInput())class Meta:model = models.Adminfields = ["username", 'password', 'confirm_password']widgets = {'password': forms.PasswordInput()}def clean_password(self):pwd = self.cleaned_data.get('password')return md5(pwd)def clean_confirm_password(self):pwd = self.cleaned_data.get('password')confirm = md5(self.cleaned_data.get('confirm_password'))if pwd != confirm:raise ValidationError("密碼不一致，請重新輸入")return confirm # 這里返回要存入數(shù)據(jù)庫的密碼def admin_add(request):title = "新建管理員"if request.method == 'GET':form = AdmiModelnForm()return render(request, 'change.html', {'form': form, "title": title})form = AdmiModelnForm(request.POST)if form.is_valid():form.save()return redirect('/admin/list/')return render(request, 'change.html', {'form': form, "title": title})
檢驗之前是否登錄過：
登錄成功后：
- cookie，隨機字符串
- session，用戶信息
在其他需要登錄才能訪問的頁面中，都需要加入：
def index(request):info = request.session.get("info")if not info:return redirect('/login/')...
目標(biāo)：在18個視圖函數(shù)前面統(tǒng)一加入判斷。
info = request.session.get("info")
if not info:return redirect('/login/')
功能太多一個一個復(fù)制太繁瑣，django自帶封裝的中間件可以用
圖片驗證碼
效果如下：
邏輯如下：
import random
from PIL import Image, ImageDraw, ImageFont, ImageFilterdef check_code(width=120, height=30, char_length=5, font_file='Monaco.ttf', font_size=28):code = []img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))draw = ImageDraw.Draw(img, mode='RGB')def rndChar():"""生成隨機字母:return:"""# return str(random.randint(0, 9))return chr(random.randint(65, 90))def rndColor():"""生成隨機顏色:return:"""return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))# 寫文字font = ImageFont.truetype(font_file, font_size)for i in range(char_length):char = rndChar()code.append(char)h = random.randint(0, 4)draw.text([i * width / char_length, h], char, font=font, fill=rndColor())# 寫干擾點for i in range(40):draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())# 寫干擾圓圈for i in range(40):draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())x = random.randint(0, width)y = random.randint(0, height)draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())# 畫干擾線for i in range(5):x1 = random.randint(0, width)y1 = random.randint(0, height)x2 = random.randint(0, width)y2 = random.randint(0, height)draw.line((x1, y1, x2, y2), fill=rndColor())img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)return img, ''.join(code)
定義調(diào)用函數(shù)
def image_code(request):"""生成圖片驗證碼"""# 調(diào)用pillow 函數(shù)， 生成圖片img, code_str = check_code()print(code_str)# 寫入到session中，以便于或許獲取再次驗證request.session['image_code'] = code_str# 給session設(shè)置60s超時request.session.set_expiry(60)stream = BytesIO()img.save(stream, 'png')return HttpResponse(stream.getvalue())
連著兩天幾乎一動不動的在電腦旁做系統(tǒng)，emm………
想要源碼可以關(guān)注下等待后續(xù)…