做网站有什么js特效,室内设计软件免费下载,网站建设需求建议书,腾讯广告推广平台入口大家好#xff0c;给大家分享一下python web开发案例教程#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看#xff01; 在线问答系统 Flask Web开发项目介绍功能描述一、前端设计二、数据库设计三、页面功能开发 1.用户模块2.问答模块四、总结 Flask W…大家好给大家分享一下python web开发案例教程很多人还不知道这一点。下面详细解释一下。现在让我们来看看 在线问答系统 Flask Web开发项目介绍功能描述一、前端设计二、数据库设计三、页面功能开发 1.用户模块2.问答模块四、总结 Flask Web开发 请求到响应 用户通过浏览器访问url会发送请求到服务器服务器接收请求后会根据url规则找到对应的视图函数进行处理处理完后会把结果发送到浏览器端浏览器接收到返回的内容并呈现给用户(得到响应)。 上下文对象 在分派请求之前都会被激活在请求处理完成后都被删除python编写一个皮卡丘。 请求上下文对象 Request请求对象封装了客户端发出的HTTP请求中的内容。 Session用户会话(dict)。各请求之间的数据共享。 应用上下文对象 current_app当前激活程序的程序实例。 g处理请求时的临时存储对象每次请求都会重设这个变量 Session与cookie: Session是在服务器端存储数据而cookie是在客户端存储数据。Session依赖于cookie实现客户端向服务器端发送请求时会带上cookie服务器端根据cookie的值找到Session中对应的值(数据或用户)。 请求报文:包括请求头和请求体 常用参数: methodGET/POST formPOST请求数据dict argsGET请求数据dict valuesPOST请求数据和GET请求数据集合dict files上传的文件数据dict cookies请求中cookie dict headersHTTP请求头 响应报文:包括响应头和响应体 响应字符串元组(response,status,headers) 响应元组:response-响应内容;status-响应状态码;headers-响应头信息(dict)。 项目介绍 该系统是基于Python的Web开发实战项目前端框架采用Bootstrap后端采用Flask框架,模板引擎为Jinja2数据库采用Mysql8.0开发环境为Python3.9Flask2.0.1。 功能描述 该项目通过蓝图改造实现了项目模块化主要分为用户模块和问答模块用户模块包括登录、注册、个人主页。问答模块包括首页关注页详情页写文章页。 用户可以登录注册并在个人主页查看和修改个人信息等。 用户可以发问题关注问题回答问题也可以收藏回答点赞回答点赞评论评论回答等。 一、前端设计 前端主要采用了HTML标签CSS样式JS语言。布局主要采用的是Flex布局和Bootstrap栅格布局也用到了Bootstrap许多内置的全局CSS样式和组件以及JS插件同时用到了iconfont阿里图标库再加上自己对页面样式的改写和优化这样下来基本搭建了项目的前端页面。 二、数据库设计 使用flask_sqlalchemy扩展建立ORM模型难点主要在对表之间关系的理解以及建立表与表的关系属性常见的关系主要是一对一和一对多。 例如在UserProfile模型下建立与User模型一对一属性user db.relationship(User, backrefdb.backref(profile, uselistFalse)) 在Question模型下建立与User模型一对多属性:user db.relationship(User, backrefdb.backref(question_list, lazydynamic)) 这里采用lazy‘dynamic’(懒加载):不是直接加载这些数据SQLAlchemy会返回一个查询对象在加载数据前可以过滤提取它们,不可用在一对一和多对一关系中 三、页面功能开发 1.用户模块 该模块难点主要在登录这里采用了第三方扩展flask_login。 登录流程 用户在登陆表单输入用户名和密码。表单验证包括验证用户名和密码是否正确用户名规定为手机号用户名和密码不为空用户状态为激活状态等。通过表单验证执行登录操作。记录用户登录信息。跳转到上一次访问的页面或首页。 开发流程 编写登录表单并渲染到模板中。编写表单验证包括自定义表单验证验证用户名和密码是否正确。注由于数据库中的密码是加密存储验证时需要拿到表单中的用户名和密码并将密码加密后再验证通过login_user()执行登录操作可以记录、保存当前成功登录的用户(current_user)。使用ORM模型保存用户登录的相关信息到数据库中。登陆成功后重定向这里添加了一个隐藏表单域用来保存用户上一次试图访问的页面url并在视图函数中得到相应的值。input typehidden namenext value{{ next_url|d() }}next_url request.values.get(next, url_for(qa.index)) 部分效果展示 2.问答模块 该模块难点主要在关注页面中问答列表的分页异步加载详情页面中评论功能的开发和评论的分页异步加载等。接口使用restful风格接口并通过Jquery中的ajax调用接口。 实现流程 后端(视图层)编写API前端(模板层)调用API渲染页面绑定功能。 部分代码 qa.route(/qa/list)
def question_list():异步查询问题数据列表try:per_page 2page request.args.get(page, 1, typeint)lst [] # 用来保存当前用户关注的问题id# 只查询当前用户关注的问题question_follow QuestionFollow.query.filter_by(user_idcurrent_user.id).all()for item in question_follow:lst.append(item.q_id)page_data Question.query.filter(Question.id.in_(lst)).paginate(pagepage, per_pageper_page)data render_template(qa_list.html, page_datapage_data)return {code: 0, data: data}except Exception as e:print(e)data return {code: 1, data: data}$(function () {// 要填充的容器var container $(#id-qa-ls);// 默认页码为1var page 1;// 给按钮绑定点击事件$(#id-load-more).click(function () {// 前端模板层调用数据接口$.get({{ url_for(qa.question_list) }},{page: page},function (result) {console.log(result);if (result.code 0) {var res result.dataconsole.log(res);// 手动绑定DOM事件// 1.构建JQ对象var html $(res);// 2.为对象里面的一些元素绑定事件,指定事件范围$(.more, html).click(function () {$(this).parent().addClass(hidden);$(this).parent().next().removeClass(hidden)})$(.more, html).click(function () {$(this).parent().addClass(hidden);$(this).parent().prev().removeClass(hidden)})// 添加到容器container.append(html);// 加载完成后,页码1page 1;} else {window.alert(接口请求失败);}})})})/qa.route(/comments/int:answer_id, methods[GET, POST])
def comments(answer_id):坪论answer Answer.query.get(answer_id)question answer.questionif request.method POST:# 添加一条评论try:# 判断用户是否登录if not current_user.is_authenticated:result {code: 1, message: 请登录}return jsonify(result), 400# 1.获取前端传递的参数content request.form.get(content, )reply_id request.form.get(reply_id, None)# 2.保存到数据库comment_obj Comment(contentcontent, usercurrent_user,answeranswer, questionquestion, reply_idreply_id)db.session.add(comment_obj)db.session.commit()# 如果添加成功则返回result和201状态码result {code: 0, message: 评论成功}return jsonify(result), 201except Exception as e:print(e)result {code: 1, message: 服务器正忙,请稍后重试}# jsonify将字典转成json字符串return jsonify(result), 400else:# GET获取坪论列表try:page int(request.args.get(page, 1))page_data answer.comment_list().paginate(pagepage, per_page3)data render_template(comments.html, page_datapage_data, answeranswer) # 获取html内容return jsonify({code: 0, data: data, meta: {page: page}}), 200except Exception as e:print(e)return jsonify({code: 1, data: , message: 服务器正忙}), 500// 发表评论function bindCommentPublishEvent(html) {// 查询发表评论表单var form $(.comment-publish, html);// 给发表评论表单下的.btn绑定事件$(.btn, form).click(function () {var _form $(this).parent();var content $(input[namecontent], _form);// 将表单内容序列化成一个字符串var data _form.serialize();$.ajax({url: {% if answer %}{{ url_for(qa.comments, answer_idanswer.id) }}{% else %}{% endif %},method: POST,data: data,complete: function (res) {console.log(res);if (res.status 201) {window.alert(res.responseJSON.message);// 清空评论框content.val();// 重新加载页面location.reload();} else if (res.status 400) {window.alert(res.responseJSON.message);window.location.href {{ url_for(accounts.login) }};} else {window.alert(请求失败,请稍后重试);}}})})}// 评论列表的异步加载var comment_ls $(#id-comment-ls);var page 1;function loadPageData(page) {page page || 1$.ajax({url: {% if answer %}{{ url_for(qa.comments, answer_idanswer.id) }}{% else %}{% endif %},method: GET,data: {page: page},complete: function (res) {// console.log(res:, res);if (res.status 200) {var result res.responseJSON;if(result) {if (result.code 0) {var html $(result.data);// 评论回复按钮事件绑定bindReplyEvent(html);// 发布按钮事件绑定bindCommentPublishEvent(html);// 点赞按钮事件绑定bindCommentEvent(html);comment_ls.empty().append(html);}}} else {window.alert(服务器正忙)}}})}$(.pager .previous).click(function () {page page - 1;loadPageData(page);})$(.pager .next).click(function () {page page 1;loadPageData(page);});// 默认加载第一页数据loadPageData(page);部分效果展示 注通过ajax请求时需要重新手动绑定DOM事件 异步调用接口的好处提升查询效率提升用户体验降低代码耦合度维护性更强。 四、总结 本次项目让我更加深刻地体会到了前端框架的强大与便利加深了我对Flask框架的认识也更加了解了从客户端到服务器端从请求到响应的过程最重要的是让我认识到了Restful接口风格以及学会了怎样编写接口并通过ajax异步请求调用接口。此次项目基本完成了在线问答系统的相关功能。 更多内容可前往http://39.105.148.140:8001/ 进行查看。
