接口测试平台代码实现15:基于生态考虑的菜单重构+意见反馈功能设计

我去热饭

发布于 2022-05-19 08:33:10

2930

发布于 2022-05-19 08:33:10

文章被收录于专栏：测试开发干货

在开始之前要补俩句

上节课中漏掉了一张截图，使得有些小伙伴们忘记修改退出按钮的href了。这里补上：

2.关于github开源，登陆了俩天愣是没打开，暂时搁置此路线。目前我会临时把代码打包后实时上传到这里，需要同步一下的可以下载看看。

3. 关于生态建设，一定一定不要忽视生态建设，不然你的平台99%会被冷落，无人问津，最后死在摇篮。具体的措施可以看我的公众号文章：关于测试平台生态建设思考

好了，本节课我们基本前期的工作准备的都差不多了。从这里开始就是要进入正文了。

在大型动工之前，我们需要进行一个未来生态的设计层面上的改动。

首先就是菜单：

目前：项目管理 { 项目列表 / 接口库 / 用例库 }

改动后：项目列表 / 接口调试/帮助/后台

为什么这么改呢？因为接口库和用例库是属于项目列表内的模块。所以不能在这里并列显示，而项目管理中也只剩下了项目列表一个子菜单，所以干脆删掉项目管理这个目录，直接就显示一个项目列表方便。

用户点击项目列表 - 然后点击具体项目- 进入项目下的接口库和用例库即可。

接口调试功能，属于并列在外的大模块。是用来充当postman的。它并不会储存什么，仅仅作为临时请求用的一个工具而已。为什么这么设计呢？这都是笔者公司经过长期实践，总结出来的关于建设生态的好设计。不多解释，全是泪。

帮助模块和后台模块是非常重要的俩个入口，后台可以方便你和其他开发者快速进入后台而不用每次手动输入127.0.0.1:8000/admin/ 放心其他人进不去，因为没有你的管理员账户密码。帮助模块作为最重要的降低新人学习成本的说明书。

你会发现这之后，菜单没有用到扩展/收起功能，这个功能看似不错，但是对于我们目前简单的菜单内容来说，只是徒增了用户项目接口调试的路径，降低了体验的流畅度。所以任何技术和设计都是要有考虑的。

然后是首页增加意见反馈/吐槽的输入框和发送功能，这就是我们今天要搞定的事：

首先改菜单：

打开welcome.html

目前是项目管理下带着3个子菜单：

更改成：4个菜单并列

这里细节较繁琐，眼神不好的同学请直接复制粘贴整个nav标签：

<nav id="navbar" class="">
    <ul>
            <li>
                <a href="#">
                    项目列表
                </a>
            </li>
            <li>
                <a href="#">
                    接口调试
                </a>
            </li>
            <li>
                <a href="">
                    帮助
                </a>
            </li>
            <li>
                <a href="">
                    后台
                </a>
            </li>
    </ul>
</nav>

好我们启动服务，打开浏览器看看现在显示效果：

很好，4个并列菜单，用户一点直接进入。方便快捷。

然后我们在welcom.html中顺手给后台菜单加上超链接，因为这个菜单什么都不用写，直接放我们后端url：/admin/ 即可,注意前后都有/

刷新页面，看看点击一下什么效果：

可以看到我们直接跳转到了后端。

这里我们学一个新技巧，a标签如果加上 target属性，就可以不在本页面跳转，而是新打开一个标签页来跳转。以免我们当前页面的内容丢失。

具体添加的是 target="_blank"

好了，让我们回到首页，刷新，再点击后台看看：

可以看到，是新打开了一个标签页。

好，到这里我们的四大菜单，先搞定了一个！

然后我们要做的是首页的反馈机制，这个很重要。我们要实时收集使用者的吐槽，来持续优化平台，千万不能全按照自己一个人设计，容易陷入牛角尖。

打开home.html

看到我们之前写的一大堆没用的废话“

好，现在开始删掉一部分，给我们吐槽的输入框留点地方。

