Django项目开发操作实例
Django项目开发实例
1.创建项目
在专业版Pycharm在项目开发路径下新建或者打开PythonProjects
通过Pycharm的Terminal命令行,在当前路径下,新建Django项目aspage
Django-admin startproject aspage
运行上面语句后,项目aspage的目录结构如下
2.配置数据库
2.1 新建数据库
首先,利用mysql作为后台数据存储,需要创建与项目同名的数据库
CREATE DATABASE IF NOT EXISTS aspage DEFAULT CHARSET utf8;
2.2 添加配置
然后,在项目aspage下的同名文件夹aspage中找到setting.py,修改setting.py中的DATABASES配置项
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 模块,连接数据库
import pymysql
pymysql.install_as_MySQLdb()
3.新建应用与配置
3.1 新建应用
首先,再次利用Pycharm的Terminal命令行,cd进入aspage路径下,创建应用apphot
python manage.py startapp apphot
应用apphot创建后,其目录结构如下
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
最后,可以启动django
python manage.py runsever
4.3 报错处理
上面的一步如果报错,可能是非首次创建内置表,需要删除数据库django_migrations内的对应信息
5.前端框架配置
5.1 Bootstrap
在项目根目录下新建static文件夹用于存放前端模板静态资源,同时将相关前端资源导入文件夹.
在项目根目录下新建templates文件夹:存放前端网页
创建完成后的目录如下图:
然后,我们需要修改配置文件,以识别静态资源和模板网页地址.
打开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 如下 用于识别静态资源地址
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 }}"><上一页</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 }}">下一页></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>
6.项目展示
7.遗留问题
分页问题、ajax的表单局部刷新问题、侧标题栏问题等未有效解决
轮播图、上传和下载文件还未涉及