邵阳建设银行网站,网页设计与制作教程第六版,官网手游,业网站建设后端从数据库获取数据给到前端#xff1a; 第一种方式#xff1a; admin.py文件代码#xff1a; admin.route(/showList)
def show():# 获取数据库所有文章数据#xff0c;得到一个个对象resArticle.query.all()dicts[]# 将每一个对象转成字典并加入一个列表#xff0c;再…后端从数据库获取数据给到前端 第一种方式 admin.py文件代码 admin.route(/showList)
def show():# 获取数据库所有文章数据得到一个个对象resArticle.query.all()dicts[]# 将每一个对象转成字典并加入一个列表再用jinja模板将数据渲染到视图html中for item in res:dicts.append(item.__dict__)print(读取所有内容,dicts)print(每一个字段的值,dicts[0][title])# 将数据dictsdicts传到articleList.html页面渲染return render_template(admin/articleList.html,dictsdicts) 前端利用jinja语法渲染 !--该内容使用了jinja模板--div idtop{%for item in dicts%}!--form idform1 methodPOST enctypemultipart/form-data actionurl--hr/h3 classzuo作者:/h3p classbiao{{item[author]}}/pp classlei文章分类:{{item[category]}}/pp classshi文章发布时间:{{item[put_date]}}/pp classnei文章内容:{{item[content]}}/pbutton classauthorList id{{item.id}} 编辑/button!--这里的data-id是设置的标签数学在点击不同的item时获取它的id值下面讲解在js里用到--button data-id{{item.id}} οnclickdel(event) typesubmit classdelete删除/buttonhr styleborder: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)delArArticle.query.filter(Article.iddelid).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所以在此要对数据进行解析resDataJSON.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.displayblock $(#top)[0].style.displaynone $(#top)[0].style.opacity0 !important}) 后端py文件下的方法接收到数据返回数据 admin.route(/editArticle,methods[post,get])
def editArticle():# 定义一个全局共用变量id因为下面else里要用到global A_idprint(bianjie,len(request.form))# 前端点击编辑时传入的是一个id值所以长度为1这是将所有文章内容原样渲染到编辑页面得返回所有文章内容if len(request.form)2:A_id request.form[Articleid]print(获取前端post请求数据id,request.form[Articleid])resEditArticle.query.filter(Article.idint(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)editArticle.query.filter(Article.id A_id).first()edit.titlerequest.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传递信息给后端相对较简单在此不多加描述 哎还是说一下在这里methodpost enctypemultipart/form-data必须写method方法可以是post也可以是getaction是表单提交到后端的具体路由 在该路由下py执行的具体方法 form roleform action/admin/addArticle methodpost enctypemultipart/form-datadiv classform-grouplabel文章标题/labelinput typetext placeholder请输入文章标题 nametitle classform-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.methodGET:print(运行到此处1)return render_template(admin/form_basic.html)else:# 获取用户名然后再根据用户名获取用户id# 获取sessionprint(运行到此处2)# 获取表单图片文件的方法img request.filesprint(图片,img)img img[cover_img]# print(img.filename)if img !None :# 获取图片名字img_nameimg.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.idprint(用户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_useruseridaddInfoArticle(titletitle,cover_imgcover_img,typetype,authorauthor,contentcontent,timetimes,state1,foreign_useruserid)db.session.add(addInfo)db.session.commit()return render_template(admin/form_basic.html)# return 成功增加文章 View Code 转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/9884117.html