我稍微做了点变动，大家可以按照这个写，显示上会好很多...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body >
    <div style="text-align: center">
        <h1>
            <br>
            欢迎 {{ username }} 使用接口测试平台
        </h1>
        <h3>welcome to use Apitest</h3>
    </div>

</body>
</html>

然后我们要在div里，h3标签下面，放上新的内容：textarea标签

这个标签是一个多行文本框。我们输入textarea 然后按tab键就可以自动写出这个完整的标签了。

其中name id 都是默认空，我们因为之后要把框的吐槽内容发送给后台储存起来给我们管理员看，所以这里给id弄个值，以便定位 id = "tucao_input"

name属性我们没啥用，删了

cols 属性是列，也就是多少列，也就是我们每行有多少字。现在30个有点小。给换成50了。

rows 属性是行，意思是初始化显示多少行，默认10行。差不多了。不用改。我们刷新页面看看效果：

好了。现在你尝试在里面写字，尝试拖动右下角。都可以感受下多行文本框的作用噢

我们在给他随便美化俩下，加点css：

看看效果：

但是我们放个这光秃秃的，别人都不知道干嘛用的。所以我们要给它默认解释文案：在标签内加 placeholder 属性，就是我们的默认文案，它不是css，所以千万不要写在style里。它是和id name 平级的属性。

这里注意，一定要写匿名吐槽！不然用户的害怕报复和不好意思心里会很多。

好，接下来我们要做一个button发送按钮-呸，别忘了用br换行

border-radius 是圆角

好我们给button按钮增加一个onclick属性，就是点击会运行什么js函数

函数名就叫 pei（）

然后我们在body根目录也就是和div平级的位置，写一个script标签，用来存放pei()函数：

内容就是一个异步请求：$.get()

眼神不好的复制源码：

<script>
        function pei() {
            $.get("/pei/",{
                "tucao_text":document.getElementById('tucao_input').value,
            },function (ret) {
                alert('已成功吐槽！')
            })
        }
</script>

其中textarea标签我们用.value来获取用户输入的内容。

等待接口返回，我们弹窗提示吐槽成功文案。

这里的设计大家可以自行更改哈～

然后我们去写urls.py的映射关系：

然后我们去views.py中写这个吐槽函数pei()

好了，这里我们要想一想，这个吐槽内容我们后台已经成功拿到了。那么要怎么通知我们管理员呢？

这里给大家提供几个建议：

通过钉钉的机器人发消息，此方法比较实时。很快速。而且不用存放在我们平台的数据库，省空间。但是操作起来需要钉钉里面群里添加机器人-发送接口，初次使用会很蒙蔽。
发短信/邮件，此方法也可以，但是就是有点小题大做。而且调取短信接口花钱，发送邮件代码不是很好写。有兴趣的可以自己这么做
存放在django平台的数据库中，给创建个吐槽表，然后管理员可以去后台随时查看，以后我们还可以利用这些吐槽做个弹幕..... 而且这里我正好可以给大家讲一下，如何新建一个表和如何操作这个表的技术。

综上考虑。我们选择了第三点，用本平台的数据库存放吐槽内容，而且我们还能偷偷存上吐槽者的用户名...虽然我们对外说匿名

这块内容较多，具体放在下一节中讲解。

下节预告：django自带的sqlite3数据库和orm使用-吐槽内容存放。

虽然我们迟迟没有进入到项目管理模块中，但是我们已经把周边功能都快搞完了，在这个过程中，我们学到了很多技术，这些都为我们之后去啃超难的项目管理模块做了技术准备。相当于我们先拿简单外围功能练级，等级高了，再去打boss，所以小伙伴们不要着急，磨刀不误砍柴工。

本节结尾：我们可以尝试给home.html 也就是主页，换个背景图，不然光秃秃的不好看：

在head标签中，增加style标签。style标签内可以存放各种全局样式。我们指定修改body的背景图，就写body{各种css属性}