提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Django实践

• 导览
• 前言
• 一、环境介绍
• 二、安装与测试
• • 1. 框架安装
  • 2. 查看版本
  • 3. 新建项目
  • 4. 新建App
  • 5. 运行项目
  • 6. 测试项目
  • 7. 局域配置
  • 8. 自定端口
  • 9. 局域测试
• 三、html调试
• • 1. 下载模板
  • 2. 导入html
  • 3. 导入static
  • 4. html映射
  • 5. 测试服务
  • 6. 调试结果
  • 7. Q&A
  • ...
• 四、简易API
• • 1. 创建接口函数
  • 2. 创建Urls配置
  • 3. 创建前端页面
  • 4. API交互调试
• 持续更新...

---

导览

以下内容您将了解如何使用Django快速搭建网站
并且使用预制html代码完成局域网的页面浏览服务

---

前言

网页目前是可以更完整表达意愿的综合媒介，
本人热衷于整合各种频率完成个人意愿表达，
并用这些表达帮助更多人消化溢价情绪能量。
与国内不同国外一直保持对网页技术的热情，
希望通过学习来独立完成网站的前后端搭建。
本章为零基础学习Django快速获得学习反馈，
供本人学习复盘使用也不具任何学习观摩性。

---

一、环境介绍

系统版本：MacOS Monterey 12.4
芯片版本：Apple M1 Max
软件版本：Python 3.8
编辑版本：PyCharm 2022.1.1
…

---

二、安装与测试 1. 框架安装

打开terminal，输入如下代码：

# temrinal输入
python3.8 -m pip install Django

…

2. 查看版本

# temrinal输入
python3.8 -m django --version

…

3. 新建项目

# temrinal输入
django-admin startproject website

…

4. 新建App

# terminal输入
python3.8 manage.py startapp webapp

…

5. 运行项目

# terminal输入
python3.8 manage.py runserver

…

6. 测试项目

# 浏览器输入
http://127.0.0.1:8000/

…

7. 局域配置

# setting.py输入
ALLOWED_HOSTS = ['*',]

注：找到并更改ALLOWED_HOSTS就可开启局域网
setting.py可以在项目文件中找到

…

8. 自定端口

1. python文件更改

   # manage.py输入
   execute_from_command_line(['manage.py', 'runserver', '0.0.0.0:2516'])
   

   注：直接在manage文件中”main函数“的最后一行添加该命令
   2516端口处可以改为任何你希望的端口号

2. # terminal输入
   python3.8 manage.py runserver 0.0.0.0:2516
   

   也可以直接在teminal中

…

9. 局域测试

# 浏览器输入
http://192.168.x.xx:8000/

注：ip地址替换成局域网设备地址
按住Option点击MacTopBar中的无线图标，查阅并获得ip地址
代码中192.168.x.xx处即为ip地址替换处
可以使用外部手机或电脑进行测试访问

…

---

三、html调试 1. 下载模板

# 浏览器输入: 挑选下载一个喜欢的html模板
https://elements.envato.com/

注: envato是比较成熟综合素材网
UI/UX设计可以降维用于日常测试
适合平时制作ppt和影视资源使用

…

2. 导入html

1. 创建templates

   # 该文件夹将用于存放html内容
   (project)/(item)/templates
   

2. 导入html

   # 将模板索引页拖入templates中
   (project)/(item)/templates/index.html
   (project)/(item)/templates/home.html
   ...
   

3. views新建

   # views.py输入 （ path一定要设置 name= ' ' 方便后面调用网页 ）
   from django.urls import path
   from . import views 
   
   urlpatterns = [
   	path('index/', views.index，name='index'),
   	path('home/', views.home，name='home'),
   	...
   ]
   

4. urls新建

   # url.py输入
   from django.shortcuts import render
   
   def index(request):
   	 return render(request, 'index.html')
   	 
   def home(request):
   	return render(request, 'home.html')
   ...
   

5. DIRS设置

   # setting.py 添加DIRS
   import os
   
   TEMPLATES = [
   	{ ...
   	  'DIRS': [os.path.join(BASE_DIR, 'templates')],
   	  ... }
    ]
   

6. INSTALLED_APPS设置

   # setting.py 添加所建的App
   import os
   
   INSTALLED_APPS = [
   [ ...
     'xxx-app',
     ... 
   ]
   

…

3. 导入static

1. 创建static

   # 该文件夹将用于存放物及料配置内容 (位置与templates同级）
   (project)/(item)/static
   

2. 导入物料

   # 文件移动 (该文件夹将用于存放Images、JavaScript、CSS等文件)
   (project)/(item)/static/images
   (project)/(item)/static/css
   (project)/(item)/static/js
   ...
   

…

4. html映射

1. 跳转链接映射

   # html链接映射
   {% url 'home' %}
   

2. 物料链接映射

   # 物料链接映射
   ../static/images/xxx.png
   ../static/css/xxx.css
   ../static/js/xxx.js
   

…

5. 测试服务

1. 运行网页服务

   # project/terminal输入
   python3.8 manage.py
   

2. 退出网页服务

   # 退出项目 
   control + c
   

6. 调试结果

动画效果及排版等正常显示

…

7. Q&A

# Question: （ 报错 ）
Django-Error: That port is already in use

# Answer: （ 查询正在使用的进程并终止 ）
lsof -i:oooo 
kill -9 nnnn 

… 四、简易API 1. 创建接口函数

# views.py 定义接口
from django.shortcuts import render
from django.http.response import HttpResponse
import json

# def login(requst):
#     if requst.method == 'GET':
#         result = {}
#         username = requst.GET.get('username')
#         mobile = requst.GET.get('mobile')
#         data = requst.GET.get('data')
#         result['user'] = username
#         result['mobileNum'] = mobile
#         result['data'] = data
#         result = json.dumps(result)
#         return HttpResponse(result)
#     else:
#         return render(requst,'login.html')

def login(requst):
    if requst.method == 'POST':
        result = {}
        username = requst.GET.get('username')
        password = requst.GET.get('password')
        result['user'] = username
        result['password'] = password
        result = json.dumps(result)
        return HttpResponse(result)
    else: 
    	# 此处可对返回值做自定义函数处理
        return render(requst,'login.html')

…

2. 创建Urls配置

# setting.py 定义接口
from django.contrib import admin
from django.urls import path

urlpatterns = [
    ...
    path('login/', views.login),
    ...
]

…

3. 创建前端页面

# html



    
    



    
用户名：
    
密码：
    

…

4. API交互调试

1. 运行网页服务

   # project/terminal输入
   python3.8 manage.py
   

2. 用户输入内容提交

   asj!~fh%$#@#!
   

3. 服务器反馈

   [xx/Jun/2022 14:20:26] "GET /xxxxx = HTTP/1.1" 3xx x
   

4. 退出网页服务

   # 退出项目 
   control + c
   

---

持续更新…