接口测试平台代码实现22:项目列表前后端开发

上节课我们已经创建好了俩个项目作为demo，所以接下来就是我们要打造一个项目列表的前端页面

新建一个html页面，取名叫project_list.html：

然后进入urls.py中，打造好映射关系：

url和函数都写：project_list 吧，这样方便辨认：

进入views.py中，新增project_list函数,返回值里面的whichHTML的值是project_list.html。别写错了

然后我没去welcome.html中 设置好菜单-项目列表的超链接/project_list/，注意前后都有/

接下来进行测试，我们启动服务，进入主页后，点击项目列表这个菜单，看看能否跳转成功：

没报错，说明成功了，只是页面我们说明都没写，一片空白。

到此我们算是打通了这条链路，接下来可以去构建页面的内容了。

首先这个页面的内容肯定是需要我们全部数据库中的项目数据的，所以后台我们继续，在返回数据控制器child_json()函数中增加 对 project_list.html的返回数据设置：

上图代码中，如果eid为project_list.html时，就获取DB_project我们的项目数据表的所有数据，然后写入res这个字典中，作为projects键的值存入。

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

打开project_list.html。 试着写一下：

页面显示：

这就是说明 俩个项目已经成功加载进来了，接下来就看我们如何展示他们了。大体上的技术还是基于我们做首页的那个传送门连接一样，循环展示。但是这里我们要新学一个技术点：表格。我们的项目要展示在规范的表格内，每行就是一个项目，每列为不同的字段。

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

我们展示了项目的 名字和创建者名字。然后不同的项目直接 用br换行。看看效果：

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

表格标签是table 。

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

无论是表头还是表内容，都需要分行分列（表头也有俩三行的）。所以每一行的标签是tr，表头中的每一列是th ，具体内容的每一列的标签是td。一般都是一个tr内包含多个th或td。

让我们继续写代码，建立一个空的表格：

如上图所示的结构就是一个空的表格，表格后续我们可以用很多样式来让它变得更好看。不过现在我们要把刚刚的 项目列表数据放进来，我们要循环显示的其实是 表的具体内容tbody 中的每一个tr行 都要放进循环体：

这里千万不要写错了，瞪大眼睛抄。循环体内部 是tr ，tr里面是多个td ，每个td是一个字段，我们就在每个td标签内夹着的地方放进我们要展示的项目具体字段：

写的过程要注意，所有变量都必须 用俩层大括号。

刷新页面，让我们看看效果：

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

目前我所知道 是有俩种方法。

第一种是安装pip插件，然后在settings.py中添加。之后在html中使用。

第二种是和我们导入其他js/css资源一样的办法，去下载一个bootstrap的资源包，然后在html中引入后就可以随意使用。

第三种是我们不下载，直接用在线的，不过毕竟每次打开页面都要访问外网资源，所以加载会稍微慢一点点，虽然有不错的cdn加速器。

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

官网地址：https://v3.bootcss.com/getting-started/

然后点下载用于生产环境的按钮。

下载后是一个压缩包，我们解压。

把这个bootstrap-3.3.7-dist文件夹 剪切到我们的项目内的-MyApp/static 目录下：

那么已经导入成功了，我们去哪个html里导入呢？答案是welcome.html

这样我们就会发现各个子页面都会享受到这个静态资源。这也是我们一开始的架构的好处之一。

打开welcome.html：

那么具体要导入哪些文件呢？其实就俩个：

但是我们要在welcome.html中这么写：

注意，导入的一个是js文件，一个是css文件，js导入用的标签是script，css导入用的标签是link。注意路径，必须是从 /static开始写，文件名中全部加入 .min. 也就是说，bootstrap.js 要写成bootstrap.min.js 这样，css文件也如此。千万不要抄错了。

写好后就算导入成功了。接下来就要在具体的元素控件中 设置class，来说明这个元素要用到bootstrap3中的什么样式，打开project_list.html文件：

给我们的table标签 增加一个class属性，值为：

table table-striped

注意中间的空格：

然后我们看看服务，保证是开着的状态，刷新页面。看看效果：

发现确实增加了颜色线条等样式，不过我们还远远没有做完：

我们的字段中 最前面加上 项目id。

刷新页面：

当然我们忘记了最重要的，就是表头。

设置thead 中的各个th吧：

刷新页面：

接下来，我们要给他们添加一个新的列，叫“操作”

里面的内容是 进入 和 删除 按钮。用来进入项目内部 或 删除项目：

也就是在最后新增一个th，新增一个td的事：

刷新页面看看：

每个项目 都出现了自己的进入和删除按钮。

到这里我们这个表已经比较完善了，下一节，我们继续优化这个列表页的显示效果，新增项目功能，还有俩个按钮的实际功能实现。