python+flask(二)bootstrap的接入和远程访问
这一系列篇幅知识都是通过参考别人做的博客来一步一步学习的，当然大题思路都是一样的，目录结构和界面样式会有改动，后面有备注作者的博客来源
这里我先创建的大体目录结构，目前main的前端还是空的，我们先从后端开始
（1）这里我们就手动下载Bootstrap,下载地址： https://v3.bootcss.com/getting-started/#download直接下载生成环境的就行，下载解压后，把其中的css和js文件夹拷贝到我们项目的admin/static下面
（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>
```
制作头部模板，头部模板被放置在templates/common 文件夹下,命名为 header.html
```
<nav class="navbar p-0 border-bottom">
<span class="navbar-brand col-sm-3 col-md-2 mr-0 text-center ">博客</span>
<a class="navbar-inline" href="{{url_for('admin.index')}}" target="_blank">首页</a>
<ul class="navbar-nav px-3 border-left">
<li class="nav-item text-nowrap">
<a class="nav-link " href="{{url_for('admin.logout')}}">退出</a>
</li>
</ul>
</nav>
```
制作侧边模板
```
<nav id="sidebar" class="col-lg-2 d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link font-weight-bold active" href="{{url_for('admin.index')}}">
面板
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex px-3 pt-2 mt-1 mb-1 text-muted">
<span>文章管理</span>
</h6>
<ul class="nav flex-column ml-1">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index') }}">
撰写文章
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
文章列表
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
分类列表
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
标签管理
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
文章推荐
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex px-3 pt-2 mt-1 mb-1 text-muted ">
<span>设置</span>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
网站设置
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
用户管理
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
在线工具
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
邀请码
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="{{url_for('admin.index')}}">
抓取日志
</a>
</li>
</ul>
</div>
</nav>
```
然后我们新建一个index.html继承一下base.html,运行一下看下效果
其中:host='0.0.0.0'代表运行其它人的机器远程访问，访问具体格式:ip:5000/test，这里我用的是我本机的ip地址
其中你可能遇到的问题
问题解决：这是因为你直接在pycharm中运行的，改成cmd命令运行就ok
一些前端的知识
https://www.runoob.com/bootstrap/bootstrap-navigation-elements.html
