接口测试平台-20：项目列表前后端开发

最新推荐文章于 2021-07-27 17:32:39 发布

向往的美好生活

最新推荐文章于 2021-07-27 17:32:39 发布

阅读量221

点赞数

原文链接：https://blog.csdn.net/qq_22795513/category_10122661.html

版权

接口测试平台专栏收录该内容

112 篇文章 15 订阅

订阅专栏

本文介绍了如何在Django中创建一个项目列表页面，包括前端HTML页面的创建、后台数据的获取与返回、使用模板语言展示数据以及利用Bootstrap美化表格。在前端，通过在project_list.html中添加表格结构并引入Bootstrap样式，实现了项目的规范展示。同时，文章还提到了如何处理'操作'列，添加了进入和删除按钮，为后续功能实现打下基础。

摘要由CSDN通过智能技术生成

1. 项目列表前端页面

新建一个html页面，取名叫project_list.html，并添加映射；welcome.html中添加a标签链接

看看效果：

2. 后台修改

首先，这个页面的内容是需要数据库中的全部项目数据。

所以后台继续，在返回数据控制器child_json()函数中增加对 project_list.html的返回数据设置：

views中修改：

# 控制不同的页面返回不同的数据：数据分发器
def child_json(eid):
    res = {}
    if eid == 'home.html':
        data = DB_home_href.objects.all()
        res = {"hrefs": data}
    if eid == 'project_list.html':
        data = DB_project.objects.all()
        res = {"projects": data}
    return res

eid为project_list.html时，获取DB_project的项目数据表的所有数据，写入res这个字典中，作为projects键的值存入。

这样前端就可以直接用{{ projects }} 来显示这些项目数据了。

3. 修改project_list.html，在body里加入

{{ projects }}

效果如下：

如何展示他们了？

大体上的技术还是基于我们做首页的那个传送门连接一样，循环展示。

新技术：表格。项目要展示在规范的表格内，每行就是一个项目，每列为不同的字段。

首先先写个循环不加表格，展示一下这个项目列表。

<body>
    {% for i in projects %}
        <a href="{{ i.href }}" target="_blank" style="color:#353c48;text-decoration: none">{{ i.name }}</a> <br>
    {% endfor %}
</body>

效果如下：

然成功展示了项目，但是很难看，所以要引入表格：

表格标签是table 。下面有 thead 和 tbody俩部分，thead是表头，tbody是具体内容哦。

所以每一行的标签是tr，表头中的每一列是th ，具体内容的每一列的标签是td。一般都是一个tr内包含多个th或td。

<table>
    <thead>
        <tr>
            <th></th> <th></th> <th></th>
        </tr>
    </thead>

    <body>
        <tr>
            <td></td> <td></td> <td></td>
        </tr>
    </body>
</table>

如上图所示的结构就是一个空的表格，表格后续可以用很多样式来让它变得更好看。

不过现在要把刚刚的项目列表数据放进来，要循环显示的其实是表的具体内容tbody 中的每一个tr行都要放进循环体：

<table>
    <thead>
        <tr>
            <th></th> <th></th> <th></th>
        </tr>
    </thead>

    <body>
        {% for i in projects %}
            <tr>
                <td>{{ i.name }}</td> <td>{{ i.user }}</td> <td>{{ i.remark }}</td>
            </tr>
        {% endfor %}
    </body>
</table>

效果如下：

每个字段都是左对齐的，只是目前表格的颜色和css都没有，所以看不到线条。加入bootstrap效果就好了。bootstrap是一个最广泛的样式库，里面各种元素控件都有漂亮大方的样式可直接使用。

4. 美化表格

目前知道是有三种方法。

安装pip插件，在settings.py中添加。之后在html中使用。
和导入其他js/css资源一样的办法，下载bootstrap的资源包，然后在html中引入后就可以随意使用。
不下载，直接用在线的，不过毕竟每次打开页面都要访问外网资源，所以加载会稍微慢一点点，虽然有不错的cdn加速器。

这里使用第二种方法。先去下载一个bootstratp3的包。

官网地址：https://v3.bootcss.com/getting-started/；下载用于生产环境的，解压并复制到static下

welcome.html中导入，各个子页面都会享受到这个静态资源，主要引入下述2个内容：

welcome.html中这么写：

<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

注意，导入的一个是js文件，一个是css文件，js导入用的标签是script，css导入用的标签是link。

注意路径，必须是从 /static开始写，文件名中全部加入 .min。即bootstrap.js 要写成bootstrap.min.js，css文件也如此。

修改project_list.html：

给table标签增加一个class属性，值为：table table-striped

最前面加上项目id，表头和表数据都要加一列

此处前端会报一个错，在welcom.html的head中引入jQuery即可：

<script src="/static/201908059658/js/jquery-1.11.0.min.js" type="text/javascript"></script>

5. 增加新列：“操作”，进入和删除按钮，用来进入项目内部或删除项目：

<table class="table table-striped">
    <thead>
        <tr>
            <th>项目id</th>
            <th>项目名称</th>
            <th>创建者</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
    </thead>

    <tbody>
        {% for i in projects %}
            <tr>
                <td>{{ i.id }}</td>
                <td>{{ i.name }}</td>
                <td>{{ i.user }}</td>
                <td>{{ i.remark }}</td>
                <td>
                    <button>详情</button>
                    <button>删除</button>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

刷新页面看看：

下一节，继续优化这个列表页的显示效果，新增项目功能，还有俩个按钮的实际功能实现

向往的美好生活

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
接口测试平台-20：项目列表前后端开发

1.项目列表前端页面新建一个html页面，取名叫project_list.html，并添加映射；welcome.html中添加a标签链接看看效果：2. 后台修改首先，这个页面的内容是需要数据库中的全部项目数据。所以后台继续，在返回数据控制器child_json()函数中增加对 project_list.html的返回数据设置：views中修改：# 控制不同的页面返回不同的数据：数据分发器def child_json(eid): res = {}..
复制链接

扫一扫