Django项目开发操作实例

Phil_xian

已于 2022-11-03 15:55:41 修改

阅读量739

点赞数

分类专栏：框架学习工作需求日志文章标签： django python 后端

于 2022-11-03 15:50:07 首次发布

本文链接：https://blog.csdn.net/phillip_xian/article/details/127671753

版权

工作需求日志同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

框架学习

9 篇文章 0 订阅

订阅专栏

Django项目开发操作实例

1.创建项目

在专业版Pycharm在项目开发路径下新建或者打开PythonProjects

通过Pycharm的Terminal命令行，在当前路径下，新建Django项目aspage

Django-admin startproject aspage

$(D:\myMarkDown\11月生产\Django项目开发\D001.png)]$

运行上面语句后，项目aspage的目录结构如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ljZUnGk-1667461262644)(D:\myMarkDown\11月生产\Django项目开发\D002.png)]$

2.配置数据库

2.1 新建数据库

首先，利用mysql作为后台数据存储，需要创建与项目同名的数据库

CREATE DATABASE IF NOT EXISTS aspage DEFAULT CHARSET utf8;

2.2 添加配置

然后，在项目aspage下的同名文件夹aspage中找到setting.py，修改setting.py中的DATABASES配置项

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePVKGe3d-1667461262645)(D:\myMarkDown\11月生产\Django项目开发\D003.png)]$

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
        'NAME': 'aspage',  # 数据库名称
        'HOST': '127.0.0.1',  # 数据库地址，本机 ip 地址 127.0.0.1
        'PORT': 3306,  # 端口
        'USER': 'root',  # 数据库用户名
        'PASSWORD': '123456',  # 数据库密码
    }
}

2.3 引用模块

最后，在与 settings.py 同级目录下的 init.py 中引入 pymysql 模块，连接数据库

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdmQKID7-1667461262645)(D:\myMarkDown\11月生产\Django项目开发\D004.png)]$

import pymysql
pymysql.install_as_MySQLdb()

3.新建应用与配置

3.1 新建应用

首先，再次利用Pycharm的Terminal命令行，cd进入aspage路径下，创建应用apphot

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m4XaQzkC-1667461262646)(D:\myMarkDown\11月生产\Django项目开发\D005.png)]$

python manage.py startapp apphot

应用apphot创建后，其目录结构如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tuQigUg-1667461262647)(D:\myMarkDown\11月生产\Django项目开发\D006.png)]$

3.2 添加配置

然后，在上面的settings.py 中找到INSTALLED_APPS配置项，将新创建的apphot添加到项目的App列表

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apphot',                 # 添加此项
]

4.定义模型

4.1 定义模型

上面配置数据库时，创建了一个空白的数据库aspage，这一步我们通过Django的模型来完成数据库表的创建。

在项目apphot的models.py文件中定义模型,代码如下:

from django.db import models
# Create your models here.

# ssq的类
class Info_hot(models.Model):
    hot_word = models.CharField('热词', max_length=150)
    hot_desc = models.CharField('热点描述', max_length=255)
    hot_score = models.CharField('热点值', max_length=32)
    hot_img = models.CharField('图片', max_length=255)
    hot_url = models.CharField('网址', max_length=255)

4.2 创建内置表

首次创建内置表时，在aspage路径下的命令行中输入下面代码，创建Django内置表结构

python manage.py migrate

接着在命令行中输入命令让 Django知道我们自定义模型有一些变更,并根据我们自定义app的模型生成创建数据表的脚本:

python manage.py makemigrations apphot

最后，通过命令创建apphot模型对应的数据库表

python manage.py migrate apphot

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxL3p6mi-1667461262648)(D:\myMarkDown\11月生产\Django项目开发\D007.png)]$

4.3 报错处理

上面的一步如果报错，可能是非首次创建内置表，需要删除数据库django_migrations内的对应信息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BbpImcgN-1667461262648)(D:\myMarkDown\11月生产\Django项目开发\D008.png)]$

5.前端框架配置

5.1 Bootstrap

