知了课堂项目part1

一.基础配置1.在配置文件config.py中写密钥，防止CSRF攻击import os

DEBUG = True

SECRET_KEY = os.urandom(24)

HOSTNAME = ‘127.0.0.1’
PORT = ‘3306’
DATABASE = ‘ketang’
USERNAME = ‘root’
PASSWORD = ‘123456’
DB_URI = ‘mysql + mysqldb://{}:{}@{}:{}/{}?charset=utf8’.format(USERNAME,PASSWORD,
HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI

2.mysql中创建数据库 create database ketang charset utf8;

3.将配置文件导入app.pyfrom flask import Flask
import config

app = Flask(name)
app.config.from_object(config)

二.导航条的设计自己在static文件夹下另写一个 images文件夹存放图片，css文件夹设置样式1.进入http://www.bootcss.com/2.选择组件下的导航条，将代码复制过来3.进入https://www.bootcdn.cn/4.添加 https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js 到html中5.img class=“logo” 给图片设置logo类，方便在css文件中设置样式6.div class="container"可设置多余的空白，不挤在一起

Toggle navigation {# #} {# #} {# #}

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

{#

• #}
  {# #}
  {#
• #}
  
• 首页 (current)
• 
  
• 发布问答
• 
  
  
  
  
  
  
  
  查找
  
  
  • 
    
  • 登录
  • 
    
  • 注册
  • 
    
  
  
  
  

  三.父模板抽离由于导航条在很多页面中都会出现，所以将其抽离出来写为一个基础模板base.html，其他模板继承它即可base.html

  {% block head %}{% endblock %}
  Toggle navigation

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
  {#            <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>#}
                  <li><a href="#">首页</a></li>
                  <li><a href="#">发布问答</a></li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键字">
              </div>
              <button type="submit" class="btn btn-default">查找</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">登录</a></li>
              <li><a href="#">注册</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
  </nav>
  {% block main %}{% endblock %}
  

  由于图片的大小问题，将navbar-brand图标类改为navbar-left
  
  
  index.html{% extends ‘base.html’ %}

  {% block title %}首页{% endblock %}

  {% block main %}
  这是首页
  {% endblock %}

  同理base.css也是继承基本的样式.logo{
  width: 100px;
  }