后端从数据库获取数据给到前端：
第一种方式：
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 '成功增加文章'