接口测试平台代码实现26:项目详情页设计

本节我们要设计项目详情页。按照我们之前的设计，项目详情页至少要包括3个部分：

接口库 ：难度 *** （接口导入/调试）

用例设置 ：难度 ***** （用接口库的接口组成各种用例/执行/报告/监控）

项目设置 ：难度 * （项目名称/备注/其他管理者 等后续新增的属性修改）

最近有不少同学对平台开发系列有疑问，说为啥赶紧平台开发大量的工作都是前端开发呢？其实，对我们测开而言，前端恰恰是弱点，但又决定了你的工具/平台 的 交互/推广/实用/效能 等等一系列指标。 所以前期我们要打好这方面的基础，为即将到来的超难的工作做准备。等到教程过半之后，庞大后端难点就会到来。各种多线程/并发/底层引擎/高可用/信号/正则/shell/架构/组件/自动生成/完全断言/各种报告文档生成/邮件发送/分级报警 等等可怕的技术名词都会涌现。当然我仍然会以非常简单详细的讲法给大家说懂。但是一定要坚持住本系列，从中间看的话很难接得上。

按照难度我们会先挑简单的下手。

不过我们本节要做的是这三个子模块的 框架。

我们目前的细节设计是，我们点击项目后，默认进入 接口库。然后无论在哪个子页面，都要有一个微型的导航/菜单，来让我们快速切换到不同的自模块

所以本节我们就要做出三个空壳子模块，并架构好链接，还有学习首次使用oid来区分不同的数据返回给前端。

首先我们新建三个html，分别取名：

P_apis.html

P_cases.html

P_project_set.html

这三个页面 对应 接口库/用例库/项目设置

然后我们写好 点击 项目列表页 的 进入按钮 - 接口库 的整个架构。

打开project_list.html 项目列表页，找到我们的进入按钮

我们这里点击后是直接跳转到新页面，所以不需要调用异步接口。直接强行让其跳转即可，所以给它加上onclick属性，里面是一句简单的跳转js代码：

document.location.href = '路由' 可以强行跳转。我们要跳到的链接中，肯定需要带上i.id才行，这样django才知道你要跳转的是哪个项目的接口库。

然后我们去urls.py中写好映射：

这里的id 是在url中的，所以要用正则的写法去代表。大家注意这里一定不要写错，否则404

然后我们去后台写好这个open_apis 函数：

之后我们重启服务刷新页面，点击任意项目进去看看

没有报错，说明成功，注意url 。应该是上图中模样。

然后我们 接着把其他俩个子模块的 urls.py/views.py 中的代码写好：

这俩个基本复制 接口库 的，然后改改就好。没啥难点可说

这时我们打开apis.html。然后 开始简单做一丁点布局设计：

我们只是做了一个顶部的 说明用 文案，文字居中 ，背景黑色。

然后看看效果：

是不是发现了问题？

我们明明是顶格写的div，为啥会下降一行呢？上面留出了一行白，很难看。这个原因其实是因为我们的welcome.html中引入的子页面page1。它本身就在文档流中，被其他按钮挤到下面了。所以我们在子页面中即使顶格写，也会看到没有顶到浏览器顶部。这种情况，我们可以去修改welcome.html，把其中的page1 给写成固定坐标，距离顶部0px。 但是welcome.html属于我们的公共底层部分，动了它，势必导致我们之前做的所有页面的布局都会变，会引起不可知的后果，所以尽量不要去动这种底层公共的东西。

我们只能继续修改apis.html，把这个div的背景颜色黑色去掉，文字颜色黑色也去掉 即可。之所以前面故意加上颜色，就是要引出上面那段文字，让大家加深理解 子页面和welcome.html的关系。

之后我们顺便给给这个接口库加上一个项目名字，以便用户知道它在哪个项目内。为什么要单独说下这个小设计呢，这主要是让大家提前熟悉一下把项目数据带入到这个接口库页面的流程。

在html中我们在接口库后面加上一个 {{ project_name }} , 用span包裹起来便于我们单独给它设置css属性，比如颜色小猪粉！

然后我们去后台views.py中开发child_json()，得想办法把这个项目数据带给前端才行！

这里我们可以把项目名字获取到，然后传递给前端。但是要想知道确切的项目名称，我们得想办法把项目id 从 open_apis() 函数中 给传递到 child_json()中才行.

这时候就用到了我们 一直以来从未启用过的oid

这里比较难，大家注意看。一直以来我们都带着这个空字符串的oid。

现在是首次启用。

什么时候用：当我们进入一个页面需要返回数据的时候，如果数据一致，没什么特殊区分，那就不需要。不过需要区分，比如这里进入不同的项目详情页，就要带入不同的项目数据的时候，我们就需要启用oid。此时这个oid里面就是我们可以用来区分数据的参数，也就是项目id。

现在我们修改进入接口库函数open_apis()

给oid 的值写成 project_id

此时 这些数据 先跑到哪了呢？是我们的child()函数：

此时我们的oid 在child中，我们需要继续把oid传递给 child_json()才行，所以修改child函数：

加上oid之后。我们在child_json()中写好对应型参来接收这个oid:

oid = '' 的写法是为了兼容，防止我们之前或之后的其他页面没有带上oid的时候报错。当然其实基本不会发生这个问题，只是为了保险和规范。

此时child_json拿到了这个oid，那么我们的if eid == 'P_apis.html'中是需要用的，就给它用：

放到了这个id = oid中。我们现在来试着重启服务器刷新页面 看看效果吧～

好了。这个技巧已经get了吧～