Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）

一、Django中使用Bootstrap

1、首先建立工程，建立工程请参照：https://www.cnblogs.com/effortsing/p/10394511.html

2、在Firstdjango工程项目中手工创建一个文件名为static

3、配置静态目录

在setting.py中找到STATIC_URL配置如下：

STATIC_URL = '/static/'

STATICFILES_DIRS = (

  os.path.join(BASE_DIR,"static"),

)

4、添加APP包名（项目名称）

在setting.py中找到INSTALLED_APPS添加app的包名（app也就是项目名称）

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'Firstdjango',            #新添加的APP名（项目名称）

]

5、下载bootsrtap代码(http://www.bootcss.com/)，下载后解压放在project下新创建的static目录下。

6、下载dashboard.css放在static/bootstrap/css/目录下。（找不到也没关系）

7、下载jquery放在static/bootstrap/js/目录下。         （找不到也没关系）

8、下载合适的bootstrap模版样式(http://v3.bootcss.com/getting-started/)，下载的文件包含一个html和一个目录，(做实验没找到，直接用第9步的html基础文件)

9、在templates中新建一个名字为base.html的文件，添加内容如下：  这就是一个最简单的 Bootstrap 页面（模板文件html）

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

10、在templates里创建名目录(stu_crm)目录用来存放项目app使用的模版。

11、在stu_crm中新建dashboard.html，用来继承base.html模版。dashboard.html内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>student</title>

</head>

<body>

{% extends 'base.html' %}

</body>

</html>

12、设置url

在全局url中设置转发规则，在Firstdjango目录中找到urls.py脚本文件，用下面的代码代替urls.py脚本里面的内容:

from django.conf.urls import url,include

from templates.stu_crm import views

import templates.stu_crm

urlpatterns = [

    url(r'^stu_crm/',include('templates.stu_crm.urls')),

]

在stu_crm中创建urls.py，添加内容如下：

from django.conf.urls import url,include

from templates.stu_crm import views

import templates.stu_crm

urlpatterns = [

    url(r'^customer$',views.dashboard),

]

13、在stu_crm中创建视图函数 views.py，也就是脚本文件，添加内容如下：

from django.shortcuts import render

def customer(request):

    return render(request,'stu_crm/customers.html')

注意，返回html的路径为'stu_crm/dashboard.html'

14、修改base.html中引用js的路径（能做几个算几个）

由于下载的bootstrap样式中引用了一些线上的js文件，这里需要修改为本地的文件。

<!-- Bootstrap core CSS -->

    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">

...

    <script src="/static/bootstrap/js/jquery-2.2.3.js"></script>

    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->

    <script src="/static/bootstrap/js/holder.min.js"></script>

15、启动django工程

16、浏览器访问

http://127.0.0.1:8000/stu_crm/dashboard

你好，世界！

二、修改模版样式

1、删除base.html 中关于页面标题及内容样式的定义，并允许子模版继承后重写该部分。({ % block page-header% }、{ % block page-content% })，修改后内容如下：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap core CSS -->

    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

          <h1 class="page-header">{% block page-header %}your page header{% endblock %}</h1>

            {% block page-content %}

                your page content

            {% endblock %}

        </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

  </body>

</html>

2、在stu_crm中新建customers.html页面，用来展示客户信息列表。该页面继承父模版base.html，并自定义标题和主题内容。内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>student</title>

</head>

{% extends 'base.html' %}

{% block page-header %}

客户信息表

{% endblock %}

{% block page-content %}

    <table class="table table-striped">     #使用bootsrtap定义好的样式，将客户信息展示在一个表里

        <thead>　　　　　　　　　　　　　　　　　＃表头

            <tr>　　　　

                <th>ID</th>　　　　　　　　　　＃每列标题

                <th>QQ</th>

                <th>姓名</th>

                <th>渠道</th>

                <th>咨询课程</th>

                <th>班级类型</th>

                <th>客户备注</th>

                <th>状态</th>

                <th>课程顾问</th>

                <th>日期</th>

            </tr>

        </thead>

        <tbody>　　　　　　　　　　　　　　　　　　　　　　　　　＃表的主题内容

            {% for customer in customers_list %}

                <tr>

                    <td>{{ customer.id }}</td>　　　　　　＃每列展示的美美容

                    <td>{{ customer.qq }}</td>

                    <td>{{ customer.name }}</td>

                    <td>{{ customer.source }}</td>

                    <td>{{ customer.course }}</td>

                    <td>{{ customer.get_class_type_display }}</td>    ＃get_class_type_display 显示中文

                    <td>{{ customer.customer_note|truncatechars:30}}</td>　　　＃｜truncatechars:30 默认在页面只显示30个字节

                    <td class="{{ customer.status }}">{{ customer.get_status_display }}</td>  ＃根据不同的状态，添加底色样式，css样式在customers.css中定义

                    <td>{{ customer.consultant}}</td>

                    <td>{{ customer.date }}</td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

{% endblock %}

<body>

</body>

</html>

3、修改stu_crm中的urls.py内容如下：

from django.conf.urls import url,include

from templates.stu_crm import views

import templates.stu_crm

urlpatterns = [

    url(r'^customer$',views.customer),

]

将对localhost:8000/stu_crm/customer的请求转给customer函数处理

4、视图函数 views.py，内容如下：

from django.shortcuts import render

def customer(request):

    return render(request,'stu_crm/customers.html')

5、在base.html中添加对customers.css样式的引用（选做）

<link href="/static/bootstrap/css/dashboard.css" rel="stylesheet">

<link href="/static/bootstrap/css/customer.css" rel="stylesheet">

6、浏览器访问：

http://127.0.0.1:8000/stu_crm/customer




8、项目所有目录文件位置截图：



7、参照文档：

https://www.cnblogs.com/ahaii/p/5741808.html

Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）的更多相关文章

Django中使用Bootstrap
一.在Django中引用Bootstrap模版 1.首先下载bootsrtap代码(http://v3.bootcss.com/getting-started/#download),并将下载后的文件放 ...
下拉框select->option中如何把参数传到视图函数中去
例子: <select name="p_id" id=""> {% for p in permissions %} <option value ...
python框架Django中MTV框架之VIew(业务控制器)
MTV框架之VIew(业务控制器) 关注公众号"轻松学编程"了解更多. 1.什么是视图视图层=路由表(urls.py)+视图函数(views.py) 其角色相当于MVC中的Con ...
Django之views.py视图函数学习
视图函数: 视图函数时存在django项目中的应用程的一个名为views.py的文件模块: 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 一 ...
3 View - 错误视图函数
1.定义视图本质就是一个函数视图的参数一个HttpRequest实例通过正则表达式组获取的位置参数通过正则表达式组获得的关键字参数在应用目录下默认有views.py文件,一般视图都定义在这 ...
（33）关于django中路由自带的admin + 建表关系的讲解
admin是django自带的后台管理,在初始的时候就默认配置好了当输入ip地址的时候后面跟admin,就会登陆管理员的后台,这个是django自带的,可以快速管理数据表(增删改查) PS:ip地址 ...
django系列8.5--使用装饰器(视图函数中)实现用户登录状态检验
views.py def session_auth(fn): def inner(request,*args,**kwargs): status = request.session.get('sess ...
django项目外部的脚本文件执行ORM操作，无需配置路由、视图启动django服务
#一.将脚本路径添加到python的sys系统环境变量里 import sys # sys.path.append('c:/Users/Administrator/www/mymac') #第一种.绝 ...
MS SQL 中判断数据库, 存储过程,表,临时表,视图,函数,用户,用户创建对象等是否存在 SQL脚本
摘自: http://www.111cn.net/database/mssqlserver/39107.htm sql判断存储过程是否存在判断数据库教程是否存在 Sql代码 if exists (s ...

随机推荐

P2P system: FastTrack and BitTorrent
FastTrack FastTrack来源于Gnutella,是Gnutella 和 Napster的杂交体有些node承担了更重要的责任,这些nodes称为supernodes,因为这些改进,它比 ...
MVC框架和MTV框架
MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),具有耦合性低 ...
MyBatis和Spring整合案例
1.所需要导入的jar文件 !--MyBatis和Spring的整合包由MyBatis提供--> <dependency> <groupId>org.mybatis&l ...
007_项目制作拍摄视频篇之_《基于ARM与ZigBee的实验室签到系统》
研究的背景和意义: 随着社会生活节奏的加快,科技日新月异,信息更新迅速,人们之间的交流也变得越来越频繁,社会群体乃至政府之间的交流也朝着轻松.快速.容易管理和控制的方向发展,这种信息交流方式已经逐步得 ...
[Luogu] 仓鼠找sugar
https://www.luogu.org/problemnew/show/3398 树剖练习题,两个懒标记,搜索时序为全局懒标记 #include <bits/stdc++.h> usi ...
List集合类
1.1: List.add方法——向集合列表中添加对象 public static void main(String[] args) { List<String> list=new Ar ...
5.Python3列表和元组
5.1序列在python3中序列结构主要有列表.元组.集合.字典和字符串,对于这些序列有以下通用操作. 5.1.1 索引序列中的每一个元素都有一个编号,也称为索引.这个索引是从0开始递增的,即下 ...
FOI冬令营 Day1
目录 T1.全连(fc) 传送门 Code T2.原样输出(copy) 传送门 Code T3.不同的缩写(diff) 传送门 Code 打算把省冬的题目放上来,主要是防止自己偷懒不订正 T1. ...
codeforces#1251E2. Voting (Hard Version)（贪心）
题目链接: http://codeforces.com/contest/1251/problem/E2 题意: 主角需要获得n个人的投票有两种方式让某个人投票 1,已经投票的人数大于m 2,花p枚硬 ...
详解DLX及其应用
什么是DLX? 让我们看看百度百科上的解释:在计算机科学中, Dancing Links ,舞蹈链, 也叫 DLX, 是由 Donald Knuth 提出的数据结构,目的是快速实现他的 X算法.X ...

Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）

Django中使用Bootstrap----带view.py视图函数（也就是项目下的脚本文件）的更多相关文章

随机推荐

热门专题