基于flask的在线笔记共享管理系统【8】（基础页面实现）

基于flask的在线笔记共享管理系统【8】（基础页面实现）

manage.py文件是实现网页功能的主要文件，在这里对flask进行实例化，建立一个app。后可以调用app.route()函数创建路由。

主页

效果预览


py代码（这里未方便说明一次性导入所以需要的文件的函数）

from flask import Flask, render_template, flash, redirect, url_for, session, request, logging
from mysql_util import MysqlUtil
from passlib.hash import sha256_crypt
from functools import wraps
import time
from forms import RegisterForm,ArticleForm

app = Flask(__name__) # 创建应用

# 首页
@app.route('/')
def index():
    return render_template('home.html') # 渲染模板

HTML渲染

{% extends 'layout.html' %}

{% block body %}
    <h2> </h2>
  <div class="jumbotron text-center" >
    <h1>Welcome to Cloud Notes</h1>
    <p class="lead"> 云笔记 记录生活中的每一个奇思妙想</p>
    <p>
			<img src = "../static/css/home2.png"  width="30%"  height="30%"  />
    </p>
    {% if session.logged_in == NULL %}
      <a href="/register" class="btn btn-primary btn-lg">注册</a>
      <a href="/login" class="btn btn-success btn-lg">登录</a>
    {% endif %}
  </div>
{% endblock %}

社区

效果预览

py代码段

# 社区
@app.route('/articles')
def articles():
    db = MysqlUtil() # 实例化数据库操作类
    sql = 'SELECT * FROM articles  ORDER BY create_date DESC LIMIT 5' # 从article表中筛选5条数据，并根据日期降序排序
    articles = db.fetchall(sql) # 获取多条记录
    if articles : # 如果存在，遍历数据
        return render_template('articles.html', articles=articles) # 渲染模板
    else:         # 如果不存在，提示“暂无笔记”
        msg = '暂无笔记'
        return render_template('articles.html', msg=msg) # 渲染模板

HTML渲染

{% extends 'layout.html' %}

{% block body %}
    <div>
     <h1 class="title-center"> <img src = "../static/css/logo.png"  width="40%"  height="40%"  />  </h1>
      <h1 > <img src = "../static/css/club.png"  width="10%"  height="10%"  />  Cloud Notes <small> 欢迎 {{session.username}}</small></h1>
        <div class="content">
         <!-- Home Post List -->
         {% for article in articles %}
            <article class="post-preview">
                <h1 class="post-title">{{article.title}}</h1>
         <p class="post-author">作者：{{article.author}} &nbsp {{article.create_date}} </p>
          <p>{{article.content | safe | truncate(200, True)}}</p>
         <div class="clearfix">
         <a class="btn btn-primary float-right" href="article/{{article.id}}">查看全文 →</a>
         </div>
         </article>
        <hr class="underline">
     {% endfor %}
    </div>
    <h1 class="title-center"> <img src = "../static/css/footer.png"  width="40%"  height="40%"  />  </h1>
    </div>
{% endblock %}

关于我们

效果预览

py代码段

# 关于我们
@app.route('/about')
def about():
    return render_template('about.html') # 渲染模板

HTML渲染

{% extends 'layout.html' %}

{% block body %}
    <div>
    <h1 class="title-center"> <img src = "../static/css/logo.png"  width="30%"  height="30%"  />  </h1>
    <h2> <img src = "../static/css/about.png"  width="10%"  height="10%"  /> Cloud Notes 简介 </h2>
    <div class="content">
<h1 class="title-center"> <img src = "../static/css/aout1.png"  width="100%"  height="100%"  />  </h1>

        </div>
      <h1 class="title-center"> <img src = "../static/css/home2.png"  width="20%"  height="20%"  />  </h1>
    </div>
{% endblock %}

这是用到的几个基础界面，下一篇文章继续向大家简绍功能的实现。