在线问答系统--静态页面布置

2024-01-24 21:15:58

在线问答系统--静态页面布置

1. 静态页面

该静态页面是仿照知乎页面进行仿写的，一些资料来源于网络。

**静态页面获取**：链接：https://pan.baidu.com/s/1bZpwRqPiIMYk1AEChfAj-w
提取码：56qk
将从网盘的中静态文件下载下来，将assets放在static目录下面，其他.html文件放置模板文件夹中templates

2. 渲染模板

app.py

from Flask import flask，render_template
app = Flask(__name__,static_folder="static/assets")
@app.route('/')
def index():
    return render_template('index.html'）
@app.route("/detail")
def detail():
    return render_template("detail.html')
....

使用route()装饰器来把函数绑定到URL中
使用render_template()方法可以渲染模板，我们只需要提供模板名称和需要作为参数传递给模板的变量就可以的。
Flask 默认会在templates为文件中寻找模板。如何需要更改模板目录，需要是用templates_folder
static_folder: 指定静态文件所在的文件夹，它可以是一个绝对路径也可以是相对路径。

关于FLASK中的基础部分知识可以去看一些文档，我这里就不详细介绍了。
falsk文档的地址是：https://dormousehole.readthedocs.io/en/latest/

3. 模板

应用已经写好验证视图，但是如果现在运行服务器的话，无论访问哪个 URL ，都会看到一个 TemplateNotFound 错误。这是因为视图调用了 render_template() ，但是模板还没有写。模板文件会储存在 flaskr 包内的 templates 文件夹内。

模板是包含静态数据和动态数据占位符的文件。模板使用指定的数据生成最终的文档。 Flask 使用 Jinja 模板库来渲染模板。

Jinja 语句与模板中的静态数据通过特定的分界符分隔。任何位于 {{ 和 }} 这间的东西是一个会输出到最终文档的静态式。 {% 和 %} 之间的东西表示流程控制语句，如 if 和 for 。与 Python 不同，代码块使用分界符分隔，而不是使用缩进分隔。因为代码块内的静态文本可以会改变缩进。关于jinJa,详情请见JinJa官方文档

3.1 模板的基础布局

qa-online/templates/base.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>{% block title %}在线问答系统{% endblock %}</title>

  <!-- Bootstrap -->
  <link href=".././assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
    <script src=".././assets/plugins/html5shiv.min.js"></script>
    <script src=".././assets/plugins/respond.min.js"></script>
    <![endif]-->

  <link rel="stylesheet" href=".././assets/style/common.css">
  {% block header %}
  {% endblock %}
</head>

<body class="layout" id="top">
{% block layout %}
{% endblock %}

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src=".././assets/plugins/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src=".././assets/plugins/bootstrap/js/bootstrap.min.js"></script>
{% block js %}
{% endblock %}
</body>

</html>

模板中定义了三个块，这些块可以被其他模块进行重载

{% block title %}：会改变显示显示在浏览器标签和窗口中的标题
{% block layout %}：每个文件的具体内容，如登录表单或者首页
3.{% block js %} ：js文件
其他模板直接放在 templates 文件夹内。为了更好地管理文件，属于某个蓝图的模板会被放在与蓝图同名的文件夹内
这里提取了三个模板文件：base.html,base_layout.html,layout_header_nav.html，放在templates/comment,文件夹中，模板中使用的继承。

base.html:基础的模板文件
layout_header_nav.html`：页面的导航栏部分，除登录注册页面没有以为，其他页面都有
base_layout.html：这个模板比较特殊，它继承了base.html文件，同时还包含的了layout_header_nav.html 文件

{% extends 'comment/base.html' %}
{% block layout %}
# qa-online/templates/base_layout.html
  {# 顶部导航 #}
  {% include 'comment/layout_header_nav.html' %}
  {% block content %}
    {# 内容区域 #}
  {% endblock %}
  {# 底部右下角的菜单 #}
  <div class="layout-footer">
    <a href="#" data-togge="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
    <a href="#top" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
  </div>
{% endblock %}
{% block js %}
  <script>
      $(function () {
          // 页面右下角的菜单提示
          $('[data-toggle="tooltip"]').tooltip()
          {% block js_inline %}
              {# jquery内部的js逻辑 #}
          {% endblock %}
      })
  </script>
    {% block js_extra %}
   {% endblock %}
{% endblock %}

这里就涉及到了模板的继承和包含。

3.2 页面渲染

qa-online/templates/index.html

{% extends 'comment/base_layout.html' %}
{% block title %}{{ super() }} - 首页{% endblock %}
{% block header %}
  <link rel="stylesheet" href=".././assets/style/index.css">
  {% endblock %}
{% block content %}
  这里面填写内容部分（太多了，就不展示了）
{% endblock %}
{% block js_inline %}
      // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
      $('.show-desc').click(function () {
        $(this).addClass('hidden');
        $(this).next().removeClass('hidden')
      })
      $('.show-all').click(function () {
        $(this).addClass('hidden');
        $(this).prev().removeClass('hidden')
      })
{% endblock %}

码农公寓