Django2 学习笔记

一、待办事项清单网站

基于 Django 2 零基础 - 待办清单网站 (2018.6.13更新)

1 前期准备

1.1 安装python

略

1.2 安装运行虚拟环境

图1.2 为什么需要虚拟环境

命令行，安装虚拟环境：

pip install virtualenv   ＃安装virtualenv

建个Django_venv文件夹作为虚拟环境，然后回到命令行：

cd Django_venv  # 进入该文件夹
virtualenv .  # 在当前文件夹构建虚拟环境
cd Scripts  #进入Scripts文件夹
activate  # 激活虚拟环境

然后就能看到路径前面有括号，表明已经进入虚拟环境。

1.2 安装Django2.0.5

pip freeze  # 查看已安装的包
pip install django==2.0.5  # 安装django2.0.5

1.4 建立项目，启动服务器

建个 Django_Projects 文件夹存放所有django项目。

cd Django_Projects
django-admin startproject to_do_list  # 创建项目
cd to_do_list  # 进入项目文件夹
python manage.py runserver  # 启动服务器
# 在浏览器网址栏输入 localhost:8000
ctrl + c  # 关闭服务器

2 创建APP

我们当然可以像写Hello World一样，在Django的主模块中加各种功能。但当项目变得巨大的时候，各种各样的功能全都放在这里，就会显得太过杂乱，缺乏逻辑性和层次性。Django中App的作用就在于此，我们可以将不同类型的功能分成多个不同的App应用来开发，就如同手机上不同的App有不同的功能一样，由手机系A统分别对其使用。

2.1 激活虚拟环境

cd Django_venv\Scripts # 到虚拟环境文件夹的脚本文件夹中
activate  # 激活
cd ..
cd Django_Projects\to_do_list # 进入项目文件夹
python manage.py runserver  # 启动服务器

2.2 注册该app

告知服务器APP的存在

在settings.py INSTALLED_APPS 中加入
'todolist',

3 urls和views

通过网址访问网页，而不是在vscode中的html右键打开。

to_do_list/to_do_list/urls.py [所有网址首先由它接手]（邮编）
                       ||
                       ||
                      \  /
                       \/
to_do_list/todolist/urls.py [与待办事项相关的网址交给它接手]
                       ||
                       ||
                      \  /
                       \/
to_do_list/todolist/views.py [用户通过这些网址发出的请求的由它来处理]

3.1 把主页交给APP负责

在项目文件夹下的urls.py添加语句，将app下的urls.py引入，并在urlpatterns中添加path：

3.2 设置APP响应用户请求

在todolist文件夹下新建urls.py文件，仿照to_do_list中的urls.py来写：

在views中写一个函数home()：

启动服务器，输入网址，结果如下：

4 bootstrap

从 网址 找到Navbar static，查看并复制网页源代码，粘贴到todolist/templates/home.html中。
替换cdn：

<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

5 网址名和网页名

• 关于include()
• 大项目 -> 要避免网址名 网页名冲突
• render() 如何找到网页 ?
  根据所提供的网页名称，找所有的templates的文件夹,取第一个匹配的
• 网页名字重复怎么办?
  给个前缀
  建个新文件夹在templates下,以 app的名字 命名
  templates/app的名字/网页名字
  views.py -> return render(request, “todolist/home.html”)

	<a href="hostname/urlpattern"></a>

• 想改网址怎么办?要改的地方好多o(╥﹏╥)o
  给网址起名字

	<a href="{% url 'url_name' %}"></a>  template tag{% tag_name  %}

• 网址名跟其他app里面的网址名字重复怎么办?
  给个前缀
  urls.py -> app_name = ‘todolist’

	<a href="{% url 'todolist:url_name' %}"></a>

e.g. 该项目，在html中加上：

<a class="nav-link" href="{% url 'todolist:主页' %}">待办清单</a>

6 模板继承

• 想改变导航栏的样式怎么办? 3个网页都要改?
  Template inheritance
  做个模板html(所有网页的风格主题), 其他网页继承它,拓展它, 类似python的类继承

extends
{% extends "base.html" %}

block tag
{% block blockname %}

{% endblock blockname %}

three-level 大网站建议三级,小网站两级 

                              article.html
                            / 
             base_news.html  
           /                \
base.html                     live.html
           \
             base_sports.html

7 静态文件

新建静态文件夹static，存放图片css javascript
在static文件夹里面，再新建一个app文件夹，避免与其他app的静态文件夹里面的静态文件冲突：
app/static/app/images
app/static/app/js
app/static/app/css
app/static/app/icons

{% load static %}
{% static “路径” %}

至此home.html代码如下：

{% extends "todolist/base.html" %}
{% load static %}
{% block css %}{% static 'todolist/css/home.css' %}{% endblock css %}
{% block 标题 %}你的个人待办清单{% endblock 标题 %}
{% block 主页高亮 %}active{% endblock 主页高亮 %}
{% block 主体 %} 
<br>
<table class="table table-hover">
  <thead class="thead-light">
    <tr>
      <th scope="col">序号</th>
      <th scope="col">待办事项</th>
      <th scope="col">编辑</th>
      <th scope="col">划掉</th>
      <th scope="col">删除</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>去超市</td>
      <td><a class="text-dark" href="{% url 'todolist:编辑' %}">编辑</a></td>
      <td><a href="#">划掉</a></td>
      <td><a class="text-info" href="#">删除</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>码代码</td>
      <td><a class="text-dark" href="{% url 'todolist:编辑' %}">编辑</a></td>
      <td><a href="#">划掉</a></td>
      <td><a class="text-info" href="#">删除</a></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Mark</td>
      <td><a class="text-dark" href="{% url 'todolist:编辑' %}">编辑</a></td>
      <td><a href="#">划掉</a></td>
      <td><a class="text-info" href="#">删除</a></td>
    </tr>
    <tr class="table-dark">
      <th class="text-dark" scope="row">4</th>
      <td class="text-dark" id="line-through">吃早餐</td>
      <td class="text-secondary">不可编辑</td>
      <td><a class="text-info" href="#">撤销</a></td>
      <td><a class="text-danger" href="#">删除</a></td>
    </tr>
  </tbody>
</table>
{% endblock 主体 %}

8 处理用户请求

8.1 POST

蓝色是Django的要求，红色是html本来的要求：
scrf防止跨站攻击。
action=""表明执行动作的页面是本页（默认）。

8.2 GET

forloop.counter：循环的计数变量，从1开始计。
列表可以随意访问，无需申明。
申明列表用global lst实现。
页面错误：
200 正常
403 拒绝
404 找不到

8.3 删除项目

如果直接链接本页，会和刷新本页一样是GET请求，出现冲突。因此链接到另一页，用另一个函数去处理，让它跳回本页。
通过序号判断删的是谁。

用GET实现删除是不严谨的，这样当输入xxxx/del/1的时候，表格中的第一项就直接删除了。
因此要用POST实现，即将html中的删除改为表单的形式。

8.4 修改项目

代码逻辑类似。

8.5 划掉和撤销

区分撤销和划掉（True改成False/False改成True）：用一个隐藏的input（type=“hidden”）。根据value的不同。

9 bootstrap警告栏和弹窗

bootstrap模板

替换js为：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

进入数据库部分之前，我保存了一次代码： 提取码：my36

10 数据库