Web應用開發與安全防護-基于Python和統信UOS 課件全套

上傳人：h*** IP屬地：山東上傳時間：2026-08-12 格式：PPTX 頁數：163 大小：11.48MB 積分：39 舉報 版權申訴

已閱讀5頁，還剩158頁未讀，繼續免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

關于基于國產平臺的《Web應用開發與安全防護》關于國產化軟件國產化戰略意義軟件國產化戰略是指通過自主研發、技術創新和產業升級，推動國內軟件產業的發展，減少對國外軟件的依賴，提升國家在信息技術領域的自主可控能力。這一戰略在當今全球化和數字化的背景下具有深遠的意義，主要體現在以下幾個方面：1.保障國家信息安全減少安全風險：依賴國外軟件可能導致關鍵信息基礎設施面臨安全威脅，如數據泄露、網絡攻擊等。國產化軟件能夠更好地滿足國家安全需求，降低被“卡脖子”的風險。自主可控：國產軟件的核心技術和源代碼可控，能夠有效防止后門、漏洞等潛在威脅，確保國家信息安全。2.提升技術自主創新能力打破技術壟斷：通過國產化戰略，推動國內企業在操作系統、數據庫、中間件等核心領域的技術突破，減少對國外技術的依賴。促進技術創新：國產化戰略鼓勵企業加大研發投入，推動技術創新，形成具有自主知識產權的技術體系。3.推動經濟高質量發展培育新興產業：軟件國產化有助于推動信息技術產業的快速發展，形成新的經濟增長點，促進經濟結構優化升級。降低企業成本：國產軟件通常更具成本優勢，能夠降低企業和政府的信息化建設成本，提高經濟效益。4.增強國際競爭力提升國際話語權：通過軟件國產化，中國可以在全球信息技術領域占據更重要的地位，增強在國際標準制定和規則制定中的話語權。推動“走出去”戰略：國產軟件企業可以通過技術創新和產品優化，參與國際競爭，提升中國軟件產業的全球影響力。5.促進產業鏈協同發展完善產業鏈：軟件國產化不僅涉及軟件開發，還包括硬件、操作系統、數據庫、應用軟件等多個環節，能夠帶動整個信息技術產業鏈的協同發展。推動生態建設：國產化戰略有助于構建自主可控的軟件生態，形成從底層技術到上層應用的完整體系。6.支持國家戰略需求服務“數字中國”建設：軟件國產化是“數字中國”戰略的重要組成部分，能夠為政府、企業和社會提供安全可靠的信息化支撐。助力“新基建”發展：在5G、人工智能、大數據等新基建領域，國產軟件能夠提供關鍵的技術支持，推動新型基礎設施的建設。7.應對國際形勢變化應對技術封鎖：在國際形勢復雜多變的背景下，軟件國產化能夠減少對國外技術的依賴，增強應對技術封鎖和貿易摩擦的能力。維護國家利益：通過國產化戰略，中國可以在關鍵領域實現自主可控，維護國家利益和主權。8.推動社會數字化轉型提升公共服務水平：國產軟件能夠為政府、教育、醫療等公共服務領域提供更安全、高效的解決方案，推動社會數字化轉型。促進普惠發展：國產化軟件通常更貼近國內用戶需求，能夠為中小企業和個人用戶提供更普惠的技術服務。總結軟件國產化戰略不僅是技術領域的自主創新，更是國家信息安全、經濟發展和國際競爭力的重要保障。通過推動軟件國產化，中國可以在全球信息技術領域占據更重要的地位，實現從“跟跑”到“并跑”再到“領跑”的跨越式發展。關于考試一、考察目標全面評估學生的Web應用開發能力，包括前端界面設計、后端邏輯處理、數據庫操作及安全防護措施的實施，同時培養學生的團隊合作、創新思維和問題解決能力。二、考察內容技術能力前端開發：HTML/CSS/JavaScript（含jQuery）基礎。后端開發：服務器端語言（Python、Flask等）及框架（如Bootstrap等）使用，Web應用設計與實現。數據庫操作：SQL數據庫設計、增刪改查操作，數據持久化。安全防護：常見的Web安全漏洞識別與防護（如SQL注入、XSS、CSRF等）。團隊合作3-5人自由組合，明確分工，包括組長、前端開發、后端開發、數據庫管理、安全專員等角色。組長負責整體協調、演示答辯，并提出創新點。創新與問題識別提出應用的創新點，展示對技術的深入理解和創新應用。列出項目中存在的漏洞，并說明已采用的或計劃采用的防護措施。三、評分標準基礎分（80分）完成基本的Web應用開發，包括前端界面、后端邏輯、數據庫操作及安全防護。漏洞與防護（動態加分/扣分）自報漏洞不扣分，每發現并報告他人一個漏洞，加5分。若能提出有效的防護措施，不扣分；若無法防護，扣5分。

