Web实战丨基于Django与HTML的新闻发布系统

发布时间:2024年01月12日

写在前面

本期内容:基于Django与HTML的简单新闻发布系统。

项目需求:Python+Django

项目下载地址:https://download.csdn.net/download/m0_68111267/88728636

项目简介

本期博主将带着大家用Django完成一个简单的新闻发布系统,该新闻发布系统具有“登录界面”,“注册界面”,“新闻界面”以及“后台界面”。

项目框架

  • 用户注册界面:用户可以注册自己的信息,用于登录系统。
  • 用户登录界面:登录系统的界面,验证用户的登录信息是否合法。
  • 新闻信息界面:展示新闻的信息。
  • 后台管理界面:管理员可以发布新闻,修改和删除新闻信息。

实验内容

安装依赖库

  • Django(如未安装django库,可以运行以下命令进行安装)
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django

1.创建项目

  1. 使用以下命令新建一个名为newsProject的项目
django-admin startproject newsProject
  1. 进入newsProject项目,使用以下命令新建一个名为news的app
cd newsProject
django-admin startapp news

2.系统配置

  1. 双击打开newsProject文件夹中的settings.py文件

1

  1. INSTALLED_APPS中添加news

2

  1. 双击打开"newsProject"文件夹下的"urls.py"文件,配置项目的导航路径

3

from django.contrib import admin
from django.urls import path
from news import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home),
    path('regist/', views.regist),
    path('login/', views.login),
    path('logout/', views.logout),
    path('article/', views.article),
    path('<int:id>/', views.detail, name='detail'),
]

注意代码里的views可能会爆红,这是因为我们还没有配置"views"视图文件,下面就让我们一起来配置一下吧~

3.配置视图文件

双击打开"news"目录下的"views.py"文件,配置项目的视图函数

4

from django.shortcuts import render, redirect
from django.http import HttpResponse, Http404
from .models import Article
from django.contrib import auth
from django import forms 
from django.contrib.auth.models import User  


class UserForm(forms.Form):
    username = forms.CharField(label='用户名', max_length=100)
    password = forms.CharField(label='密 码', widget=forms.PasswordInput())

# 主界面
def home(request):
    return render(request, 'home.html')

# 用户注册界面
def regist(request):
    if request.method == 'POST':
        uf = UserForm(request.POST)  # 包含用户名和密码
        if uf.is_valid():
            # 获取表单数据
            username = uf.cleaned_data['username']  # cleaned_data类型是字典,里面是提交成功后的信息
            password = uf.cleaned_data['password']
            # 添加到数据库
            registAdd = None
            try:
                registAdd = User.objects.create_user(username=username, password=password)
                return render(request, 'regists.html', {'registAdd': registAdd})
            except:
                return render(request, 'regists.html', {'registAdd': registAdd, 'username': username})

    else:
        # 如果不是post提交数据,就不传参数创建对象,并将对象返回给前台,直接生成input标签,内容为空
        uf = UserForm()

    return render(request, 'regist.html', {'uf': uf})


def login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        match = auth.authenticate(username=username, password=password)  # 用户认证
        if match is not None:  # 如果数据库里有记录(即与数据库里的数据相匹配或者对应或者符合)
            auth.login(request, match)  # 登陆成功
            return redirect('/', {'user': match})  # 跳转--redirect指从一个旧的url转到一个新的url
        else:  # 数据库里不存在与之对应的数据
            return render(request, 'login.html', {'login_error': '用户名或密码错误'})  # 登录失败
    return render(request, 'login.html')


def logout(request):
    auth.logout(request)
    return render(request, 'home.html')


def article(request):
    article_list = Article.objects.all()
    # QuerySet是一个可遍历结构,包含一个或多个元素,每个元素都是一个Model实例
    # QuerySet类似于Python中的list,list的一些方法QuerySet也有,比如切片,遍历。
    # 每个Model都有一个默认的manager实例,名为objects,QuerySet有两种来源:通过manager的方法得到、通过QuerySet的方法得到。mananger的方法和QuerySet的方法大部分同名,同意思,如filter(),update()等,但也有些不同,如manager有create()、get_or_create(),而QuerySet有delete()等
    return render(request, 'article.html', {'article_list': article_list})


