Django之前端框架引用_如何将新的前端页面引入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 文件中添加点内容看看。

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