使用Bootstrap前端框架结合Django来开发web页面

最新推荐文章于 2024-03-14 00:15:42 发布

米谷

最新推荐文章于 2024-03-14 00:15:42 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap 文章标签： django python

本文链接：https://blog.csdn.net/migu4423/article/details/105175101

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

知识面：
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>

在这里插入图片描述

米谷

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用Bootstrap前端框架结合Django来开发web页面

知识面：Bootstrap来自Twitter，是前端框架，基于HTML、CSS、JavaScript，简洁灵活，web开发便捷。由动态CSS语言Less写出。PyPi仓库地址：https://pypi.org/project/django-bootstrap3/打开终端，执行如下命令：pip install django-bootstrap3xiaoxideMacBook-Pro:~...
复制链接

扫一扫