def detail(request, id):
    try:
        article = Article.objects.get(id=id)
        # print type(article)
    except Article.DoesNotExist:
        raise Http404
    return render(request, 'detail.html', locals())

该段代码是一个基于Django框架的用户注册和登录功能实现。主要包含以下几个函数:

  1. home(request): 主界面,渲染home.html模板。

  2. regist(request): 用户注册界面。如果请求为POST方法,从表单中获取用户名和密码,将其添加到数据库中创建新用户。如果注册成功,渲染regists.html模板并传递注册成功的信息。如果注册失败,渲染regists.html模板并传递错误信息。如果请求为GET方法,直接渲染regist.html模板。

  3. login(request): 用户登录界面。如果请求为POST方法,从表单中获取用户名和密码,使用auth.authenticate()函数进行用户认证。如果认证成功,调用auth.login()函数进行登录并重定向到主页。如果认证失败,渲染login.html模板并传递错误信息。

  4. logout(request): 用户注销功能。调用auth.logout()函数进行注销,并渲染home.html模板。

  5. article(request): 文章列表页面。从数据库中获取所有文章对象,并渲染article.html模板并传递文章列表。

  6. detail(request, id): 文章详情页面。根据文章的id从数据库中获取对应的文章对象,并渲染detail.html模板并传递文章对象。

注意:此时的"Article"会爆红,因为我们还没有配置"models.py"模型文件哦

5

4.配置模型文件

接下来我们就来配置"news"的"models.py"模型文件吧

6

from django.db import models

class Article(models.Model):
    title = models.CharField('标题', max_length=256)
    content = models.TextField('内容')
    pub_date = models.DateTimeField('发表时间', auto_now_add=True, editable=True)
    update_time = models.DateTimeField('更新时间', auto_now=True, null=True)

    def __str__(self):
        return self.title

该代码段定义了一个名为Article的模型类,用于表示文章对象。

该模型类继承自Django提供的models.Model基类,以便使用Django的数据库功能。

模型类包含以下几个字段:

  1. title: 标题字段,使用CharField类型,最大长度为256字符。

  2. content: 内容字段,使用TextField类型,可以存储较长的文本内容。

  3. pub_date: 发表时间字段,使用DateTimeField类型,自动记录发表时间,并设置为只读(不可编辑)。

  4. update_time: 更新时间字段,使用DateTimeField类型,自动记录最后更新时间,并在更新时进行更新,允许为空。

模型类还定义了一个__str__()方法,用于在对象被打印或字符串表示时返回标题字段的值。

该模型类的目的是在数据库中创建一个名为Article的表,用于存储文章的相关信息,如标题、内容、发表时间和更新时间等。

通过使用该模型类,可以方便地对文章对象进行创建、查询、更新和删除操作。

5.配置管理员文件

最后我们需要配置一下"news"里的"admin.py"文件

from django.contrib import admin
from news.models import Article
class ArticleAdmin(admin.ModelAdmin):
    list_display = ('title','pub_date', 'update_time',)
admin.site.register(Article, ArticleAdmin)

这段代码是在Django的admin.py文件中注册一个模型(Model)并配置相应的管理选项。

首先,我们导入了admin模块,并导入了Article模型(假设该模型定义在news.models文件中)。

然后,我们定义了一个名为ArticleAdmin的类,继承自admin.ModelAdmin。该类用于配置Article模型在Django admin后台的显示和操作选项。

在这个类中,我们设置了list_display属性,它是一个包含模型字段名称的元组。这个属性指定了在Django admin后台中列表视图显示的字段。在这个例子中,我们指定了’title’(标题)、‘pub_date’(发布日期)和’update_time’(更新时间)。

最后,我们调用admin.site.register()方法,将Article模型和ArticleAdmin类进行注册。这告诉Django admin后台要管理Article模型,并使用ArticleAdmin类中指定的配置选项。

