簡介：

穿插路程，是指快去快回，來去一陣風，走的快，走馬觀花，沒有細品。細品那就要慢慢熬功夫嘍。

1.完成后的效果是：

用戶訪問入口頁面，錄入信息，提交后結果以逐步添加的形式展現在頁面上，可以對歷史輸入信息進行再次快捷錄入。

2.技術結構為：后端采用python-django，前端采用原生js，使用ajax方式交互

處理流程為：用戶訪問入口頁面時，django返回一個頁面，用戶在頁面上錄入數據提交后，django不再返回一個頁面，而是返回JSON格式的數據，此時前端頁面展示只做部分刷新。

其他：前端頁面只有結構，沒有CSS效果。JS實現AJAX異步提交、頁面部分加載、歷史信息快捷錄入功能。后端django沒有業務處理代碼，沒有持久化層，只是將輸入獲取到后轉換為JSON格式返回。

框架介紹

前端后端的劃分，是一個邏輯上的劃分，也是一個物理上的劃分。

邏輯上的劃分在于，物理上前端后端的代碼是在一起的，所謂在一起，是指他們物理上都存儲在后臺服務器上，用戶的一切操作從瀏覽器獲取后臺的入口頁面開始。因為物理上在一起，所以我們說是從邏輯上劃分出前端和后端。

物理上的劃分在于，后端返回頁面或數據后，前端的執行在用戶的瀏覽器側，前端提交數據到后臺后，業務的執行在后端服務器側。物理上是分開的。

django的WEB框架叫做MTV，不是K歌的MTV，是Model-Template-View。這里不涉及Model，模板語言也沒有使用，所以只說一下View，View是視圖，和我們普遍理解的視圖不一樣，而是和數據庫里的視圖概念類似，可以理解為在后端決定如何返回數據，而不是前端決定如何展示。另外還有一個很重要的框架功能，路由，卻沒有出現在MTV這個名稱里。

從后臺開始

先安裝好django模塊，然后新建項目p1和應用a1

python -m django startproject p1

cd p1

python manage.py startapp a1

mkdir a1/templates

得到項目結構

可以看到項目內有全局路由(p1/urls.py)，應用內有V(a1/views.py)和M(a1/models.py)，T我們手工建立了目錄(a1/templates)

完成后臺的代碼；配置模板目錄、靜態文件目錄；配置路由，就簡單的在全局路由里配置了

這里只放一個后臺代碼圖:當訪問路徑/hei時，返回頁面；訪問/hei/ha時，返回JSON數據

到前端結束

前端文件都放在模板目錄里，有HTML頁面文件、JS文件

HTML頁面文件簡單定義頁面結構，輸入部分，和輸出表格部分

JS文件，實現輸入后的異步提交(從雨神老師的WEB全棧里學的AJAX方法)，以及使用歷史消息快捷錄入(自己琢磨寫的)

首先設置按鈕的提交函數：獲取輸入值，定義對ajax返回數據進行回調處理的函數，調用ajax函數，定義ajax函數

回調函數里，新增一個表格行，用返回數據填充前二列，第三列新建一個按鈕，定義它的點擊事件處理函數。

點擊事件處理函數里，獲取事件發生對象的前面二列的值，賦值給輸入框

代碼可能比較不美，但是，都是自己手敲出來的。見附件。

在chrome上測試過(已知在IE8上有JS兼容性問題，當然是自己寫的部分不太好啦)

使用CloudIDE，省事。

總結

以上是生活随笔為你收集整理的pythonweb全栈开发_Web全栈开发穿插路程（python+js）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。