一、制作前的准备
1、下载BootStrap和Font-Awesome插件
2、创建static文件夹，并文件夹内进行分类，且把插件放入plugins文件夹
二、操作流程
1、创建project，并做好相关配置
2、models中创建projects表
3、
URL ==》views ==》 HTML
三、HTML操作
引入插件 ==》插入模板 ==》引入jQuery并进行绑定 ==》对模板进行编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# 引入插件 #}
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
<style>
.icon{
margin: 0px 5px;
}
</style>
</head>
<body>
<div class="container">
<div style="padding:20px 0;">
<a class="btn btn-primary" id="addBtn">添加</a>
<a class="btn btn-danger"">删除</a>
</div>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for row in stu_list %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.gender}}</td>
<td>{{row.cs.name}}</td>
<td>
<a href="" class="glyphicon glyphicon-remove icon"></a>
<a href="" class="fa fa-pencil-square-o icon"></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">创建学生</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cs">
{% for row in stu_list %}
<option value="{{row.cs.id}}">{{row.cs.name}}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
{# jquery必须放插件前 #}
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function() {
bindEvent();
});
function bindEvent() {
$('#addBtn').click(function() {
$('#addModal').modal('show');
})
}
</script>
</body>
</html>
四、报错记录
Unknown command
未知命令