在项目根目录下新建static文件夹用于存放前端模板静态资源,同时将相关前端资源导入文件夹.

在项目根目录下新建templates文件夹：存放前端网页

创建完成后的目录如下图:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PWEJb5Em-1667461262649)(D:\myMarkDown\11月生产\Django项目开发\D009.png)]$

然后，我们需要修改配置文件，以识别静态资源和模板网页地址.

打开setting.py 文件,找到TEMPLATES配置项修改为如下用于识别模板网页地址:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],      # 添加此项
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

接着，找到 STATIC_URL ,在下方添加 STATICFILES_DIRS 如下用于识别静态资源地址

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LP7EXbUk-1667461262649)(D:\myMarkDown\11月生产\Django项目开发\D010.png)]$

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # 添加此项
]

5.2 页面视图

在apphot 文件夹下的视图文件views.py 中定义展示热点信息的函数

这里的分页组件有问题待解决，但是不影响显示

from django.shortcuts import render, redirect
from apphot import models
from django.core.paginator import Paginator
from django.http import JsonResponse, HttpResponse
import random
import time
import json
# Create your views here.

# 01 热点信息列表
def data_hot(request, pindex):
    '''分页'''
    areas = models.Info_hot.objects.all()  # ar = models.Info_hot.objects.values('hot_word')
    # 创建Paginator对象，进行分页，每页显示10条
    paginator = Paginator(areas, 10)
    # 总条数：也就是data_hot元素的个数，31
    p_count = paginator.count
    # 总页数：book_list有7个元素，每页显示3个，那么会被分成3页
    a_count = paginator.num_pages

    if pindex == '':
        pindex = 1
    else:
        pindex = int(pindex)
    # 获取第一页的内容，page时Page类的实例对象
    page = paginator.page(pindex)

    # 当页数过多时，进行缩减处理
    if pindex-5 < 1:
        pageRange = range(1, 11)
    elif pindex+5 > paginator.num_pages:
        pageRange = range(pindex-5, paginator.num_pages+1)
    else:
        pageRange = range(pindex-5, pindex+5)
    return render(request, 'hot/hot_page.html', locals())

# 02 百度热点重超链接跳转：重定向
def baidu_hot(request):
    return redirect('https://top.baidu.com/board?tab=realtime')

5.3 路由配置

这里使用的是单一级路由，二级路由的配置暂无看懂

在配置文件同级目录下，找到urls.py文件，添加路由配置：

