css文件修改后没变化 static_Django快速入门（2) -- 学会超链接及静态资源文件路由...

最新推荐文章于 2023-04-24 17:09:33 发布

途大帅

最新推荐文章于 2023-04-24 17:09:33 发布

阅读量155

点赞数

文章标签： css文件修改后没变化 static

本文链接：https://blog.csdn.net/weixin_42515990/article/details/112437224

版权

在前一篇文章里我们介绍了安装django、创建web站点及业务模块、路由、视图模板等基础知识，能够搭建一个业务页面显示了。但如何实现业务模块之间的跳转、使用常见的css和js来修饰html页面，这是本篇快速入门将介绍的内容。

书接上回，目前整个站点的文档目录如下图：

目前我们完成了book子模块的模型、视图和模板的耦合，可以访问book模块的sell页面。为了整个站点的完成构造，下面我们分步骤来实践本节的内容，希望你还能跟着做。

下面的步骤包括：创建myblog的首页，在首页页面可以跳转访问子业务模块页面，从子页面模块能够返回首页以及互相链接。本节最终实现的效果如下：

当点击文章Book链接时，就进入文章Book模块的页面，该页面设计效果如下：

为了达到上述页面互相跳转效果，下面我们分几步来讲解。

第一步，站点首页路由设计

在核心子模块myblog里（注意不是根目录myblog）添加一个views.py文件，在里面添加如下内容：

from django.shortcuts import render
from django.http import HttpResponse

def index(request):            #定义整个站点视图的index函数
    return render(request,'index.html')    #z渲染整个站点的index首页

根据上篇文章介绍的视图函数的处理方式，这里使用render渲染，并指定整个站点的首页html文件为templates目录下的index.html。虽然上篇文章我们对该index.html文件进行了一些内容设定，并将其作为book模块首页使用过。但这里我们将其进行修改，重新定位为整个站点的首页。而book模块的首页可以在templates目录下新建文件夹，然后将其首页放在该子文件夹下。

接下来设定其访问路由，回到核心子模块myblog里的urls全局路由设定文件，添加如下内容：

from django.contrib import admin
from django.urls import path,include
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('book',include('book.urls')),
    path('',views.index,name='index')   #新添加的首页访问路由，设定到首页的views里的index函数
]

路由中的views.index就是第一步添加的views文件中的index方法。

第二步，首页模板视图设计

下面为更改后的index.html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myblog站点</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
<div class="header">
 <li>大数据Data</li>
    <li>旅行Travel</li>
   <li><a href="/book">文章Book</a></li>
</div>
<section>
    <img src="static/img/demo.jpg" alt="">
</section>
<div class="footer">
    <li>made by Cao Jianhua</li>
    <li>Copyright@2020-2025</li>
</div>
</body>
</html>

还是常规的html设计方式，在head头部加入了资源文件css，在导航菜单使用了a超链接，在中部使用了读取静态图片资源。效果如上展示。

这里附上index.css内容供参考：

/*css for index of myblog*/
.header{
    height: 60px;
    width: 800px;
    background: #333;
    color: aliceblue;
    padding: 10px 20px 0px 20px;
}

li{
    display: inline-block;
    list-style: none;
    margin: 5px 20px;
}
a{
    text-decoration: none;
    color: #ff9900;
}
.footer{
    background: darkgreen;
    color: #f90;
    font-size: 12px;
}

第三步，网页资源文件访问设定

对于资源文件的访问主要就是其路径设置，资源文件通常放在static目录下。因此为了完成上述首页设计的显示，我们先在站点目录下新建一个static文件夹，里面创建css和img子目录，然后将首页的index.css文件放在css目录下，将首页的demo.jpg文件放在img子目录里。

为了网页渲染时能正确访问到资源文件位置，还需要回到核心子模块的setting全局设定里，加入如下内容：

STATIC_URL = '/static/'   #原就存在的设置
STATICFILES_DIRS= [os.path.join(BASE_DIR,'static')]  #添加资源文件路径位置

这样资源文件如css，img或者js库文件就可以正常访问了。

第四步，超链接跳转设置

超链接是实现页面跳转的最简单方式，但其href路径属性必须要给对才可以正常访问。

首页设计中跳转访问文章Book，就使用了超链接跳转，其href设置为：

a href="/book"   #a超链接href设置

这样设置主要考虑了全局路由的设定，所以此时可以回到核心子模块的urls设定里查看，/表示站点的根目录，如果将href属性设置为根目录/的话，就是跳转返回首页，这里跳转到book页面，就使用/book，因为book属于根目录下的子模块。这在全局路由设定里已经设置好了。

通过上面几步设置，页面跳转以及资源文件的访问都可以实现了。下面为book子模块的首页内容，供参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>book page</title>
    <link rel="stylesheet" href="static/css/index.css">
</head>
<body>
<div class="header">
 <li>大数据Data</li>
    <li>旅行Travel</li>
    <li><a href="book">文章Book</a></li>
</div>
<section>
   <p>这是文章页面</p>
    <p><a href="/"> 回首页</a></p>
</section>
<div class="footer">
    <li>made by Cao Jianhua</li>
    <li>Copyright@2020-2025</li>
</div>
</body>
</html>

经过上述操作后，目前的站点目录发生了一些改变，整体视图如下：

通过这篇的讲解和操作，我们已经实现了站点首页的创建，以及到各个子页面的跳转访问，基本完成前端显示的任务。

途大帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文件修改后没变化 static_Django快速入门（2) -- 学会超链接及静态资源文件路由...

在前一篇文章里我们介绍了安装django、创建web站点及业务模块、路由、视图模板等基础知识，能够搭建一个业务页面显示了。但如何实现业务模块之间的跳转、使用常见的css和js来修饰html页面，这是本篇快速入门将介绍的内容。书接上回，目前整个站点的文档目录如下图：目前我们完成了book子模块的模型、视图和模板的耦合，可以访问book模块的sell页面。为了整个站点的完成构造，下面我们分步骤来实践本...
复制链接

扫一扫