这一系列篇幅知识都是通过参考别人做的博客来一步一步学习的，当然大题思路都是一样的，目录结构和界面样式会有改动，后面有备注作者的博客来源
这里我先创建的大体目录结构，目前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
网友评论