通过这段代码,您就可以在Django admin后台中管理Article模型,并可以根据设置的list_display属性在列表视图中显示指定的字段。

6.配置模板文件

本项目共需要创建六个模板文件,首先我们需要在"news"目录下新建一个"templates"子目录,然后在"templates"目录中创建六个文件(页面):

  • home:主页
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>新闻系统</title>
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/pure-min.css">
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/grids-responsive-min.css">
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/blog.css">

</head>
<body>
<div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="header">
            <h1 class="brand-title"><a href="#"> Want595最新要闻</a>

……具体代码需要下载后查看哦~

该HTML模板文件用于渲染新闻系统的页面布局。

页面布局分为两个部分:侧边栏(sidebar)和内容区域(content)。

侧边栏部分包含以下内容:

  1. 网站标题和标语,用<h1><h2>标签进行展示。

  2. 导航栏,包含一个无序列表(<ul>),其中的列表项(<li>)包含以下内容:

    • 如果用户已经登录,显示用户的用户名和一个退出按钮。
    • 如果用户未登录,显示一个注册按钮和一个登录按钮。

内容区域部分使用一个<div>元素包裹,用于渲染具体的页面内容。在模板中使用了一个{% block content %}标签,表示该区域是一个可被子模板继承并填充内容的区域。

该模板文件使用了PureCSS框架提供的样式表,以实现页面的样式和布局。

通过使用该模板文件,可以方便地创建新闻系统的页面布局,并根据具体需求填充和扩展页面内容。

  • regist:用户注册页面
{% extends 'home.html' %}
 
{% block content %}
    <h1>注册页面</h1>
    <form method="POST" enctype="multipart/form-data">
{% csrf_token %}
        {{uf.as_p}}
        <input type="submit" value="OK" />
    </form>
{% endblock %}

这个模板继承自一个名为home.html的父模板,通过{% extends 'home.html' %}指令进行继承。

在模板中使用了一个{% block content %}标签来填充内容,表示该区域是可以被父模板中同名块所替换的区域。

具体内容如下:

  1. 使用<h1>标签显示了一个标题为"注册页面"的标题。

  2. 使用<form>标签创建了一个表单,其中method属性指定了使用POST方法提交表单数据,enctype属性指定了表单数据的编码方式为multipart/form-data

  3. 使用{% csrf_token %}标签生成一个CSRF令牌,用于防止跨站请求伪造。

  4. 使用{{ uf.as_p }}渲染了一个表单对象uf,其中的as_p方法会将表单字段渲染为<p>标签的形式,方便显示字段和输入框。

  5. 使用<input>标签创建了一个类型为"submit"的按钮,显示文本为"OK",用于提交表单。

通过这个模板,可以在注册页面中显示一个表单,接收用户的注册信息,并通过提交按钮将信息发送给服务器进行处理。

  • regists:注册成功或失败页面
{% extends 'home.html' %}
 
{% block content %}
 
{{registAdd}}
 
<br>
================
<br>
{% if username %}
注册失败,{{ username }}已存在!
<a href="/regist">注册</a>
{% else %}
注册成功!
<a href="/login">登录</a>
{% endif %}
 
{% endblock %}

这个模板继承自一个名为home.html的父模板,通过{% extends 'home.html' %}指令进行继承。

在模板中使用了一个{% block content %}标签来填充内容,表示该区域是可以被父模板中同名块所替换的区域。

具体内容如下:

  1. 使用{{registAdd}}语句输出了一个变量registAdd的值。根据上下文来看,这个变量可能是在视图函数中传递给模板的。

  2. 使用<br>标签插入一个换行。

  3. 使用{% if username %}条件语句,判断变量username是否存在。

  4. 如果username存在,输出"注册失败"和username已存在的提示信息,同时提供一个"注册"的链接用于重新注册。

  5. 如果username不存在,输出"注册成功!"的提示信息,同时提供一个"登录"的链接用于跳转到登录页面。

