源码如下：
<!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级质量图 的必须步骤也是具象表现。但是仍然会劝退不少使用者，因为人的本性就是自由散漫和无序的。整个宇宙都是如此都在熵增。 所以我们要把接口库中的一小功能- 接口调试 功能单独拆出来放在这个 接口调试菜单 中。然后使用者调试后发现不错 ，我们自动给创建项目并录入本次调试 即可 诱导使用者 转正。
好了，今天我们大概掌握了 项目管理模块的 概设。下节课开始代码实现吧。
