使用Bootstrap前端框架结合Django来开发web页面
知识面：
Bootstrap来自Twitter，是前端框架，基于HTML、CSS、JavaScript，简洁灵活，web开发便捷。由动态CSS语言Less写出。
PyPi仓库地址：https://pypi.org/project/django-bootstrap3/
打开终端，执行如下命令：
pip install django-bootstrap3
xiaoxideMacBook-Pro:~ xiaoxi$ pip3 install django-bootstrap3
Collecting django-bootstrap3
Downloading https://files.pythonhosted.org/packages/cc/9d/3e3b8c24db9790a9c7029e2c74e44236173a85fb7652657d39d587aab9a9/django_bootstrap3-12.0.3-py3-none-any.whl
Installing collected packages: django-bootstrap3
Successfully installed django-bootstrap3-12.0.3
xiaoxideMacBook-Pro:~ xiaoxi$
安装成功后，在项目MangerPlan/settings.py文件中添加“bootstrap3”应用。
settings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'plan'
'bootstrap3'
]
以下即将完成计划管理列表
打开/plan/views.py文件，修改plan_manage()函数
views.py
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
from django.contrib import auth
from django.contrib.auth.decorators import login_required
from plan.models import Requirement
# 创建views
def index(request):
return render(request, "index.html")
# 创建views
def role_list(request):
return render(request, "role_list.html")
# 创建views
def plan(request):
return render(request, "plan.png")
# 登录动作
def login_action(request):
if request.method == 'POST':
username = request.POST.get('username', '')
password = request.POST.get('password', '')
user = auth.authenticate(username=username, password=password)
if user is not None:
auth.login(request, user) # 登录 login函数接收HttpReques对象和一个user对象
# if username == 'dnxu' and password == '1':
# return HttpResponse('login success!') # 简单返回提示
# return HttpResponseRedirect('/plan_manage/') # 重定向要plan_manage.html页面
response = HttpResponseRedirect('/plan_manage/')
# cookies中三个参数分别为：user为浏览器cookie名， 第二个为用户在登录页面中输入的用户名（username），
# 第三个参数用于设置cookie信息在浏览器中保持的时间，默认单位为秒
# response.set_cookie('user', username, 3600) # 添加浏览器cookie
request.session['user'] = username # 将session信息记录到浏览器
return response
else:
return render(request, 'index.html', {
'error': 'username or password error!'}) # {}里的是错误提示的字典
# 计划管理
@login_required
def plan_manage(request):
requirement_list = Requirement.objects.all()
# username = request.COOKIES.get('user', '') # 读取浏览器cookie
username = request.session.get('user', '') # 要记得创建django_session表来存放用户sessionid对应信息的地方，通用命令生成即可
return render(request, "plan_manage.html", {
"user": username, "requirements": requirement_list})
导入Model中都Requirement类，通过Requirement.objects.all()查询所有需求内容对象（数据），并通过render()方法附加在plan_manage.html页面返回给客户端。
作者已把相关代码放到git上：https://github.com/defnngj/guest
编辑以下页面
plan_manage.html
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <title>计划管理系统</title>-->
<!--</head>-->
<!--<body>-->
<!-- <div style= "float:right;">-->
<!-- <a> 你好,{
{
user}}欢迎</a><hr/>-->
<!-- </div>-->
<!-- <h1>登录成功</h1>-->
<!--</body>-->
<!--</html>-->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
{
% load bootstrap3 %}
{
% bootstrap_css %}
{
% bootstrap_javascript %}
<title> 计划管理系统</title>
</head>
<body role="document">
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/plan_manage/">计划管理系统</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">需求列表</a></li>
<li><a href="/guest_manage/">人员</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">{
{
user}}</a></li>
<li><a href="/logout/">退出</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--需求列表表单-->
<div class="row" style="padding-top: 80px;">
<div class="col-md-6">
<table class="table table-striped">
<thead>
<tr>
<th>id</th><th>需求</th><th>优先级</th><th>预期上线时间</th><th>测试负责人</th><th>上线状态</th>
<th>上线时间</th><th>开发负责人</th><th>需求人员</th><th>备注</th>
</tr>
</thead>
<tbody>
{
% for requirement in requirements %}
<tr>
<td>{
{
requirement.id}}</td>
<td>{
{
requirement.content}}</td>
<td>{
{
requirement.emergenyLevel}}</td>
<td>{
{
requirement.expentedTime}}</td>
<td>{
{
requirement.tester}}</td>
<td>{
{
requirement.onlineTime}}</td>
<td>{
{
requirement.onlineTime}}</td>
<td>{
{
requirement.tester}}</td>
<td>{
{
requirement.requirer}}</td>
<td>{
{
requirement.onlineTime}}</td>
</tr>
{
% endfor %}
</tbody>
</table>
</div>
</div>
</body>
</html>
