接口测试平台代码实现20: 首页完善和项目模块1
本节开始，我们依然是简单优化了一下首页。首页作为我们的练习版，承载了太多 ....
增加了一项内容就是 当前用户的所属项目列表，暂时为空，后续我们研发完项目模块，这里就填好了。
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background: url("/static/home.jpg");
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body >
<div style="text-align: center">
<h1 style="color: white;margin-left: 410px">
欢迎 {{ username }} 使用接口测试平台
</h1>
{# 中间这里要放 超链接传送门#}
<div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
<h3 style="color: #3e2935">欢迎使用传送门：</h3>
<strong>
{% for i in hrefs %}
<a href="{{ i.href }}" target="_blank" style="color:#353c48;text-decoration: none">{{ i.name }}</a> <br>
{% endfor %}
</strong>
<br>
</div>
{# 中间这里要放 超链接传送门#}
<br>
<div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
<h3 style="color: #3e2935">您的项目：</h3>
<span style="color: black">
{# 这里存放后续的个人项目列表循环，类似传送门的套路 ,点击自己创建的项目可以直接进入项目内 #}
</span>
<br>
</div>
<br>
<div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
<h3 style="color: #3e2935">最新消息：</h3>
<span style="color: black">
帮助页面上线；<br>
后台开启，仅限有管理权限同学使用；<br>
项目列表上线，您现在可以进入所有项目内了 <br>
</span>
<br>
</div>
<br>
<div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
<br>
<textarea id="tucao_input" cols="50" rows="5" placeholder="匿名吐槽专用,点击 发送按钮即可反馈！"
style=";border-radius: 5px;padding-left: 10px;box-shadow: 4px 4px 9px grey"></textarea>
<br>
<button style="border-radius: 0px 0px 50px 50px;width: 100px" onclick="pei()">发送</button>
<br><br>
</div>
</div>
<script>
function pei() {
$.get("/pei/",{
"tucao_text":document.getElementById('tucao_input').value,
},function (ret) {
alert('已成功吐槽！')
})
}
</script>
</body>
</html>好首页的优化 我们暂且放在一边。我们先来进入今天主题。就是项目模块
一个项目模块我们要考虑 都有哪些组成部分？
1: 项目列表
2：接口库
3: 用例库
4：项目设置
首先我们要先做一个 可以增删改查的 项目列表。所有用户的项目都展示。
我们再考虑项目列表的数据放在哪？当然是数据库。
那么里面都应该有些什么字段呢？
- 项目id,orm会自动加入，无需我们操心
- 项目名称
- 项目备注
- 项目创建者
- 项目其他管理员
当然后续会有其他字段加入，不过暂时我们这些足够了。
有人会问为啥，没有接口/用例呢？不是说项目下包含 接口和用例么？
答：项目下包含接口和用例，只是我们故意呈现的错觉。关系型数据库的好处就体现在此。我们再去新建一个 接口表/用例表。然后每个接口/用例 中增加一个字段- 所属项目id 。
这样就链接了起来。当我们用户实际进入一个项目内接口库时候，后台会带着我们用户访问的项目id 去查找接口表，然后把其中 的字段-所属项目id 等于 被访问的项目id 的接口 拿出来 返回给前端。前端展示出来后，就会给用户呈现 这种 错觉，仿佛项目是一个大容器，接口/用例 都装在不同的项目容器内，各个项目的接口 是分开放在不同项目的 这样的错觉。实际上我们所有项目的接口都是混放在一张接口表中。只是提取的时候 按照项目id 提取出来而已。
等项目模块做完，我们注意到菜单上还有个单独的接口调试功能，这个功能是给新使用平台的用户准备的，就像你下个手游之后，觉得注册 起昵称等流程太麻烦了，很容易直接卸载。这时候游戏提供 游客试玩模式，觉得不错再转正。
新加入的用户使用平台 不可能马上理解 如何使用，还以为是postman打开就能用，结果发现要创造项目，取名 等一大堆麻烦流程。虽然这些流程是作为平台 标准化 流程化 ，cmm5级质量图 的必须步骤也是具象表现。但是仍然会劝退不少使用者，因为人的本性就是自由散漫和无序的。整个宇宙都是如此都在熵增。 所以我们要把接口库中的一小功能- 接口调试 功能单独拆出来放在这个 接口调试菜单 中。然后使用者调试后发现不错 ，我们自动给创建项目并录入本次调试 即可 诱导使用者 转正。
好了，今天我们大概掌握了 项目管理模块的 概设。下节课开始代码实现吧。
喜欢的小伙伴别忘了分享 点赞 + 再看
腾讯云开发者
