Django学习笔记之模板文件应用(二)

        在Django学习笔记之环境搭建(一)中详细了介绍了Django的环境搭建，以及它的简单应用，在环境搭建的

文章体系中介绍到Django它是基于MTV模式，那么M这里值的就是模板文件，作为一个web的应用程序框架，从

后台获取到数据后，总得需要展示在信息前台，当然这个过程就是通过前端的渲染展示出来的。 在django中，或

者说创建django项目后，自动会生成一个template的文件夹，项目中的所有关于HTML的文件都可以放在template

文件夹中，但是项目中某些时候也会使用到静态文件，那么需要创建static的文件夹，并且需要在settings.py文件

中指定static的目录，见源码：

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static')
]

 

模板文件在settings.py中的源码：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

见最新的项目的目录：

     在这里，我们使用requests的库去请求拉钩网招聘平台的自动化测试工程师的搜索，并且把数据获取到，展示到前台的

页面，实现这么一个简单的需求。关于requests库这里不做详细的介绍，在本人的接口自动化测试文章中有很多的文章来

介绍这部分的应用。这里实现获取拉钩网平台的测试数据，以及获取到具体的信息，见views.py的源码：

from django.shortcuts import render,redirect
from django.http import  HttpResponse

# Create your views here.

import  requests

def index(request):
    return HttpResponse('Hello World')

def getHeaders():
    headers={
        'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
        'Referer':'https://www.lagou.com/jobs/list_%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%B7%A5%E7%A8%8B%E5%B8%88?labelWords=&fromSearch=true&suginput=',
        'User-Agent':'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36',
        'Cookie':'_ga=GA1.2.186012464.1544195085; user_trace_token=20181207230439-6b58f932-fa31-11e8-8ce7-5254005c3644; LGUID=20181207230439-6b58fd66-fa31-11e8-8ce7-5254005c3644; index_location_city=%E5%85%A8%E5%9B%BD; JSESSIONID=ABAAABAAAIAACBIB3119D8410335A3D6B51563DBA30C74E; _gid=GA1.2.1553638128.1545207856; _gat=1; Hm_lvt_4233e74dff0ae5bd0a3d81c6ccf756e6=1544195085,1544357580,1545207857; LGSID=20181219162407-744a9567-0367-11e9-a1e5-525400f775ce; PRE_UTM=; PRE_HOST=; PRE_SITE=; PRE_LAND=https%3A%2F%2Fwww.lagou.com%2F; TG-TRACK-CODE=index_search; SEARCH_ID=9f686bd5f828456d8b01aeb429836207; LGRID=20181219162418-7a5f1d1f-0367-11e9-a1e6-525400f775ce; Hm_lpvt_4233e74dff0ae5bd0a3d81c6ccf756e6=1545207867'}
    return headers


def laGou(request):
    positions = []
    r=requests.post(
        url='https://www.lagou.com/jobs/positionAjax.json?needAddtionalResult=false',
        data={'first':False,'pn':2,'kd':'自动化测试'},headers=getHeaders())
    for  i in range(15):
        company=r.json()['content']['positionResult']['result'][i]['companyFullName']
        positionName=r.json()['content']['positionResult']['result'][i]['positionName']
        workYear = r.json()['content']['positionResult']['result'][i]['workYear']
        salary=r.json()['content']['positionResult']['result'][i]['salary']
        education=r.json()['content']['positionResult']['result'][i]['education']
        city=r.json()['content']['positionResult']['result'][i]['city']

        positions.append({
            'city':city,
            'company': company,
            'positionName':positionName,
            'salary': salary,
            'education':education,
            'workYear':workYear
        })
    return render(request,'login/lagou.html',locals())

 

 然后数据给前台的文件lagou.html，并且渲染展示出来，见lagou.html的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拉钩网平台招聘信息</title>
</head>
<body>
<div>
    <table>
        <thead>
            <tr>
                <td>城市</td>
                <td>公司</td>
                <td>职位名称</td>
                <td>薪资</td>
                <td>学历</td>
                <td>工作年限</td>
            </tr>
        </thead>
        <tbody>
            {% for position in positions %}
                <tr>
                    <td>{{ position.city }}</td>
                    <td>{{ position.company }}</td>
                    <td>{{ position.positionName }}</td>
                    <td>{{ position.salary }}</td>
                    <td>{{ position.education }}</td>
                    <td>{{ position.workYear }}</td>
                </tr>
            {% endfor %}
            
        </tbody>
    </table>
</div>
</body>
</html>

 

启动服务，在浏览器中访问http://localhost:8000/login/lagou/，就会显示如下的信息：

虽然已经出了数据，但是不够美观，看起来也不怎么友好的，那么这里可以使用前端的框架bootstrap，到

bootstrap的官方查看它的源码，下载的地址为https://getbootstrap.com/docs/4.1/getting-started/download/,

下载它的源码，具体为：

 

 点击下载成功后，把它的源码放到static文件夹下的plugins文件夹下，见截图：

然后在lagou.html文件中引入bootstrap的css文件，再次修改lagou.html的文件，最新的源码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
    <title>拉钩网平台招聘信息</title>
</head>
<body>
<div class="container">
    <table class="table table-hover">
        <thead>
            <tr>
                <td>城市</td>
                <td>公司</td>
                <td>职位名称</td>
                <td>薪资</td>
                <td>学历</td>
                <td>工作年限</td>
            </tr>
        </thead>
        <tbody>
            {% for position in positions %}
                <tr>
                    <td>{{ position.city }}</td>
                    <td>{{ position.company }}</td>
                    <td>{{ position.positionName }}</td>
                    <td>{{ position.salary }}</td>
                    <td>{{ position.education }}</td>
                    <td>{{ position.workYear }}</td>
                </tr>
            {% endfor %}
            
        </tbody>
    </table>
</div>
</body>
</html>

 

在如上文件中，div和table增加了class的属性，再次访问http://localhost:8000/login/lagou/，见最新的显示样式：

posted @ 2018-12-19 17:39  无涯(WuYa)  阅读(298)  评论(0)  编辑  收藏  举报