个人网站搭建(Day 3)— 初探前端

本文介绍了在Django项目中搭建前端页面的初步步骤,从HTML基础开始,推荐了学习资源,并分享了如何组织模板结构,包括创建static和templates文件夹。通过设置视图和URL配置,实现页面与功能的关联,如访问作者信息。鼓励读者通过实践和参考资料深入学习。
摘要由CSDN通过智能技术生成

完成后台的逻辑设计以及urls的设计,我们现在来尝试一下前端页面的设计,我们这一部分以html为主,之后再结合css,js的内容来改造我们的前端页面。

 

资料推荐

网络上的参考教程有许多,这里推荐数个

html教程(W3C)  css教程(W3C) JavaScript教程   bootstrap中文网站

前端的相关知识稍微过一遍就可以,主要是熟悉它的语法,具体的样例可以参考网上现有的模板(或者遇到比较好看的网页的时候按下F12 2333)

再推荐一个不错的模板网站:  模板之家 提供了大量的免费网站模板,很有参考价值。

 

模板结构部分

       

我们以home(主要app)作为示例,我们需要创建一个static文件夹,这部分用于存储静态文件,之后会再进行讲解;以及一个templates文件夹(注意不是template,作者就吃过这种亏(:3_ヽ)_),再在templates中创建home文件夹来存储home app中使用的模板。

我们可以注意到结构中有一个 base.html 文件,该文件将会被作为父模板而被多个子模版继承,base.html中主要的工作是加载导航栏,以及加载全局的静态文件。

子模板中继承父模板的方法是 在html文件头添加 {% extends "home/base.html" %} ,这里涉及到Django的模板语言,可以参考 Django模板语言-alizeJ

 

模板与视图关联

创建完所需要的模板后,我们就可以在views.py 中设置对应的视图来实现我们网站所需要的功能了

举一个最简单的例子,这个视图函数在我们请求获得作者信息 about 的时候会将 about.html 返回给我们

def about(request):
    return render(request, 'home/about.html')

其对应的在home.urls.py中是

    path('about/', views.about, name = 'about'),

而在主文件夹schnee/urls.py中,我们有以下语句:

    path('', include('home.urls', namespace = 'home')), 

这样我们就能够通过输入 127.0.0.1:8000/about 来获取作者信息。

当然了,在views.py 中我们还能够实现更多更加复杂的功能,以及编写功能更强的模板来显示我们所要显示的效果。这部分我们就不再这里详细讲述了,可以参考网上已有的资料以及本项目的代码慢慢理解 ^_^。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值