后端從數據庫獲取數據給到前端：
第一種方式：
admin.py文件代碼：
@admin.route('/showList') def show(): # 獲取數據庫所有文章數據，得到一個個對象 res=Article.query.all() dicts=[] # 將每一個對象轉成字典並加入一個列表，再用jinja模板將數據渲染到視圖html中 for item in res: dicts.append(item.__dict__) print('讀取所有內容',dicts) print('每一個字段的值',dicts[0]['title']) # 將數據dicts=dicts傳到articleList.html頁面渲染 return render_template('admin/articleList.html',dicts=dicts)
前端利用jinja語法渲染：
<!--該內容使用了jinja模板-->
<div id="top">
{%for item in dicts%}
<!--<form id="form1" method='POST' enctype="multipart/form-data" action="url">-->
<hr/>
<h3 class="zuo">作者:</h3>
<p class="biao">{{item['author']}}</p>
<p class="lei">文章分類:{{item['category']}}</p>
<p class="shi">文章發布時間:{{item['put_date']}}</p>
<p class="nei">文章內容:{{item['content']}}</p>
<button class="authorList" id="{{item.id}}" >編輯</button>
<!--這里的data-id是設置的標簽數學，在點擊不同的item時獲取它的id值，下面講解在js里用到-->
<button data-id="{{item.id}}" onclick="del(event)" type="submit" class="delete">刪除</button>
<hr style="border:1rem;border-bottom-color: black"/>
<!--</form>-->
{% endfor %}
</div>
在點擊修改文章時需要知道具體是哪偏文章需要修改所以在上面用data-id將每篇文章的id保存到設置屬性dataset里
在js里直接設置路由，根據相應路由程序會執行相應的py文件下路由的函數方法：
function del(e){ console.log('刪除',e) //獲取表單設置好的data—id值 value = e.target.dataset.id //本地路由定向 location.href='/admin/delArticle/'+ value // console.log('/admin/delArticle/'+ value) // $('form1').attr('action','/admin/delArticle/'+ value) }
相應路由下的py方法：
# 此處使用動態路由的方式接收前端傳來的id，根據相應的id刪除相應的文章 @admin.route('/delArticle/<delid>',methods=['GET','POST']) def delArticle(delid): print('123456',delid) delAr=Article.query.filter(Article.id==delid).first() db.session.delete(delAr) db.session.commit() return render_template('admin/addArticle.html')
第二種ajax請求方式：
利用ajax傳遞前端請求的數據並返回數據給到前端：
js代碼：
//被點擊的標簽對象$('.authorList') $('.authorList').click(function() { //獲取當前點擊對象標簽上的屬性id值 var ID = $(this).attr('id') data = {'Articleid': ID} console.log(data) $.ajax({ // ajax請求的路由地址（py文件下的路由下有方法） url: '/admin/editArticle', // 向后端請求類型（是一個對象格式） type: 'post', // 向后端發送請求的數據 data: data, // 請求成功后后端返回回來的數據，后端對數據json.dumps(data) success: function (res) { // 后端對數據json.dumps(data)data是一個對象類型才能dumps，所以在此要對數據進行解析 resData=JSON.parse(res) console.log(resData) //將獲取到的數據渲染到相應的標簽里 $('#title').val(resData.title) $('#category').val(resData.category) $('#author').val(resData.author) $('#editText')[0].innerHTML=(resData.content) } }) $('#edit')[0].style.display='block ' $('#top')[0].style.display='none ' $('#top')[0].style.opacity='0 !important' })
后端py文件下的方法接收到數據返回數據：
@admin.route('/editArticle',methods=['post','get']) def editArticle(): # 定義一個全局共用變量id（因為下面else里要用到） global A_id print('bianjie',len(request.form)) # 前端點擊編輯時傳入的是一個id值所以長度為1，這是將所有文章內容原樣渲染到編輯頁面，得返回所有文章內容 if len(request.form)<2: A_id= request.form['Articleid'] print('獲取前端post請求數據id',request.form['Articleid']) resEdit=Article.query.filter(Article.id==int(request.form['Articleid'])).first() data={ 'title':resEdit.title, 'author':resEdit.author, 'content':resEdit.content, 'category':resEdit.category, 'files':resEdit.files } # data是一個對象類型才能dumps # print(resEdit.title) return json.dumps(data) # 否則提交回來的就是修改文章后的內容長度大於1，執行修改相應數據庫的內容 else: print('修改文章', request.form) edit=Article.query.filter(Article.id== A_id).first() edit.title=request.form['title'] edit.content = request.form['content'] edit.category = request.form['category'] edit.files = request.form['files'] edit.author = request.form['author'] edit.edit_time =datetime.now() db.session.commit() print('修改文章') # return redirect('/showList') return '完成修改'
前后端交互還有form 表單提交post或者get傳遞信息給后端相對較簡單，在此不多加描述
哎，還是說一下：在這里method='post' enctype="multipart/form-data"必須寫method方法可以是post也可以是get，action是表單提交到后端的具體路由，
在該路由下py執行的具體方法
<form role="form" action='/admin/addArticle' method='post' enctype="multipart/form-data"> <div class="form-group"> <label>文章標題</label> <input type="text" placeholder="請輸入文章標題" name="title" class="form-control"> </div> </form>
后端接收表單信息：
@add_article.route('/',methods=['POST','GET']) # 添加文章 def addArticle(): return render_template('admin/form_basic.html') @add_article.route('/add',methods=['POST','GET']) def add(): # print(request.method) if request.method=='GET': print('運行到此處1') return render_template('admin/form_basic.html') else: # 獲取用戶名，然后再根據用戶名獲取用戶id # 獲取session print('運行到此處2') # 獲取表單圖片文件的方法 img = request.files print('圖片',img) img = img['cover_img'] # print(img.filename) if img !=None : # 獲取圖片名字 img_name=img.filename # 保存圖片到本地 img.save('./static/images/{}'.format(img_name)) cover_img = './static/images/{}'.format(img_name) else: cover_img = 'http://bpic.588ku.com/back_pic/04/54/42/0658634373900c4.jpg' # 獲取用戶賬號 username = session.get('user_name') if username != None: check = User.query.filter(User.user_name == username).first() userid = check.id print('用戶id', userid) else: username = '失心哥' check = User.query.filter(User.user_name == username).first() userid = check.id # print('出錯了，該用戶不存在') # return '出錯了，該用戶不存在' # 獲取表單提交里面的name為title的值 title = request.form['title'] type = request.form['type'] author = request.form['author'] content = request.form['content'] times = datetime.now() # 添加文章,foreign_user=userid addInfo=Article(title=title,cover_img=cover_img,type=type,author=author,content=content,time=times,state=1,foreign_user=userid) db.session.add(addInfo) db.session.commit() return render_template('admin/form_basic.html') # return '成功增加文章'