他人提出有效防護措施，加5分。演示與答辯（時間限制）每組有10分鐘時間，包括5分鐘演示和5分鐘答辯。演示應清晰展示應用功能、技術實現和創新點。答辯環節回答其他組提問，展示對問題的深入理解和解決能力。提交材料（加分）提交完整的可運行代碼和詳細說明書。說明書質量評估，每組可加5-10分。組長根據整體表現和領導能力，額外加5-10分。四、考察流程項目準備期學生自由組隊，明確分工，制定開發計劃。開發與測試期團隊合作完成Web應用開發，進行內部測試和安全檢查。演示與答辯期每組按抽簽進行演示和答辯，接受老師和其他組的提問。提交與評審期提交最終代碼和說明書，老師根據評分標準進行綜合評審。五、注意事項鼓勵學生自主創新，但必須遵守學術誠信，不得抄襲他人作品。強調團隊合作，要求每個成員都積極參與，貢獻自己的力量。老師應公正客觀，根據評分標準進行評分，并及時給予反饋和建議。提供必要的資源和支持，確保學生能夠順利完成項目開發。通過以上結構化方案，可以全面、公正地評估學生的Web應用開發能力，同時促進團隊合作和創新思維的培養。擴展閱讀：Web應用開發與安全防護第一篇

前端開發基礎概述HTML基礎CSS基礎JavaScript基礎1.1概述1.1.1認識WWW架構1.網頁：基本文檔2.網站：網頁的集合3.瀏覽器：訪問網站的工具1.1概述1.1.2

網頁的組成1.HTML（超文本標記語言）：網頁的骨架2.CSS（層疊樣式表）：控制網頁外觀和布局3.JavaScript：實現網頁的動態效果和交互概述HTML基礎CSS基礎JavaScript基礎1.2HTML基礎1.2.4HTML文件結構【index.html】<!DOCTYPE

html><html><head><meta

charset="UTF-8"><title>我的網頁</title><link

rel="stylesheet"

href="styles.css"></head><body><h1>歡迎來到我的網頁</h1><p>這是一個示例段落。</p><a

href="">訪問示例網站</a></body></html>1.2HTML基礎1.2.5文本段落

段落標簽：<p>這是一個段落。</p>

標題標簽：<h1>一級標題</h1>、<h2>二級標題</h2>

換行標簽：這是一行文本。<br>這是下一行文本。

水平線標簽：<hr>

預格式化文本標簽：<pre>這是預格式化的文本。

保留空格和換行。</pre>

塊級引用標簽：<blockquote>這是引用的段落。</blockquote>

地址標簽：<address>作者：張三<br>郵箱：zhang@163.com</address>1.2HTML基礎1.2.6對文本的強調

加粗標簽：<b>這是加粗的文本</b>或<strong>這是重要的文本</strong>

斜體標簽：<i>這是斜體的文本</i>或<em>這是強調的文本</em>

下劃線標簽：<u>這是下劃線的文本</u>

刪除線標簽：<s>這是已刪除的文本</s>或<del>這是不再適用的文本</del>

高亮標簽：<mark>這是高亮顯示的文本</mark>1.2HTML基礎1.2.7多媒體與超鏈接多媒體

圖像：<img

src="image.jpg"

alt="描述性文本"

width="500"

height="300">

音頻：<audio

controls>

<source

src="audio.mp3"

type="audio/mpeg">