"""aspage URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from django.urls import path, re_path
from appssq.views import data_ssq
from apphot.views import data_hot,baidu_hot

urlpatterns = [
    path('admin/', admin.site.urls),
    # home视图
    url(r'^$', views.base),      
    url(r'^home/', views.base),            # 主页
    # 热点信息
    # url(r'^data_hot/', data_hot),  # 热点信息刷新测试
    re_path(r'^data_hot(?P<pindex>\d*)/', data_hot),
    url(r'^baidu_hot/', baidu_hot),  # 百度热点重定向
    
    # ajax信息
    url(r'^data_fresh/', views.data_fresh),  # ajax信息刷新测试
    # ssq信息
    url(r'^data_ssq/', data_ssq),  # ssq信息刷新测试
]

5.4 html文件

在templates文件夹中，可建立子文件夹home，以存放母版网页base.html，base.html代码如下

其中，{% load static %} 引用静态资源，

子网页的待添加内容使用{% block title %} {% endblock %}、{% block content %} {% endblock %} 留置

{% load static %}
<!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">
    <title>phil系统{% block title %}{% endblock %} </title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 导航条 -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example"
                    aria-expanded="false">
                    <span>导航栏</span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example">
                <ul class="nav navbar-nav" style="width:100%;">
                    <li class="nav-top" id="home">
                        <a href="/home/">首页</a>
                    </li>
                    <li class="nav-top" id="ssq">
                        <a href="/data_ssq/" >ssq信息</a>
                    </li>
                    <li class="nav-top" id="hot">
                        <a href="/data_hot/" >百度热点信息</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="line"></div>
    {% block content %}
    {% endblock %}
    <script>
        $(function () {
            $(".dropdown").mouseover(function () {
                $(this).addClass("open");
            });
            $(".dropdown").mouseleave(function () {
                $(this).removeClass("open");
            });
        });
    </script>
    <script type="text/JavaScript">
    $('#science').addClass("active");
    </script>
</body>
</html>

子网页hot_page.html代码如下，实现了分页、Ajax局部实时刷新功能等功能，还有局部css样式的调整

{% extends "home/base.html" %}
{% load static %}
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="utf-8">
    <title>{% block title %}|百度热点信息{% endblock %}</title>

</head>

<body >
{% block content %}
    <div class="col-md-12" style="display: table-cell;vertical-align:middle;text-align: center; "  >
        <div class="content-box-large" style="display: table-cell;vertical-align:middle;text-align: left; ">
            <div class="panel-heading">
                <div class="panel-title" >更多热点详情：
                <a href="/baidu_hot/" target="_blank">百度热点信息</a>
                </div>
            </div>
        </div>

        <div class="panel-body"  >
            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
                <thead>
                <tr>
                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 5%">热点排行</th>
                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 20%">热词</th>
                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 40%">热点描述</th>
                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 5%">热力值</th>
<!--                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 10%">图片</th>-->
<!--                    <th style=" display: table-cell;vertical-align:middle;text-align: center;width: 20%" >信息网址</th>-->
                </tr>
                </thead>
                <tbody id="hot_content">
                {% for area in page %}
                <tr>
                    <td style=" display: table-cell;vertical-align:middle;text-align: center;">
                        {{ area.id }}</td>  <!-- {{ forloop.counter }} -->
                    <td style=" display: table-cell;vertical-align:middle;">{{ area.hot_word }}</td>
                    <td style=" display: table-cell;vertical-align:middle;">{{ area.hot_desc }}</td>
                    <td style=" display: table-cell;vertical-align:middle;text-align: center;">
                        {{ area.hot_score }}</td>
<!--                    <td style="word-wrap: break-word; word-break: break-all;">{{ area.hot_img }}</td>-->
<!--                    <td style="word-wrap: break-word; word-break: break-all;">{{ area.hot_url }}</td>-->
                </tr>
                {% endfor %}

                </tbody>
            </table>
            <!-- 表格分页显示 -->
            <div class="pageturn">
                <ul class="pagelist">
                    {% if page.has_previous %}
                        <a href="/data_hot{{ page.previous_page_number }}">&lt;上一页</a>
                    {% endif %}

                    {% for pindex in pageRange %}
                        {% if pindex == page.number %}
                            {{ pindex }}
                        {% else %}
                            <a href="/data_hot{{ pindex }}">{{ pindex }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if page.has_next %}
                        <a href="data_hot{{ page.next_page_number }}">下一页&gt;</a>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
    <!-- Ajax数据定时刷新脚本 -->
    <script language="javascript" type="text/javascript">
    function ajaxHttpRequestFunc(){
		let xmlHttpRequest;  // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量
		if(window.ActiveXObject){ // IE浏览器的创建方式
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式
            xmlHttpRequest = new XMLHttpRequest();
        }
		xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件
            console.log('请求过程', xmlHttpRequest.readyState);
			if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据
				console.log('状态码为', xmlHttpRequest.status);
				if(xmlHttpRequest.status == 200) {
					console.log('异步调用返回的数据为：', xmlHttpRequest.response);
                    var data = xmlHttpRequest.responseText;
					document.getElementById("hot_content").innerHTML = data; // 局部刷新数据到页面
				} else { // 如果异步调用未成功,弹出警告框,并显示错误状态码
					alert("error:HTTP状态码为:"+xmlHttpRequest.status);
				}
			}
		}
		xmlHttpRequest.open("GET","",true); // 创建http请求，并指定请求得方法（get）、url（https://www.runoob.com/try/ajax/ajax_info.txt）以及验证信息
		xmlHttpRequest.send(null); // 发送请求
    }
    setInterval(ajaxHttpRequestFunc,120000);
    </script>
{% endblock %}
</body>
</html>