一、前戏-MVC框架与MTV框架
1.MVC
MVC（Model View Controller），是一种软件工程开发的架构模式，不仅适用于软件开发，而且适用于其他广泛的设计和组织工作，主要思想通过分层的概念把软件系统分为三层：
1）模型（Model），负责数据的存取和分发
2）视图（View），负责如何把前端页面的展示
3）控制器（Controller），从视图层接收客户端输入的指令
每层间紧密联系，但又互相独立，每一层的发生变化不影响其它层，且都对外提供接口，共其它层调用，从而实现模块化设计，修改外观或者变更数据都不用涉及其它层，便于升级和维护
2.MTV
MTV（Model Template View），即模型、模板、视图，是Django了框架的设计模式，它借鉴了MVC框架的思想，也是分为三层以减低各层之间的耦合性
1）模型（Model），负责业务对象与数据库的对象(ORM)
2）模板（Template），负责如何把页面展示给用户
3）视图（View），负责业务逻辑，并在适当的时候调用Model和Template
Django中设置了一个urls分发器，用于将URL页面请求分发给不同的view处理，view再调用相应的Model和Template
二、Django框架
1.创建工程
方法一：cmd模式下输入django-admin startproject 工程名
方法二：pychram下创建
2.Django工程的目录结构
---
|-manager.py 管理项目的命令行工具，进行站点运行，数据库自动生成、静态文件收集等
|-templates
|-djangosite
| |-__init__.py 告诉Python这是一个包
| |-setting.py 配置文件，默认时定义本项目引用的Django组件、项目名等。在之后的开发中，还需要在其中配置数据库参数、导入的其他包信息等
| |-urls.py 维护项目的URL路由映射，即定义客户端访问的URL由哪一个Python模块解释并提供反馈。默认，其中只定义了"/admin"，即管理员站点的解释器
| |-wsgi.py 定义WSGI接口信息，用于和其它WEB服务器集成，一般本文件在生成后无需改动
|
**注释：
****建立应用，一个Django项目可建立多个应用：
****语法：python manager.py 站点名或者django-admin startapp 站点名
|
|-app
| |-__init__.py
| |-admin.py 管理站点模型的声明文件，默认为空
| |-apps.y 应用信息定义文件，在其中生成AppConfig，该类用于定义应用名等Meta数据
| |-migrations 用于之后定义引用迁移功能
| |-models.py 添加模型层数据类的文件
| |-test.py 测试代码文件
| |-views.py 定义URL响应函数
|
---Remade 项目介绍文件（自建）
三、示例
以图书馆管理系统为例看目录结构以及配置
1.修改setting.py配置文件
1）添加新建的APP
INSTALLED_APPS = ['publisher.apps.PublisherConfig', # 添加新建的APP
]
2）关闭提交表单时的403报错
MIDDLEWARE = [# 'django.middleware.csrf.CsrfViewMiddleware',
]
3）配置数据库连接参数
# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
DATABASES = {
'default': {
# 连接数据库的模块
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day62',
'HOST': '127.0.0.1',
'PORT': '',
'USER': 'root',
'PASSWORD': '',
}
}
4）配置自动在URL后面添加斜杠
APPEND_SLASH = True
5）配置静态文件目录，同时在templates的统计目录下添加文件夹static
注：
静态文件夹一般用于存放HTML等需要的文件，如CSS、JS文件等
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/
STATIC_URL = '/static/' STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'), # 末尾必须加逗号
)
6）setting.py文件的同目录下的__init__.py指定连接数据库需要的模块
import pymysql
pymysql.install_as_MySQLdb()
2.添加视图文件
1）在templates文件夹内添加HTML文件
2）在static文件夹内添加HTML文件需要的CSS、JS等文件
3）通过django-admin startapp在工程添加APP
django-admin startapp APP名称
4）在APP的根目录下的models.py中添加模型
创建完毕之后，在cmd下执行两个命令：
python manage.py makemigrations 将变更的models.py登记到当前APP的migrations文件夹中的001_initial.py文件中
python manage.py migrate 将登记的改动信息转换成SQL语句，转移到数据库中执行
from django.db import models # Create your models here.
# 创建的对象必须继承Model
class Publisher(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=32)
5）在APP的根目录下的views.py中添加视图
from django.shortcuts import render
from django.shortcuts import redirect
from publisher import models # Create your views here.
def publisher(request):
ret = models.Publisher.objects.all()
print(ret)
return render(request,'publisher.html',{'publisher':ret}) def add_publisher(request):
# 根据请求方法的不同，要做不同的事情
if request.method == "POST":
# 你要给我发新数据了
# 1. 取到你发送的数据
new_publisher_name = request.POST.get("publisher_name")
# 2. 去数据库存数据
models.Publisher.objects.create(name=new_publisher_name)
# 回复创建成功
return redirect("/publisher_list/")
return render(request, "add_publisher.html")
6）在urls.py中添加URL路由
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from publisher import views urlpatterns = [
path('admin/', admin.site.urls),
url(r'^publisher',views.publisher),
url(r'^add_publisher',views.add_publisher), # 新建的两个视图的URL路由
]
附录：
视图文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico"> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="/static/dashboard.css" rel="stylesheet">
<link href="/static/my-style.css" rel="stylesheet"> <title>图书管理系统</title>
</head>
<body> <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-menu"
aria-expanded="true"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
</div>
</div>
</nav> <div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar collapse" id="my-menu">
<div class="my-menu-item" data-target="#menu-son1" data-toggle="collapse"><a>菜单一</a></div>
<ul class="nav nav-sidebar collapse" id="menu-son1">
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Overview</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
</ul>
<div class="my-menu-item" href="#menu-son2" data-toggle="collapse"><a>菜单二</a></div>
<ul class="nav nav-sidebar collapse" id="menu-son2">
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
</ul>
<div class="my-menu-item" href="#menu-son3" data-toggle="collapse"><a>菜单三</a></div>
<ul class="nav nav-sidebar collapse" id="menu-son3">
<li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
<li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">图书信息管理系统</h1> <!-- 面板开始 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">出版社管理</h3>
</div>
<div class="panel-body">
<!--表格 工具栏 开始-->
<div class="row table-toolbar">
<div class="col-md-3 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span> </div><!-- /input-group -->
</div><!-- /.col-lg-6 --> <div class="col-md-3 col-sm-6 pull-right add-btn">
<button data-target="#myModal" data-toggle="modal" class="btn btn-success pull-right">新增
</button>
<a href="/add_publisher/" class="btn btn-info pull-right">新页面添加
</a>
</div> </div>
<!--表格 工具栏 结束--> <table class="table table-striped table-bordered">
<thead>
<tr>
<th>id</th>
<th>出版社名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for pub in publisher %}
<tr>
<td>{{ pub.id }}</td>
<td>{{ pub.name }}</td>
<td class="text-center">
<button class="btn btn-info btn-sm"><i class="fa fa-pencil fa-fw"
aria-hidden="true"></i>编辑
</button>
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-fw"
aria-hidden="true"></i>删除
</button>
</td>
</tr>
{% endfor %} </tbody>
</table> <!--分页 开始-->
<div>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<!--分页 结束-->
</div>
</div>
<!-- 面板 结束-->
</div>
</div>
</div> <!--模态框开始-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<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">添加新信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">出版社名称</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="名称">
</div>
</div>
<div class="form-group">
<label for="addr" class="col-sm-3 control-label">出版社地址</label>
<div class="col-sm-9">
<textarea id="addr" class="form-control" rows="3"></textarea>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束--> <script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body>
</html>
主视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<title>Title</title>
</head>
<body> <div class="container">
<h1>添加新的出版社</h1>
<dvi class="row">
<form action="/add_publisher/" method="post">
<input type="text" name="publisher_name">
<input type="submit" value="提交">
</form>
</dvi>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body>
</html>
添加出版社的视图