我的第一個python web開發框架（15）——公司介紹編輯功能
完成登錄以后，就會進入后臺管理系統的主界面，因為這個是小項目，所以導航菜單全部固化在HTML中，不能修改。一般后臺還會有一個歡迎頁或關鍵數據展示的主頁面，小項目也沒有多大的必要，所以登錄后直接進入公司介紹編輯頁面。
首先我們來看一下公司介紹頁面內容
看上去功能好像很簡單，其實我們要處理的東西還是挺多的。
從頁面上看，我們需要有一個記錄讀取的接口，來獲取公司介紹的內容，并展示在頁面上。當然現在數據庫里面沒有記錄存在，所以我們還需要向數據庫的信息表（infomation）中插入一條公司介紹的記錄，這樣好直接進行編輯（因為公司介紹不會有很多條記錄，一般定了后就不會再改變，所以只需要在數據庫的信息表里插入一條就可以了）
另外，從界面上看，我們還需要有一個上傳文件的接口，可以上傳圖片和文件；還需要一個更新公司介紹內容的接口。
還有需要修改幾個地方，有上傳文件，肯定需要有下載的接口，所以需要增加一個下載的路由（Python與其他語言不一樣的地方是，所有訪問都必須通過路由，所以上傳的或放在目錄中的文件需要統一定義一個接口來處理，不然用戶訪問不了，雖然有點麻煩，但這樣處理也安全很多，用戶上傳任何含有木馬或程序的文件，它也無法在服務器端執行）；nginx配置文件也需要修改一下，增加下載路徑規則，這樣就可以直接通過nginx訪問下載路徑了。
向數據庫中添加公司介紹記錄
運行pgAdmin連上數據庫，然后按第4章的做法，打開sql查詢分析器，運行下面代碼添加一條數據庫記錄
INSERT?INTO?infomation(id,?title)??VALUES?(1,?'公司介紹');
添加公司介紹記錄讀取接口
@get('/api/about/') def?callback(): ????""" ????獲取指定記錄 ????""" ????sql?=?"""select?*?from?infomation?where?id?=?1""" ????#?讀取記錄 ????result?=?db_helper.read(sql) ????if?result: ????????#?直接輸出http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.son ????????return?web_helper.return_msg(0,?'成功',?result[0]) ????else: ????????return?web_helper.return_msg(-1,?"查詢失敗")
因為公司介紹id添加后不會再改變，所以sql語句直接綁死id為1，另外，執行數據庫查詢以后，返回的是列表，所以返回記錄時要加上序號：result[0]
啟動debug（對main.py點擊右鍵=》debug），將用戶登錄判斷那兩行注釋掉（不然直接訪問會返回-404，“您的登錄已失效，請重新登錄”提示），在瀏覽器輸入：http://127.0.0.1:9090/api/about/就可以看到返回結果（結果的中文字符是unicode編碼，需要用站長工具轉換一下才可以轉為下載效果）
{"msg":?"成功",?"data":?{"content":?"",?"front_cover_img":?"",?"id":?1,?"title":?"公司介紹",?"add_time":?"2017-10-31?14:17:45"},?"state":?0}
添加公司介紹內容修改接口
@put('/api/about/') def?callback(): ????""" ????修改記錄 ????""" ????front_cover_img?=?web_helper.get_form('front_cover_img',?'圖片') ????content?=?web_helper.get_form('content',?'內容',?is_check_special_char=False) ????#?防sql注入攻擊處理 ????content?=?string_helper.filter_str(content,?"'") ????#?防xss攻擊處理 ????content?=?string_helper.clear_xss(content) ????#?更新記錄 ????sql?=?"""update?infomation?set?front_cover_img=%s,?content=%s?where?id=1""" ????vars?=?(front_cover_img,?content,) ????#?寫入數據庫 ????db_helper.write(sql,?vars) ????#?直接輸出http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.son ????return?web_helper.return_msg(0,?'成功')
因為公司介紹只需要一條記錄就夠了，前面使用手動方式向數據庫添加記錄，所以代碼中我們就不需要寫添加的方法
修改記錄使用put方式接收：@put('/api/about/')
從界面圖片中可以看到，有文章標題、首頁圖片和文章內容，因為標題不需要進行修改，所以我們修改接口只需要處理剩下兩項就可以了。
因為提交的內容含有HTML代碼，所以使用web_helper.get_form提取值時，需要使用is_check_special_char參數，設置為不檢查特殊符號，不然會接收不了。另外接收到參數值以后，我們需要對它進行防sql注入和防xss處理。
clear_xss()函數是string_helper包新增的清除xss攻擊標簽用的，它會過濾掉xss的攻擊代碼。詳細代碼如下：
def?clear_xss(html): ????""" ????清除xss攻擊標簽 ????:param?html:?要處理的html ????:return: ????""" ????tags?=?['a',?'abbr',?'acronym',?'b',?'blockquote',?'code',?'em',?'i',?'li',?'ol',?'strong',?'ul'] ????tags.extend( ????????['div',?'p',?'hr',?'br',?'pre',?'code',?'span',?'h1',?'h2',?'h3',?'h4',?'h5',?'del',?'dl',?'img',?'sub',?'sup',?'u', ?????????'table',?'thead',?'tr',?'th',?'td',?'tbody',?'dd',?'caption',?'blockquote',?'section']) ????attributes?=?{'*':?['class',?'id'],?'a':?['href',?'title',?'target'],?'img':?['src',?'style',?'width',?'height']} ????return?bleach.linkify(bleach.clean(html,?tags=tags,?attributes=attributes))
clear_xss()函數中我們使用了bleach這個庫（需要安裝：pip install bleach），它是一個基于白名單、通過轉義或去除標簽和屬性的方式，來對HTML文本凈化的Python庫。
我們在string_helper_test.py這個測試單元中添加一個測試用例，來測試一下這個函數的使用效果
def?test_clear_xss(self): ????????print('-----test_clear_xss------') ????????print(string_helper.clear_xss('
執行后輸出結果：
------ini------ -----test_clear_xss------ <script?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_61644."> abc abc
文字 <input?<script=""?id="1"?type="text"?value="">alert(/XSS/)"/> <base?href="
可以看到，對于富文本編輯器提交的代碼，bleach基本滿足了我們的防范xss攻擊的處理需求
添加上傳接口（PS：我們使用的文本編輯器是百度的ueditor，因為它沒有python的上傳處理代碼，所以我們需要動手編輯上傳接口，以及html上也要進行對應的修改）
#!/usr/bin/evn?python #?coding=utf-8 import?os from?bottle?import?post,?request from?common?import?datetime_helper,?random_helper,?log_helper @post('/api/files/') def?callback(): ????""" ????修改記錄 ????""" ????#?初始化輸出值 ????result?=?{ ????????"state":?"FAIL", ????????"url":?"", ????????"title":?"上傳失敗", ????????"original":?"" ????} ????#?獲取上傳文件 ????try: ????????#?upfile為前端HTML上傳控件名稱 ????????upload?=?request.files.get('upfile') ????????#?如果沒有讀取到上傳文件或上傳文件的方式不正確，則返回上傳失敗狀態 ????????if?not?upload: ????????????return?result ????????#?取出文件的名字和后綴 ????????name,?ext?=?os.path.splitext(upload.filename) ????????#?給上傳的文件重命名，默認上傳的是圖片 ????????if?ext?and?ext?!=?'': ????????????file_name?=?datetime_helper.to_number()?+?random_helper.get_string(5)?+?ext ????????else: ????????????file_name?=?datetime_helper.to_number()?+?random_helper.get_string(5)?+?'.http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.pg' ????????upload.filename?=?file_name ????????#?設置文件存儲的相對路徑 ????????filepath?=?'/upload/'?+?datetime_helper.to_number('%Y%m%d')?+?'/' ????????#?組合成服務器端存儲絕對路徑 ????????upload_path?=?os.getcwd()?+?filepath ????????#?如果目錄不存在，則創建目錄 ????????if?not?os.path.exists(upload_path): ????????????os.mkdir(upload_path) ????????#?保存文件 ????????upload.save(upload_path?+?upload.filename,?overwrite=True) ????????#?設置輸出參數（返回相對路徑給客戶端） ????????result['title']?=?result['original']?=?upload.filename ????????result['url']?=?filepath?+?upload.filename ????????result['state']?=?'SUCCESS' ????except?Exception?as?e: ????????log_helper.error('上傳失?。??+?str(e.args)) ????#?直接輸出http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.son ????return?result
PS：這里只做了上傳文件處理，沒有上傳成功以后存儲到數據庫中統一管理，如果前端反復上傳，會造成服務器存儲很多多余文件的問題，大家可以自己發揮想象與動手能力，看看怎么解決這個問題。對于這個問題會在第二部分統一處理。
添加上傳文件存儲文件夾：直接在項目的要目錄下創建upload文件夾
修改main.py文件配置，并創建文件下載路由
導入的bottle庫添加response, static_file這兩個包，response用于設置輸出文件類型為二進制數據傳輸格式，這樣設置后，上傳的各種類型文件都可以下載；static_file是使用安全的方式讀取文件并輸出到客戶端
from?bottle?import?default_app,?get,?run,?request,?hook,?route,?response,?static_file
在第26行插入下面代碼，初始化上傳文件存儲路徑
#?定義upload為上傳文件存儲路徑 upload_path?=?os.path.http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.oin(program_path,?'upload')
添加下載文件訪問路由，設置后只要放在upload目錄下的文件都可以直接通過瀏覽器下載
@get('/upload/
做完以上設置，上傳與更新就沒有問題了，上傳的圖片直接使用http://127.0.0.1:9090/upload/xxx.http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.pg方式就可以訪問了，如果想要使用81端口，也就是通過nginx訪問，那就需要再配置一下
打開nginx配置文件 ：E:\Service\nginx-1.11.5\conf\nginx.conf
將location ~* ^/(index|api)/?修改為?location ~* ^/(index|api|upload)/
然后在windows任務管理器（鍵盤同時按Ctrl+Alt+Del鍵，點擊啟動任務管理器），找到nginx_service.exe，右鍵=》結束進程樹
重新打開服務（控制面板=》所有控制面板項=》管理工具=》服務），啟動nginx_service服務
前端頁面相關修改
向/lib/ueditor/1.4.3/目錄中添加python文件夾，將添加config.http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.son這個配置項
修改/lib/ueditor/1.4.3/ueditor.config.http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.s?配置項中 服務器統一請求接口路徑 為?/api/files/
本文對應的源碼包里有ueditor編輯器最新代碼（剛剛去百度下載的），去掉了多余的文件，大家可直接刪除lib目錄里的ueditor這個文件夾，使用源碼包里的替換上去就可以了
前端頁面的http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529112717_85666.avascript腳本添加了ueditor編輯器初始化、文件上傳和表單提交等功能，可直接替換about_edit.html文件，具體大家自己研究一下。
最終效果：
另外，聯系我們的功能與公司介紹差不多，在這里留一下作業給大家自己嘗試做一個聯系我們編輯頁面出來，下一篇會給聯系我們編輯頁面源碼給大家
本文對應的源碼下載
python
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
