Python Flask: 笔记列表网页设计
来自CloudWiki
实训步骤
网页头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>读书笔记</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
导航栏
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">学习笔记</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">主页</a></li>
<li><a href="/articles">笔记</a></li>
<li><a href="/about">关于</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/register">注册</a></li>
<li><a href="/login">登录</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
制作表格
<h1>控制台 <small> 欢迎 您</small></h1>
<a class="btn btn-success" href="/add_article"> 添加笔记 </a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>标题</th>
<th>作者</th>
<th>日期</th>
<th></th>
<th></th>
</tr>
<!-- {% for article in articles %} -->
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
</table>
页脚
<!-- 页脚 --> <footer class="page-footer font-small blue" style="margin-top: 50px"> <!-- Copyright --> <div class="footer-copyright text-center py-3"> Copyright ©2007-2019 <a href="http://www.mingrisoft.com">明日科技有限公司</a> All Rights Reserved 吉ICP备10002740号-2 吉公网安备22010202000132 </div> <!-- Copyright --> </footer> </body> </html>
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>读书笔记</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">学习笔记</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">主页</a></li>
<li><a href="/articles">笔记</a></li>
<li><a href="/about">关于</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/register">注册</a></li>
<li><a href="/login">登录</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<h1>控制台 <small> 欢迎 您</small></h1>
<a class="btn btn-success" href="/add_article"> 添加笔记 </a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>标题</th>
<th>作者</th>
<th>日期</th>
<th></th>
<th></th>
</tr>
<!-- {% for article in articles %} -->
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
<tr>
<td>1</td>
<td>Linux学习笔记</td>
<td>马欣</td>
<td>2022-02-06</td>
<td><a href="edit_article/" class="btn btn-default pull-right">Edit</a></td>
<td>
<form action="" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
</table>
<!-- 页脚 -->
<footer class="page-footer font-small blue" style="margin-top: 50px">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">
Copyright ©2007-2019 <a href="http://www.mingrisoft.com">明日科技有限公司</a>
All Rights Reserved 吉ICP备10002740号-2 吉公网安备22010202000132
</div>
<!-- Copyright -->
</footer>
</body>
</html>
