django零基础项目实战-单位同事合乘的网页开发(一)

学习django一个月左右，视频看了不少，手上的活儿没长进

今天开始以练带学，废话不多说

因为后续会研究单位同事的合乘出行，开发网页的主要目的或者说是需求：

1.介绍同事合乘的业务、团队发展等；

2.网页是沟通开发者和需求者的渠道，通过渠道来获取客户的数据，从而交互；

（我是初学者，写这个主要是记录一下学习过程，同时督促一下自己学习，不要喷我垃圾，谢谢。。。。。。）

==================================================================================================1.首先，创建工程tshc

django-admin startproject mysite

2.创建项目IS

python manage.py startapp

3.设置主页

3.1主页页面布局

因为前面写过了母版，所以直接使用django的继承功能继续渲染（母版参考博客单位同事合乘的网页开发-母版）

主页跟模板相比多了以下的功能

1.“首页“”两个字的背景要和周围的区分开

操作步骤：

（一）这里用javascript写在母板base.html里
.action-menu a.action{ color:#fff; background-color:#204982; }
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
{% block js %}
{% endblock js %}

（二）新建html---homepage-html

添加渲染

{% block js %}
<script>
$(function(){
$('#homepage_html').addClass('action');
})
</script>
{% endblock js %}

django零基础项目实战-单位同事合乘的网页开发(一)

2.添加文本

模板中间有一大块空白，这块我就做的简单一点加一点语言图片（图片是网上搜的，只是暂时放一下，如果侵权了，请联系我删掉）

{% block css %}
.home-pic{
    float:right;
    margin-top:10px;
    margin-right:0px;
    display:inline-block
}
.home_title{
    margin-top:100px;
    font-size : 30pt; /*文字大小*/
    color:#00BBFF;

display:inline-block;
}

.home_text{
    margin-top:250px;
    font-size : 40pt; /*文字大小*/
    color:#FF0000;
    font-style:italic;
    display:inline-block;
}
{% endblock %}

{% block content %}

<div class="home_title">欢迎来到单位同事合乘公司</div>
<div class="home_text">
    <div>不再坐陌生人的车！</div>
    <div>没有中间商赚差价！！</div>
    <div>合乘共赢告别拥堵！！！</div>

</div>
<div class="home-pic" >
<img src="/static/home_pic.jpg" height="600" >
</div>

最终的效果如下：

django零基础项目实战-单位同事合乘的网页开发(一)

3.2设置主页路由

前端页面写完了，然后给页面添加路由
urlpatterns = [
path('home/', views.homepage), ]

接着添加函数

def homepage(req):
return render(req,"homepage.html")

4.启动查看

python manage.py runserver 8080

就可以看到页面了

django零基础项目实战-单位同事合乘的网页开发(一)

相关推荐