通过这个模板,可以根据不同的情况在注册结果页面显示不同的提示信息,给用户提供相应的操作选项。

  • login:用户登录页面
{% extends 'home.html' %}
 
{% block content %}
 
<div>
        <form action="/login/" method="POST">{% csrf_token %}
            <h2>请登录</h2>
            <input type="text" name="username" />
            <input type="password" name="password" />
            <button type="submit">登录</button>
            <p style="color: red">{{ login_error }}</p>
        </form>
</div>
 
{% endblock %}

这个模板继承自一个名为home.html的父模板,通过{% extends 'home.html' %}指令进行继承。

在模板中使用了一个{% block content %}标签来填充内容,表示该区域是可以被父模板中同名块所替换的区域。

具体内容如下:

  1. 使用<div>元素包裹了一个表单,该表单的提交目标为"/login/",使用POST方法提交数据。

  2. 使用{% csrf_token %}模板标签添加一个跨站请求伪造保护的令牌。

  3. 使用<h2>标签显示"请登录"的标题。

  4. 使用两个<input>标签分别用于输入用户名和密码,分别对应name="username"name="password"

  5. 使用<button>标签显示一个"登录"按钮。

  6. 使用<p>标签显示一个红色文本,该文本内容由login_error变量提供,用于显示登录出现的错误信息。

通过这个模板,用户可以在登录页面输入用户名和密码,并点击登录按钮进行登录操作。如果登录失败,会显示相应的错误信息。

  • article:新闻页面
{% extends 'home.html' %}
 
{% block content %}
 
<h2>新闻列表</h2>
{% for article in article_list %}
    <h3><a href="{% url 'detail' id=article.id %}">{{ article.title }}</a></h3>
{% endfor %}
 
{% endblock %}

这个模板继承自一个名为home.html的父模板,通过{% extends 'home.html' %}指令进行继承。

在模板中使用了一个{% block content %}标签来填充内容,表示该区域是可以被父模板中同名块所替换的区域。

具体内容如下:

  1. 使用<h2>标签显示"新闻列表"的标题。

  2. 使用{% for article in article_list %}模板标签开始一个循环,遍历article_list列表中的每个元素。

  3. 在循环内部,使用<h3>标签显示每篇文章的标题,并且使用{% url 'detail' id=article.id %}生成文章详情页面的链接。

  4. 使用{% endfor %}结束循环。

通过这个模板,可以在页面上显示新闻列表,并且每个新闻标题都有对应的链接可以跳转到相应的新闻详情页面。

  • detail:新闻详情页面
{% extends 'home.html' %}
 
{% block content %}
 
<h2>{{ article.title }}</h2>
 
{{ article.content }}
 
{% endblock %}

这个模板继承自一个名为home.html的父模板,通过{% extends 'home.html' %}指令进行继承。

在模板中使用了一个{% block content %}标签来填充内容,表示该区域是可以被父模板中同名块所替换的区域。

具体内容如下:

  1. 使用<h2>标签显示article对象的标题,通过{{ article.title }}获取到文章标题的值。

  2. 使用{{ article.content }}显示article对象的内容,通过{{ article.content }}获取到文章内容的值。

通过这个模板,可以在页面上显示文章的标题和内容。

7.创建数据库

在终端输入以下命令创建(迁移)数据库

python manage.py makemigrations
python manage.py migrate

8.启动项目

  1. 我们首先需要创建一个超级用户(管理员),用于登录后台
python manage.py createsuperuser
  1. 我创建了一个超级用户admin,并设置密码为123456

7

  1. 在终端输入以下命令启动项目
python manage.py runserver
  1. 如果出现以下网址,说明项目启动成功啦!

8

运行结果

  1. 主页

9

  1. 注册页面

10

  1. 注册成功页面

11

  1. 登录页面

12

  1. 新闻页面

13

  1. 新闻详情页面

14

  1. 管理员页面

15

写在后面

我是一只有趣的兔子,感谢你的喜欢!

文章来源:https://blog.csdn.net/m0_68111267/article/details/135519824
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。