利用pycharm+Ubuntu制作django项目(4)

模板抽取

一、使用pycharm内部的database来添加数据库

在这里插入图片描述

然后General就可以输入你的数据库名,用户名和密码。

当然第一次下载是需要下载文件的,慢慢的等一等他。

当他下载完成后,你可以测试连接,如果对的,那么恭喜你可以开始下一步啦。

接下来,你需要去百度搜索winscp下载下来用于我们接下来的各个环节。

下载好后,到公众号(dreamspy)回复HappyDjango就可以获取相应的模板,然后利用winscp将这个模板拖拽到我们的虚拟机项目的根目录下

然后回到pycahrm将虚拟机的内容同步到本地

注意:拖取的时候,拖取顺序必须是css,js和images。

然后把剩余的东西从下往上一次放到templates里面

剩下来的空文件就可以删除了

二、

在templates里面新建一个base文件夹

然后在base里面创建base.html作为我们的

基板。

在news里面,可以新建一个视图查看一下

def index(request):
	return render(request,'news/index.html')

然后配置好后,去news这个app下的url去添加路径

from django.urls import path
from news import views

urlpatterns = [
    path('index/', views.index),
]

然后去搜索:127.0.0.1:8000/news/index就可以了

下面再来看看新的-还是用news

def res(requests,a_id):
	res = 'welcome to China %s.'
	return HttpResponse(res % a_id)
new/urls

path('<int:a_id>/',views.res)

http://127.0.0.1:8000/news/5/搜索这个后面的数字可以改

大招来了:挖坑

先把index里的东西全部复制到base

把需要继承的地方都可以挖一个坑

1.标题

<title>{% block title %}{% endblock %}</title>

2.css链接

{% block link %}{% endblock %}

3.main为中间的body部分,来一个坑

{% block main %}
<main id="main">
{% endblock %}

但是整个中间部分分为左边和右边,所以,在里面也需要挖一下

3-1:左边部分

{% block main-contain %}
<div class="main-contain">
{% endblock %}

3-2:右边

{% block side %}
<aside class="side">
{% endblock%}

挖完空之后,就可以去我们想要的页面开始填坑了

index.html

{% extends 'base/base.html' %}
{% block title %}
    我的项目首页面
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="../../static/css/news/index.css">
{% endblock%}

{% block main-contain %}
        <div class="main-contain">
      <!-- banner start -->
        <div class="banner">
            <ul class="pic">
                <!--淡入淡出banner-->


                <li><a href="javascript:void(0);"><img src="../../static/images/ui.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/youxi.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/dianshang.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/zimeiti.png" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/python_gui.jpg" alt="test"></a></li>


                <li><a href="javascript:void(0);"><img src="../../static/images/linux.jpg" alt="test"></a></li>


            </ul>
            <a href="javascript:void(0);" class="btn prev">
                <i class="PyWhich py-arrow-left"></i></a>
            <a href="javascript:void(0);" class="btn next">
                <i class="PyWhich py-arrow-right"></i></a>
            <ul class="tab">
                <!-- 按钮数量必须和图片一致 -->


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


                <li></li>


            </ul>
        </div>
      <!-- banner end -->

      <!-- content start -->
      <div class="content">
        <!-- recommend-news start -->
          <ul class="recommend-news">
              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="../../static/images/python_gui.jpg" alt="title">
                      </div>
                      <p class="info">Python GUI 教程 25行代码写一个小闹钟</p>
                  </a>
              </li>

              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="../../static/images/python_advanced.jpg" alt="title">
                      </div>
                      <p class="info">python高性能编程方法一</p>
                  </a>
              </li>

              <li>
                  <a href="https://www.shiguangkey.com/course/2432" target="_blank">
                      <div class="recommend-thumbnail">
                          <img src="../../static/images/jichujiaochen.jpeg" alt="title">
                      </div>
                      <p class="info">python基础 split 和 join函数比较</p>
                  </a>
              </li>
          </ul>
        <!-- recommend-news end -->

        <!--  news-nav start-->
          <nav class="news-nav">
              <ul class="clearfix">
                  <li class="active"><a href="javascript:void(0)">最新资讯</a></li>

                  <li><a href="javascript:void(0)" data-id="1">python框架</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="2">Python基础</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="3">Python高级</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="4">Python函数</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
                  </li>

                  <li><a href="javascript:void(0)" data-id="6">Linux教程</a>
                  </li>

              </ul>
          </nav>
        <!--  news-nav end -->

        <!-- news-contain start -->
          <div class="news-contain">
              <ul class="news-list">

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"
                               title="linux查找文件或目录命令">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="#">linux查找文件或目录命令</a>
                          </h4>
                          <p class="news-details">linux查找文件或目录命令,前提:知道文件或者目录的具体名字,例如:sphinx.conffind 查找find / -name
                              dirname 查找目录find -name...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt="linux下svn命令的使用"
                               title="linux下svn命令的使用">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
                          </h4>
                          <p class="news-details">1、将文件checkout到本地目录svn checkout path(path是服务器上的目录) 例如:svn checkout
                              svn://192.168.1.1/pro/domain 简写:svn co2、往版本库中添加新的文件 svn addfile 例如:svn add te...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt="实现linux和windows文件传输"
                               title="实现linux和windows文件传输">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a>
                          </h4>
                          <p class="news-details">
                              其实这个题目有点大,这里介绍的只是linux和windows文件传输中的一种,但是这种方法却非常实用,那就是:ZModem协议具体是linux命令是:rz...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt=".htaccess配置详解"
                               title=".htaccess配置详解">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a>
                          </h4>
                          <p class="news-details">  .htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了
                              无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢  - .htaccess 文件(或者&quot;分布式...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

                  <li class="news-item">
                      <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt="使用nohup命令让linux程序后台运行"
                               title="使用nohup命令让linux程序后台运行">
                      </a>
                      <div class="news-content">
                          <h4 class="news-title"><a
                                  href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a>
                          </h4>
                          <p class="news-details">使用nohup让程序永远后台运行Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 &amp;
                              在程序结尾来让程序自动运行。比如我们要运行mysql在后台:/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</p>
                          <div class="news-other">
                              <span class="news-type">Linux教程</span>
                              <span class="news-time">11/11 18:24</span>
                              <span class="news-author">python</span>
                          </div>
                      </div>
                  </li>

              </ul>
          </div>
        <!-- news-contain end -->

        <!-- btn-more start -->
        <a href="javascript:void(0);" class="btn-more">加载更多</a>
        <!-- btn-more end -->
      </div>
      <!-- content end -->
    </div>
{% endblock %}




                </div>
                      </div>
                  </li>

              </ul>
          </div>
        <!-- news-contain end -->

        <!-- btn-more start -->
        <a href="javascript:void(0);" class="btn-more">加载更多</a>
        <!-- btn-more end -->
      </div>
      <!-- content end -->
    </div>
{% endblock %}

这样真个模板就基本ok了。
再去网页查看一下:127.0.0.1:8000/news/index/

感谢各位看官再一次到达了最后的地方,如果觉得哪里写的不好,可以再评论区留言,当然如果可以的话,可以关注公众号(dreamspy),可以获取好多python方面的书籍与知识点。欢迎各位看官添加。------胖子叩首
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值