美文网首页python学习系列
python+flask(五)制作项目的结构以及模板的制作

python+flask(五)制作项目的结构以及模板的制作

作者: 测试_机器猫 | 来源:发表于2020-09-01 17:53 被阅读0次

这一系列篇幅知识都是通过参考别人做的博客来一步一步学习的,当然大题思路都是一样的,目录结构和界面样式会有改动,后面有备注作者的博客来源

这里我先创建的大体目录结构,目前main的前端还是空的,我们先从后端开始

image

(1)这里我们就手动下载Bootstrap,下载地址: https://v3.bootcss.com/getting-started/#download直接下载生成环境的就行,下载解压后,把其中的css和js文件夹拷贝到我们项目的admin/static下面

image

(2)接下来制作基础模板,在 templates/common 文件夹下建立一个 base.html 文件内容如下:


<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="description" content="人淡如菊">

<meta name="author" content="机器猫">

<link rel="icon" href="{{url_for('.static',filename='img/favicon.ico')}}">

        <title>{%block title %}博客系统{%endblock %}</title>

        {%block css %}

            <link href="{{url_for('.static',filename='css/bootstrap.min.css')}}" rel="stylesheet">

            <link href="{{url_for('.static',filename='css/font-awesome.min.css')}}"

                  rel="stylesheet">

<meta name="theme-color" content="#563d7c">

            <link href="{{url_for('admin.static',filename='css/admin.css')}}" rel="stylesheet">

<link href="{{url_for('admin.static',filename='css/toastr.min.css')}}" rel="stylesheet">

{%endblock %}

</head>

<body class="layout-boxed">

{%block body %}

<div class="wrapper">

{%include 'common/header.html' %}

            <div class="container-fluid">

<div class="row">

{%include 'common/sidebar.html' %}

                    <main role="main" class="col-lg-10 ml-sm-auto px-4 bg-light">

{%block content %}{%endblock %}

</main>

                </div>

            </div>

        </div>

{%endblock %}

        {%block js %}

            <script src="{{url_for('admin.static',filename='js/jquery.min.js') }}"></script>

<script src="{{url_for('admin.static',filename='js/popper.min.js') }}"></script>

<script src="{{url_for('admin.static',filename='js/bootstrap.min.js') }}"></script>

<script src="{{url_for('admin.static',filename='js/toastr.min.js')}}"></script>

<script src="{{url_for('admin.static',filename='layer/layer.js')}}"></script>

            <script src="{{url_for('admin.static',filename='js/admin.js')}}"></script>

{%include 'common/alert.html' %}

{%endblock %}

</body>

</html>

其中:host='0.0.0.0'代表运行其它人的机器远程访问,访问具体格式:ip:5000/test,这里我用的是我本机的ip地址

如图所示:

image

其中你可能遇到的问题

image

问题解决:这是因为你直接在pycharm中运行的,改成cmd命令运行就ok

一些前端的知识

https://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

https://www.runoob.com/bootstrap/bootstrap-typography.html

参考博客来源:https://gitee.com/pojoin/h3blog
想根据我的系列完成这种博客的开发,必须先熟悉这个博客的所有功能

技术交流群

image

相关文章

网友评论

    本文标题:python+flask(五)制作项目的结构以及模板的制作

    本文链接:https://www.haomeiwen.com/subject/fkgzjktx.html