为后续做web应用准备，加油(๑•̀ㅂ•́)و✧

0x01 Django安装

Mac 下安装：此次学习使用的Django版本是1.8.16

1
2
3
sudo easy_install pip
pip install django==1.8.16

踩坑：安装完成后，无法使用django-admin,会提示没有该命令；原因是django没有添加到环境变量中去。从网上找了好几个版本的解决方案，都没有解决，甚至找不到目录；特别是在MacOS 10.15版本下，使用find查找的django-admin无法创建链接，会报错 Cross device link的错误。

解决办法：

1
2
3
4
5
6
7
8
9
10
~/Desktop$ pip uninstall django
DEPRECATION: Python 2.7 reached the end of its life on January 1st, 2020. Please upgrade your Python as Python 2.7 is no longer maintained. pip 21.0 will drop support for Python 2.7 in January 2021. More details about Python 2 support in pip, can be found at https://pip.pypa.io/en/latest/development/release-process/#python-2-support
Found existing installation: Django 1.8.16
Uninstalling Django-1.8.16:
  Would remove:
    /Users/lowbee/Library/Python/2.7/bin/django-admin
    /Users/lowbee/Library/Python/2.7/bin/django-admin.py
    /Users/lowbee/Library/Python/2.7/lib/python/site-packages/Django-1.8.16.dist-info/*
    /Users/lowbee/Library/Python/2.7/lib/python/site-packages/django/*
Proceed (y/n)? n

由上面的提醒可以看到 /Users/lowbee/Library/Python/2.7/bin/django-admin，这就是我们要找的那个可执行文件，只要将它添加到环境变量中即可：

1
~/Desktop$ ln /Users/lowbee/Library/Python/2.7/bin/django-admin /usr/local/bin

0x02 创建项目

1
2
3
4
5
6
7
8
~/PycharmProjects$ mkdir demo
~/PycharmProjects$ cd demo/
~/PycharmProjects/demo$ django-admin startproject webDemo
~/PycharmProjects/demo$ cd webDemo
~/PycharmProjects/demo/webDemo$ django-admin startapp webApp
~/PycharmProjects/demo/webDemo$ ls
manage.py  webApp     webDemo
~/PycharmProjects/demo/webDemo/webApp$ mkdir templates

其中webApp/views.py就是你自定义函数的文件;此处创建的函数为hello():

注意：会用到html文件，可以提前创建，也可以后面创建,文件所在目录是 ~/PycharmProjects/demo/webDemo/webApp/templates

1
2
3
4
5
6
7
8
9
10
11
12
from django.shortcuts import render
from django.http import JsonResponse

# Create your views here.
def hello(request):
    if request.method =="GET":
        return render(request,"hello.html")
    elif request.method =="POST":
        name = request.POST.get("name")
        print name
        ret = {"result":"success"}
        return JsonResponse(ret)

去webDemo目录下修改urls.py和settings.py:

urls.py:访问设置的路径会调用对应的方法。

1
2
3
4
5
6
7
from django.conf.urls import include, url
from django.contrib import admin
from webApp import views
urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^hello/', views.hello),
]

settings.py:修改配置有两处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'webApp', #——————————————> 创建的功能目录
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware', #————>注释掉此行，防止CSRF报错
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.security.SecurityMiddleware',
)

创建hello.html文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        LowBee
    </head>
    <body>
        <div>
            <p>Hello this is home page</p>
            <input name="name_input" type="text">
            <button id="submit_btn">submit</button>
        </div>
    </body>
</html>

0x03 项目运行

1
~/PycharmProjects/demo/webDemo$ python manage.py 0.0.0.0:8191

访问https://localhost:8191:hello即可看见如下效果：

至此第一个基于Django的Web应用搭建完后，(虽然没有啥功能o(￣▽￣)ｄ)。

0x04 项目补充：

​ 在webApp创建static目录，在static目录下创建img和js两个文件夹，分别用来存放图片文件和js文件。

  • 将背景图片放到img文件下，此处命名为bg.jpg;

  • 编写hello.js如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#submit_btn').on('click',function(){
    var name = $("input[name='name_input']").val();
    var value = {"name":name}
    $.ajax({
        type: "POST",
        url: 'hello/',
        data: value,
        success: function(data){
            console.log(data);
            if (data.result == "success"){
                $("img").show();
                $("div").hide()
            }
        }
    })
});
  • 修改hello.html如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% load staticfiles %}
<html>
    <head>
        LowBee
    </head>
    <body>
        <img style="display:none" src= "{% static "img/bg.jpg" %}">
        <div>
            <p>Hello this is home page</p>
            <input name="name_input" type="text">
            <button id="submit_btn">submit</button>
        </div>
    </body>
</html>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/hello.js"></script>

此时在浏览器的端口输入，点击submit即可看见背景图片，并且命令行返回输入的值。

命令行的显示结果即为网站的日志信息