您的瀏覽器不支持

audio

元素。

</audio>

視頻：<video

width="640"

height="360"

controls>

<source

src="video.mp4"

type="video/mp4">

您的瀏覽器不支持

video

元素。

</video>1.2HTML基礎1.2.7多媒體與超鏈接超鏈接

基本超鏈接：<a

href="">訪問示例網站</a>

錨點鏈接：<a

href="#section2">跳轉到第二節</a>

...

<h2

id="section2">第二節標題</h2>

電子郵件鏈接：<a

href="mailto:example@">發送郵件</a>

電話鏈接：<a

href="tel:+1234567890">撥打電話</a>1.2HTML基礎1.2.8列表與表格列表

無序列表：

<ul>

</ul>

有序列表：<ol>

定義列表：

<dl>

<dd>描述2</dd></dl>1.2HTML基礎1.2.8列表與表格表格1.基本表格結構<table>

<tr>

</tr>

<tr>

</tr>

</table>1.2HTML基礎1.2.8列表與表格表格2.表格屬性3.表格標題與摘要

<table

border="1"

cellpadding="10"

cellspacing="5">

<!--

表格內容

-->

</table><table>

<summary>表格摘要信息</summary>

<!--

表格內容

--></table>1.2HTML基礎1.2.8列表與表格表格4.表格分組<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td

colspan="2">表尾信息</td>

</tr>

</tfoot></table>1.2HTML基礎1.2.9表單與內嵌式網頁表單（Form）：收集用戶輸入數據<form

action="/submit"

method="post">

<label

for="username">用戶名:</label>

<input

type="text"

id="username"

name="username">

<label

for="password">密碼:</label>

<input

type="password"

id="password"

name="password">

<input

type="submit"

value="提交"></form>1.2HTML基礎1.2.9表單與內嵌式網頁內嵌式網頁（Iframe）結合使用<iframe

src=""

width="600"

height="400"></iframe><form

action="/submit"

method="post">

<label

for="username">用戶名:</label>

<input

type="text"

id="username"

name="username">

<label

for="embedded-content">嵌入內容:</label>

<iframe

src="/embedded-form"

width="600"

height="400"></iframe>

<input

type="submit"

value="提交"></form>概述HTML基礎CSS基礎JavaScript基礎1.3CSS基礎1.3.1在網頁中加入CSS樣式1.內聯樣式

2.內部樣式表<p

style="color:

red;

font-size:

16px;">這是一個帶有內聯樣式的段落。</p><head>

<style>

body

{

background-color:

#f0f0f0;

}

{

color:

blue;

font-size:

18px;

}

</style></head>1.3CSS基礎1.3.1在網頁中加入CSS樣式3.外部樣式表

<!--

在HTML文檔的<head>部分

-->

<head>

<link

rel="stylesheet"

type="text/css"

href="styles.css">

</head>

<!--

在styles.css文件中

-->

body

{

background-color:

#f0f0f0;

}

{

color:

blue;

font-size:

18px;

}1.3CSS基礎1.3.1在網頁中加入CSS樣式4.使用CSS框架

<!--

引入Bootstrap

CSS框架

-->

<link

rel="stylesheet"

href="/bootstrap/4.5.2/css/bootstrap.min.css">

<!--

使用Bootstrap的樣式類

-->

<div

class="container">

class="text-center">這是一個使用Bootstrap樣式的段落。</p>

</div>1.3CSS基礎1.3.2規則的組成1.選擇器：2.聲明塊：p、.myClass、#myId、[type="text"]、:hoverp

{

color:

blue;

font-size:

16px;}1.3CSS基礎1.3.3文字效果

顏色：

{color:

red;}

字體大小：p

{font-size:

16px;}

字體家族：

{font-family:

Arial,

sans-serif;}

字體加粗：

{font-weight:

bold;}

字體樣式：

{font-style:

italic;}

文本對齊：

{text-align:

center;}

文本裝飾：

{text-decoration:

none;}

文本陰影：

{text-shadow:

2px

5px

rgba(0,

0.3);}

文字間距：

{letter-spacing:

2px;}

10.

