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

简介: Web实战丨基于Django与HTML的新闻发布系统(二)

Web实战丨基于Django与HTML的新闻发布系统:https://developer.aliyun.com/article/1534698


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>

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

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


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


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


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


导航栏,包含一个无序列表(<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>标签显示了一个标题为"注册页面"的标题。


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


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


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


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


  1. 通过这个模板,可以在注册页面中显示一个表单,接收用户的注册信息,并通过提交按钮将信息发送给服务器进行处理。
  • 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的值。根据上下文来看,这个变量可能是在视图函数中传递给模板的。


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


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


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


  1. 如果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方法提交数据。


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


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


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


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


  1. 使用<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>标签显示"新闻列表"的标题。


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


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


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

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

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

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


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


具体内容如下:


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


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

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

7.创建数据库

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

python manage.py makemigrations
python manage.py migrate

8.启动项目

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

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


运行结果

  1. 主页


  1. 注册页面


  1. 注册成功页面


  1. 登录页面


  1. 新闻页面


  1. 新闻详情页面


7.管理员页面

写在后面

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

目录
相关文章
|
13天前
|
开发框架 数据库 开发者
Web开发新境界:用Python玩转Django和Flask!
【6月更文挑战第12天】Python的Web开发框架Django和Flask各有千秋。Django是全能型框架,适合快速开发大型应用,提供ORM、模板引擎、URL路由和后台管理等全面功能。Flask则轻量级且灵活,适用于小型到中型应用,以其简单易用、高度可扩展和灵活路由著称。两者结合使用,能应对各种Web开发需求。
|
13天前
|
JSON 安全 关系型数据库
Web实战丨基于django+hitcount的网页计数器
Web实战丨基于django+hitcount的网页计数器
23 5
|
13天前
|
开发框架 API 数据库
Web实战丨基于Django的简单网页计数器
Web实战丨基于Django的简单网页计数器
26 5
|
13天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
19 2
|
Web App开发 前端开发 搜索推荐
从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1386 0
|
10天前
|
前端开发 JavaScript Java
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
|
2天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
2天前
|
自然语言处理 前端开发 Java
Servlet与JSP:Java Web开发的基石技术详解
【6月更文挑战第23天】Java Web的Servlet与JSP是动态网页的核心。Servlet是服务器端的Java应用,处理HTTP请求并响应;JSP则是结合HTML与Java代码的页面,用于动态内容生成。Servlet通过生命周期方法如`init()`、`service()`和`destroy()`工作,而JSP在执行时编译成Servlet。两者在MVC架构中分工,Servlet处理逻辑,JSP展示数据。尽管有Spring MVC等框架,Servlet和JSP仍是理解Web开发基础的关键。
|
2天前
|
安全 编译器 PHP
探索PHP 8的新特性及其对现代Web开发的影响
【6月更文挑战第22天】随着PHP 8的发布,这一广泛使用的服务器端脚本语言迎来了重大升级。本文将深入探讨PHP 8引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式以及错误处理和异常改进等。这些新特性不仅提升了性能,还增强了类型系统和语言的表达能力,为现代Web开发带来了新的机遇和挑战。我们将分析这些变化如何影响编码实践,优化策略,并讨论开发者如何适应这些变革以构建更快、更安全、更易于维护的应用程序。
|
2天前
|
搜索推荐 Java 数据库连接
探索Java Web开发:Servlet与JSP的协同工作原理
【6月更文挑战第23天】Java Web开发中,Servlet和JSP协同打造动态网站。Servlet是服务器端的Java程序,处理HTTP请求并执行复杂逻辑;JSP则结合HTML和Java,生成动态内容。Servlet通过`doGet()`等方法响应请求,JSP在首次请求时编译成Servlet。两者常搭配使用,Servlet处理业务,JSP专注展示,通过`RequestDispatcher`转发实现数据渲染。这种组合是Java Web应用的基础,即使新技术涌现,其价值仍然重要,为开发者提供了强大的工具集。