【实战演练】Python+Django网站开发系列04-Django导航BASE页开发

时间 2019-11-07

标签实战演练 python+django python django 网站开发系列导航 base 栏目 Python 繁體版

原文原文链接

上一篇讨论了如何编写静态页面，静态页面经过html语言书写，这一篇介绍一下基本的html标签，以及开始利用css与js制做导航BASE页。javascript

一、html标签css

<h></h>标题html

<P></p>段落前端

<img src="">图片标签java

<a href+"">超连接标签编程

<tr></tr>表格标签bootstrap

<th></th>表格标题api

<td></td>表格行前端框架

<div></div>区域标签网络

<title></title>页面标签的标题

<body></body>页面具体正文内容

二、前端框架

之前，学习前端还要专门去学html、css、java script这3门语言，而这3门语言语法又不尽相同，所以基本上就是新人劝退。

而现代的编程，其实已经有不少框架将一些经常使用功能高度封装，其实只要引用一下框架，修修改改，就能出来效果。

而前端框架，就是用来快速实现css与js的一些功能的。例如bootstrap、easyui、layui等UI框架，最近流行的JS框架VUE、React、angular等。

其中腾讯也给出了magicbox这一款工具（里面集成了不少其余优秀的框架），而且示例写得比较好，基本上所见即所得，所以咱们使用magicbox来进行页面UI开发。

腾讯magicbox：https://magicbox.bk.tencent.com/，使用QQ号便可登陆。

组件库能够对单独的组件进行应用，可视化布局能够整个布局开始拖拉拽的方式来写。

三、BASE页开发

3.1BASE页引用

刚进入会要求进行布局选择，而后从左边将须要的组件拖拉到右边对应区域便可。咱们先设计登陆页面，用上下布局，而后将横向导航与单个网络布局拖到对应位置。

点击下载就能够看到代码了。

打开pycharm，在templates下面建立BASE01.html文件，清空里面的内容，而后将代码所有贴过去。

为了让其余页面引用BASE01页面的内容，须要在里面加block。在67行左右，最内层的<div>标签，打block标记。

<div class="col-md-12">
    {% block content %}
    {% endblock %}
</div>

修改index.html，清空内容，应用BASE01.html的block标记，而且在block之间填写本页独有的内容，例如HelloWorld

{% extends 'BASE01.html' %}

{% block content %}
    Hello World！！！
{% endblock %}

从新访问127.0.0.1:8000/index，发现页面已经不同了，成功引用了BASE01的内容。

3.2BASE修改

若是顶部导航的内容不想要，或者想要修改，直接到BASE01.html里面作少许修改就能够了。

<ul class="nav navbar-nav pull-left m0">
    <li class="active"><a href="javascript:void(0);">首页</a></li>
    <li><a href="javascript:void(0);">关于咱们</a></li>
    <li><a href="javascript:void(0);">联系咱们</a></li>
</ul>

修改成须要的内容，或者整个ul列表删除便可。

而后尝试修改左上角logo，原logo引用以下：

<img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" class="logo">

只须要上传文件到static/img目录内（img目录须要手动建），而后修改src引用了路径，引用图片便可。

<img src="/static/img/logo.png" class="logo">

3.3修改index内容

接下来能够修改index的内容了，咱们能够增长用户名与密码输入框。

国际惯例，直接从左边往右边拖动就能够了。直接双击还能编辑里面内容。

点击下载，而后将新增的代码，拷贝到index.html的block里面就好了。

刷新页面，发现已经成功修改。经过良好的前端UI框架，大大地减小了代码的工做量。