行高：

{line-height:

1.5;}1.3CSS基礎1.3.4背景效果1.

背景顏色:body

{background-color:

#f0f0f0;}2.

背景圖像:body

{background-image:

url('background.jpg');}3.

背景重復:body

{background-repeat:

no-repeat;}4.

背景位置:body

{background-position:

center

center;}5.

背景大小:body

{background-size:

cover;}6.

背景附著:body

{background-attachment:

fixed;}

背景簡寫:body

{background:

#f0f0f0

url('background.jpg')

no-repeat

center

cover

fixed;}

1.3CSS基礎1.3.5

設計邊框與列表樣式邊框樣式

邊框寬度：.element

{border-width:

2px;}

邊框樣式：.element

{border-style:

solid;}

邊框顏色：.element

{border-color:

#333;}列表樣式

列表標記類型：ul

{list-style-type:

square;}

列表標記圖像：ul

{list-style-image:

url('marker.png');}

列表標記位置：ul

{list-style-position:

outside;}

列表樣式簡寫：ul

{list-style:

square

url('marker.png')

outside;}1.3CSS基礎1.3.6

設計版面與特效版面設計：1.布局模型Flexbox：

.container

{

display:

flex;

justify-content:

space-between;

水平分布

align-items:

center;

垂直居中

}Grid：

.grid-container

{

display:

grid;

grid-template-columns:

repeat(3,

1fr);

三列等寬布局

grid-template-rows:

auto;

}1.3CSS基礎3.6使用CSS設計版面與特效版面設計：2.定位相對定位：

.element

{

position:

relative;

top:

10px;

向下偏移10px

left:

20px;

向右偏移20px

}絕對定位：

.parent

{

position:

relative;

}

.child

{

position:

absolute;

top:

right:

}1.3CSS基礎1.3.6

設計版面與特效版面設計：3.浮動與清除浮動浮動：

.float-left

{

float:

left;

}清除浮動：

.clear

{

clear:

both;

}1.3CSS基礎3.6使用CSS設計版面與特效特效設計:1.過渡

.element

{

transition:

background-color

0.5s

ease;

}

.element:hover

{

background-color:

#f00;

}1.3CSS基礎1.3.6

設計版面與特效特效設計：2.變換

.element

{

transform:

rotate(45deg);

旋轉45度

}1.3CSS基礎1.3.6

設計版面與特效特效設計：3.動畫

@keyframes

example

{

{background-color:

red;

left:

0px;

top:

0px;}

25%

{background-color:

yellow;

left:

200px;

top:

0px;}

50%

{background-color:

blue;

left:

200px;

top:

200px;}

75%

{background-color:

green;

left:

0px;

top:

200px;}

100%

{background-color:

red;

left:

0px;

top:

0px;}

}

.element

{

animation-name:

example;

animation-duration:

4s;

animation-timing-function:

linear;

animation-iteration-count:

infinite;

}1.3CSS基礎1.3.6

設計版面與特效特效設計：4.陰影與漸變陰影：

.element

{

box-shadow:

10px

5px

rgba(0,

0.3);

}漸變：

.gradient-background

{

background:

linear-gradient(to

right,

red,

yellow);

}1.3CSS基礎1.3.7

創建示例【CSS.html】<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>CSS

Special

Effect

Button</title>

<style>

.special-button

{

background-color:

#4CAF50;

綠色背景

border:

none;

無邊框

color:

white;

白色文字

padding:

15px

32px;

內邊距

text-align:

center;

文字居中

text-decoration:

none;

無下劃線

display:

inline-block;

行內塊級元素

font-size:

16px;

字體大小

margin:

4px

2px;

外邊距

cursor:

pointer;

鼠標懸停時顯示指針

border-radius:

12px;

圓角邊框

transition:

background-color

0.3s;

背景顏色過渡效果

}

.special-button:hover

{

background-color:

#45a049;

鼠標懸停時背景顏色變深

}

.special-button:active

{

background-color:

#45a049;

點擊時背景顏色變深

box-shadow:

5px

#666;

點擊時產生陰影

transform:

translateY(4px);

點擊時按鈕下移

}

</style></head><body><button

class="special-button">點擊我</button></body></html>概述HTML基礎CSS基礎JavaScript基礎1.4JavaScript基礎1.4.1認識JavaScript1.基本特性動態類型面向對象事件驅動2.主要用途網頁開發服務器端開發：Nodes.js移動應用開發：ReactNative、Cordova1.4JavaScript基礎1.4.1認識JavaScript3.語法特點簡潔明了靈活多變異步處理4.生態系統豐富的庫和框架：jQuery、React、Vue、Angular社區支持5.學習建議基礎語法DOM操作異步編程實踐項目1.4JavaScript基礎1.4.2在網頁中加入JavaScript程序

編寫JavaScript代碼：script.js

在HTML文件中引用JavaScript文件:<script

src="path/to/your/script.js"></script>

直接在HTML文件中編寫JavaScript代碼：<script>console.log("Hello,

World!");</script>

注意執行時機：window.onload事件或DOMContentLoaded事件

調試和測試：F121.4JavaScript基礎1.4.3改變網頁內容1.

修改文本內容：document.getElementById("myElement").innerHTML

"新的內容";document.getElementById("myElement").textContent

"新的內容";

修改HTML結構：document.getElementById("myDiv").innerHTML

"<p>這是一個新的段落。</p>";

修改樣式：document.getElementById("myElement").style.color

"red";

document.getElementById("myElement").style.fontSize

"20px";1.4JavaScript基礎1.4.3改變網頁內容4.

添加或刪除元素：

創建一個新的元素

var

newElement

document.createElement("div");

newElement.textContent

"我是一個新元素";

將新元素添加到現有元素中

document.getElementById("myContainer").appendChild(newElement);

刪除一個元素

var

elementToRemove

document.getElementById("elementToRemove");

elementToRemove.parentNode.removeChild(elementToRemove);5.

響應用戶事件：document.getElementById("myButton").addEventListener("click",

function()

{

document.getElementById("myText").textContent

"按鈕被點擊了！";

});1.4JavaScript基礎1.4.4DOM與事件處理DOM對象模型1.主要特點文檔樹節點類型遍歷和修改2.常用操作獲取元素：document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagNam修改內容：innerHTML、textContent修改樣式：style屬性或classList方法添加、刪除元素：createElement、appendChild、removeChild1.4JavaScript基礎1.4.4DOM與事件處理事件處理1.主要事件類型鼠標事件：如click（點擊）、mouseover（鼠標懸停）、mouseout（鼠標移出）等鍵盤事件：如keydown（按鍵按下）、keyup（按鍵釋放）等表單事件：如submit（表單提交）、change（輸入值改變）等2.事件處理步驟（1）選擇元素；（2）添加事件監聽器（addEventListener）；（3）定義回調函數。3.示例代碼：//

選擇元素var

button

document.getElementById("myButton");

添加點擊事件監聽器button.addEventListener("click",

function()

{

alert("按鈕被點擊了！");});1.4JavaScript基礎1.4.5操作示例示例1：獲取元素并修改其內容【1.4.5.示例1.html】示例2：設置元素屬性【1.4.5.示例2.html】示例3：修改元素樣式【1.4.5.示例3.html】示例4：處理事件【1.4.5.示例4.html】1.4JavaScript基礎1.4.6控制瀏覽器1.

打開新窗口或標簽頁：window.open('',

'_blank');

關閉當前窗口：window.close();

調整窗口大小：window.resizeTo(800,

600);

滾動頁面：window.scrollTo(0,

100);

設置或獲取窗口的定時器：

設置一個定時器，在3秒后執行指定的函數

var

timer

window.setTimeout(function()

{

alert('3秒已過！');

3000);

清除定時器

window.clearTimeout(timer);1.4JavaScript基礎1.4.6控制瀏覽器

控制瀏覽器歷史記錄：

加載歷史記錄中的上一個頁面

window.history.back();

加載歷史記錄中的下一個頁面

window.history.forward();

加載特定的URL到瀏覽器歷史記錄中

window.history.pushState({page:

1},

"Title

1",

"?page=1");

獲取窗口信息：

var

width

window.innerWidth;

var

height

window.innerHeight;

console.log('窗口寬度:',

width,

'像素');

console.log('窗口高度:',

height,

'像素');1.4JavaScript基礎1.4.6控制瀏覽器

創建對話框：

顯示一個警告框

window.alert('這是一個警告框！');

顯示一個確認框，并獲取用戶的選擇

var

userConfirmed

window.confirm('你確定要繼續嗎？');

(userConfirmed)

{

console.log('用戶點擊了“確定”');

}

else

{

console.log('用戶點擊了“取消”');

}

顯示一個輸入框，并獲取用戶輸入的值

var

userInput

mpt('請輸入你的名字：');

console.log('用戶輸入了：',

userInput);1.4JavaScript基礎1.4.7JavaScript語法1.

變量聲明：

var

name

"Alice";

let

age

25;

const

3.14;2.

數據類型：

let

str

"Hello,

World!";

let

num

42;

let

bool

true;

let

obj

{name:

"Bob",

age:

30};

let

arr

[1,

5];3.

運算符：

let

sum

算術運算符

let

count

賦值運算符

let

isEqual

3);

比較運算符

let

isTrue

(true

false);

邏輯運算符1.4JavaScript基礎1.4.7JavaScript語法4.

條件語句：

let

score

85;

(score

60)

{

console.log("及格");

}

else

{

console.log("不及格");

}switch

(day)

{

case

'Monday':

console.log('今天是星期一');

break;

case

'Tuesday':

console.log('今天是星期二');

break;

default:

console.log('今天是其他日子');

}1.4JavaScript基礎4.7JavaScript語法5.

循環語句：

for

(let

i++)

{

console.log(i);

}

let

while

{

console.log(j);

j++;

}

let

{

console.log(k);

k++;

}

while

5);1.4JavaScript基礎1.4.7JavaScript語法6.

函數：

function

greet(name)

{

console.log("Hello,

name

"!");

}

const

add

(a,

b;7.

對象字面量：

let

person

{

name:

"John",

age:

30,

greet:

function()

{

console.log("Hello,

name

);

}

};1.4JavaScript基礎1.4.7JavaScript語法8.

數組：let

fruits

["Apple",

"Banana",

"Cherry"];9.

模板字符串（ES6+）：

let

name

"Alice";

let

greeting

`Hello,

${name}!`;10.

解構賦值（ES6+）：

let

arr

[1,

3];

let

[a,

arr;

let

obj

{name:

"Bob",

age:

30};

let

{name,

age}

obj;

name

"Bob",

age

301.4JavaScript基礎1.4.8常見DOM事件1.

鼠標事件：點擊事件（click）：document.getElementById('myButton').addEventListener('click',

function()

{

alert('Button

clicked!');

});鼠標移入事件（mouseover）：document.getElementById('myDiv').addEventListener('mouseover',

function()

{

this.style.backgroundColor

'yellow';

});鼠標移出事件（mouseout）：document.getElementById('myDiv').addEventListener('mouseout',

function()

{

this.style.backgroundColor

'';

});1.4JavaScript基礎1.4.8常見DOM事件2.

鍵盤事件：按鍵按下事件（keydown）：document.addEventListener('keydown',

function(event)

{

(event.key

===

'Enter')

{

alert('Enter

key

pressed!');

}

});按鍵抬起事件（keyup）：document.getElementById('myInput').addEventListener('keyup',

function()

{

console.log('Input

value:',

this.value);

});1.4JavaScript基礎1.4.8常見DOM事件3.

表單事件表單提交事件（submit）：document.getElementById('myForm').addEventListener('submit',

function(event)

{

event.preventDefault();

阻止表單默認提交行為

alert('Form

submitted!');

});

輸入框變化事件（input）：document.getElementById('myInput').addEventListener('input',

function()

{

console.log('Input

value

changed:',

this.value);

});1.4JavaScript基礎1.4.8常見DOM事件4.

窗口事件窗口加載事件（load）：window.addEventListener('load',

function()

{

console.log('Window

loaded!');

});窗口調整大小事件（resize）：window.addEventListener('resize',

function()

{

console.log('Window

resized

to:',

window.innerWidth,

window.innerHeight);

});1.4JavaScript基礎1.4.8常見DOM事件5.

拖拽事件拖拽開始事件（dragstart）：document.getElementById('myDraggable').addEventListener('dragstart',

function(event)

{

event.dataTransfer.setData('text/plain',

event.target.id);

});拖拽進入目標事件（dragenter）：document.getElementById('myDropzone').addEventListener('dragenter',

function(event)

{

event.preventDefault();

this.style.border

'3px

solid

blue';

});拖拽離開目標事件（dragleave）：document.getElementById('myDropzone').addEventListener('dragleave',

function()

{

this.style.border

'';

});1.4JavaScript基礎1.4.8常見DOM事件5.

拖拽事件拖拽放置事件（drop）：document.getElementById('myDropzone').addEventListener('drop',

function(event)

{

event.preventDefault();

var

data

event.dataTransfer.getData('text');

alert('Dropped

data:',

data);

});document.getElementById('myDropzone').addEventListener('dragleave',

function()

{

this.style.border

'';

});1.4JavaScript基礎1.4.9

DOM事件處理示例1.HTML部分【DOM.html】2.JavaScript部分（script.js）【script.js】3.代碼解釋擴展閱讀：Web應用開發與安全防護第二篇

后端開發基礎Python基礎創建Flask應用創建數據庫注冊和登錄功能FlaskBootstarpFlaskjQueryFlaskLogin搭建服務器第2章Python基礎2.2變量和數據類型1.

變量2.

數據類型：int,float,complex,str,list,tuple,set,dict,bool,None2.3控制結構1.

條件語句i_int

10f_float=3.14s_str

"Hello,

World!"l_list

["apple",

"banana",

"cherry"]t_set

{1,

5}d_dict

{'name':

'Alice',

'age':

25}b_bool=Truex

10if

print("x

greater

than

5")elif

print("x

equal

5")else:

print("x

less

than

5")統信UOS常用Shell命令：第2章Python基礎2.3控制結構2.

循環語句#

使用break語句for

range(10):

break

當i等于5時退出循環

print(i)

使用continue語句for

range(10):

continue

跳過偶數

print(i)

只打印奇數fruits

["apple",

"banana",

"cherry"]for

fruits:

print(f)count

0while

count

print(ccount)

count

嵌套循環示例for

range(3):

for

range(2):

print(f"i={i},

j={j}")第2章Python基礎2.4函數1.

定義函數2.

調用函數3.

參數4.

返回值5.

局部和全局變量6.Lambda函數7.

文檔字符串8.

嵌套函數9.

閉包def

my_function(param1,

param2):

函數體

result

param1

param2

return

resultresult

my_function(5,

10)print(result)

輸出:

15my_lambda

lambda

yprint(my_lambda(5,

10))

輸出:

15第2章Python基礎2.5類和對象1.

類（Class）2.

對象（Object）3.

示例代碼4.

注意事項class

Dog:

類屬性（通常用于定義所有實例共享的常量）

species

"Canis

familiaris"

def

__init__(self,

name,

age):

實例屬性

name

self.age

age

def

bark(self):

實例方法

return

f"{}

says

Woof!"#

創建對象實例d

Dog("Rex",

訪問屬性print()

輸出:

Rex#

調用方法print(d.bark())

輸出:

Rex

says

Woof!第2章Python基礎2.6模塊和包1.

模塊（Module）2.

包（Package）3.

使用模塊和包的好處import

mathmypackage/

__init__.py

module1.py

module2.py

subpackage/

__init__.py

module3.pyfrom

mypackage.module1

import

some_function第2章Python基礎2.7文件操作1.

打開文件2.

讀取文件3.

寫入文件4.

關閉文件5.

文件路徑file

open('filename.txt',

'r')

打開'filename.txt'文件（'r'表示讀取模式）content

file.read()

讀取整個文件內容lines

file.readlines()

讀取文件的所有行，并將它們作為列表返回file

open('data/filename.txt',

'w')file.write('Hello,

world!')

將字符串'Hello,

world!'寫入文件file.close()

關閉文件with

open('Home/www/data/filename.txt',

'w')

file:

file.write('Hello,

world!')

文件會在with塊結束時自動關閉第2章Python基礎2.8異常處理1.

異常處理的基本結構2.

示例代碼3.

捕獲多個異常4.

捕獲所有異常5.

自定義異常try:

可能引發異常的代碼

result

這將引發一個ZeroDivisionError異常except

ZeroDivisionError:

處理ZeroDivisionError異常的代碼

print("除數不能為零！")else:

如果沒有異常發生，則執行這里的代碼

print(f"結果是：{result}")finally:

無論是否發生異常，都會執行這里的代碼

print("執行完畢。")第2章Python基礎2.9標準庫和第三方庫1.Python標準庫：os,sys,math,random,time,datetime,re,json,argparse,logging2.Python第三方庫：NumPy,Pandas,SciPy,Matplotlib,Flask,Django,Requests,Scrapy,NLTK,spaCy,TextBlob,Pillow,OpenCV,Scikit-learn,PyTorch,TensorFlow,SQLAlchemy,sqlite3,PyQt/Python基礎創建Flask應用創建數據庫注冊和登錄功能FlaskBootstarpFlaskjQueryFlaskLogin搭建服務器第3章Flask基礎：3.1創建FlaskWeb應用步驟1:安裝Flask步驟2:創建Flask應用【app.py】#

app.pyfrom

flask

import

Flask,

render_template

app

Flask(__name__)

@app.route('/')def

home():

return

render_template('index.html',

message='Hello,

World!')

@app.route('/about')def

about():

return

render_template('about.html')

__name__

'__main__':

app.run(debug=True)$

pip3

install

Flask第3章Flask基礎：3.1創建FlaskWeb應用步驟3:創建模板：【templates/index.html】<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<h1>{{

message

}}</h1>

href="{{

url_for('about')

}}">About</a></body></html>第3章Flask基礎：3.1創建FlaskWeb應用步驟3:創建模板：【templates/about.html】<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>About</title></head><body>

<h1>About

Page</h1>

<p>This

the

about

page

our

Flask

application.</p>

href="{{

url_for('home')

}}">Home</a></body></html>第3章Flask基礎：3.1創建FlaskWeb應用步驟4:運行:$python3app.py$

python3

app.py

Serving

Flask

app

'app'

Debug

mode:

onWARNING:

This

development

server.

not

use

production

deployment.

Use

production

WSGI

server

instead.

Running

http://:5000Press

CTRL+C

quit

Restarting

with

stat

Debugger

active!

Debugger

PIN:

111-895-224$sudolsof-i:5000$sudokill-9<PID>Python基礎創建Flask應用創建數據庫注冊和登錄功能FlaskBootstarpFlaskjQueryFlaskLogin搭建服務器第3章Flask基礎：3.2創建數據庫1.定義數據庫模型：Flask-SQLAlchemy2.配置數據庫連接：URI（統一資源標識符）3.創建數據庫和表：4.（可選）遷移數據庫：第3章Flask基礎：3.2創建數據庫步驟1:安裝Flask-SQLAlchemy步驟2:定義Flask應用和數據庫模型from

flask

import

Flaskfrom

flask_sqlalchemy

import

SQLAlchemy

app

Flask(__name__)app.config['SQLALCHEMY_DATABASE_URI']

'sqlite:///site.db'

使用

SQLite

數據庫作為示例app.config['SQLALCHEMY_TRACK_MODIFICATIONS']

False

SQLAlchemy(app)

class

User(db.Model):

db.Column(db.Integer,

primary_key=True)

username

db.Column(db.String(80),

unique=True,

nullable=False)

db.Column(db.String(120),

unique=True,

nullable=False)

def

__repr__(self):

return

f'<User

{self.username}>'$

pip3

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

Web應用開發與安全防護-基于Python和統信UOS 課件全套

文檔簡介

溫馨提示

最新文檔

評論

Web應用開發與安全防護-基于Python和統信UOS 課件全套

文檔簡介

溫馨提示

最新文檔

評論

相關文檔