首先是想好了我们前端需要做成什么效果的,所以我先制作的是前端页面app/templates/project.html
{% extends "base.html" %}
{% block content%}
<head>
</head>
<div class="top_button">
<input id="add_project" type="button" value="添加项目" class="btn btn-primary" onclick="open_win()">
</div>
<!--使用form表单提交项目数据到后台,然后后台经过处理将项目存入数据库,再然后将数据库的项目列表展示到前台页面-->
<!--添加窗口采用原本将其隐藏,当点击添加项目或者编辑的时候通过js控制再将其显示出来并进行添加或编辑,需要的元素也是通过js来控制就好-->
<form action="{
{ url_for('add_project')}}" method="post" id="new_win" class="form-horizontal">
<h2 id="own_title">添加项目</h2>
<!--使用bootstrap的form-group与栅格系统来渲染form表单以是的这个表单更好看一点-->
<div class="form-group">
<label class="col-sm-2 control-label" id="id_num">编号</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="id_num">
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">项目名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="project_name">
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">创建</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="creator">
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group" id="di_button">
<div class="col-sm-offset-5 col-sm-7">
<input type="submit" value="提交" class="btn btn-primary">
<input type="button" value="关闭" class="btn btn-primary" onclick="close_win()">
</div>
</div>
</form>
<table border="2" class="table table-striped">
<tr>
<th