Django之前端框架引用

现在前端框架还是相当多的,研究了一下午,终于会把前端的框架引入到django了。妈妈再也不用担心我的前端了。

前端我只 HTML 最熟悉,css 和 js 完全是小白,我对前端一直相当头疼,今天下午研究了一把,终于解决了不会前端的问题。前端框架对于小白用户可以使用bootstrap 、layui 。

研究一下午,这两个都是最简单的 ,将包下载下来,让后在官网上选择样式,将 HTML 代码贴到自己的项目里,改一下 css 和 js 的路径即可完成,前端语言虽然毛都不懂,但做出来的看起来还是很装逼的。

layui官网

bootstrap官网

bootstrap官网好像没有自带可视化布局的功能,layui官网有。不过 bootstrap 菜鸟教程上提供了一个可视化布局的功能 https://www.runoob.com/try/bootstrap/layoutit/

下面是使用 layui 制作一套前端然后给丫怼到 django 项目中。

一、打开 layui 官网,首页就是立即下载,点击下载到压缩包后,解压放到 jdango 项目中。

二、将解压到的 layui 这个目录放到 django 中。我单独创建了一个 fronts 放所有的前端,在 settings.py 中配置完路径即可。

在 settings.py 中,将 DIRS 项配置 [os.path.join(BASE_DIR, 'fronts')]

新增一个配置项

STATICFILES_DIRS = (
     os.path.join(BASE_DIR, 'fronts'),
)

如图所示 

将 STATICFILES_DIRS 的值设置到 fronts 这一级目录,考虑到之后有多个应用在调用 html 时会有相同文件的情况,直接设置到这一层目录的话,就不用担心之后不同项目之间有同名的问题了。

三、在应用的 views.py 中添加一个主页调试。

在workduty/views.py中添加一个视图。

在 fronts 中创建一个和应用相同名称的前端目录,再里面创建一个 static 目录,每一层添加 __init__.py 文件,如图添加了一个 workduty/static 的前端目录,然后在 workduty/static 里面创建一个 index.html 文件。

在应用 workduty/views.py 文件中创建一个视图函数。

注意 html文件路径和settings.py 中配置的前端路径的相对路径

四、创建一个首页

打开 layui 官网,点击 示例

然后选择 后台布局 , 获取该布局代码

将下图框中的代码全部粘贴到刚刚创建好的 index.html 文件中

这里要注意,需要将 html 代码中的 css 和 js 文件路径改成自己刚刚下载解压的 layui 路径,一共有两个地方需要修改。

还要注意的是路径前必须要加 static ,如图所示, 我用 layui/css/layui.css 的路径测试了一下拿不到,日志显示 404 ,在前面加了一层 static 以后就正常了。django源码俺也没读过,测试了一下,是因为 settings.py 中的 STATIC_URL = '/static/' 配置,这里配置的是什么,引用 js 、 css 文件时,路径前就追加什么,由此可以推断 STATIC_URL 配置的意思可能就是寻找静态文件时默认的第一级路径。。

然后在 urls.py 中添加路由

启动django,浏览器打开查看是否成功

惊不惊喜,意不意外。。。现在已经拥有了一个像样的主页框子了。

下面就可以进入飞度爆改模式了,只需要懂一点点前端即可,我只会一点点 HTML。

改成一个值班排班系统吧,排好班后,每天定时在钉钉群通知。

由于做的项目太过简单,首页只留一个水平标题。

就以上图这个做为基本的页面,导航上的每一个跳转都要使用这个页面,那么我就寻思的能不能做个页面继承,捣鼓了一下发现原来这么简单。

五、将首页和其他导航页的展示全部继承基础布局页面。

在 fronts/workduty/static/ 下创建 base.html 文件,将刚刚修改好的干净的基础布局的 index.html 文件内容全部粘贴到一个新文件 base.html 中,并在 base.html 中的内容的位置加入一个占位  {% block concent %}{% endblock %}

如下图所示,我把 index.html 文件往外移了一层(不移动也没关系,移动了的话记得要修改 views.py 中视图函数的引用路径)

在 base.html 文件的主页内容位置加入占位

然后把 index.html 文件内容全部删除,只写一行  {% extends "workduty/static/base.html" %}

浏览器刷新看一下是否显示正常。没问题的话,显示还是刚刚的样子。

下面我们在 index.html 文件中添加点内容看看。

下一步研究如何将其他元素也继承过来。

 

 

 

 

 

 

 

  • 2
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值