接口测试平台-13：基于生态考虑的菜单重构+意见反馈功能设计

最新推荐文章于 2024-07-23 09:35:10 发布

向往的美好生活

最新推荐文章于 2024-07-23 09:35:10 发布

阅读量332

点赞数

原文链接：https://blog.csdn.net/qq_22795513/category_10122661.html

版权

接口测试平台专栏收录该内容

112 篇文章 15 订阅

订阅专栏

1. 关于生态建设

一定一定不要忽视生态建设，不然你的平台99%会被冷落，无人问津，最后死在摇篮

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

首先就是菜单：

目前：项目管理 { 项目列表 / 接口库 / 用例库 }
改动后：项目列表/接口调试/帮助/后台

因为接口库和用例库是属于项目列表内的模块，用户点击项目列表 - 然后点击具体项目- 进入项目下的接口库和用例库即可。

接口调试功能，属于并列在外的大模块。是用来充当postman的

帮助模块和后台模块是非常重要的俩个入口，后台可以方便你和其他开发者快速进入后台而不用每次手动输入

首页增加意见反馈/吐槽的输入框和发送功能

2. 改菜单

welcome.html

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

看看效果：

新技巧：a标签如果加上 target属性，另开一页跳转

3. 反馈

删除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>

在h3下增加：

<textarea id="tucao_input" cols="50" rows="10"></textarea>

cols 属性是列，每行有多少字。rows 属性是行，初始化显示多少行，默认10行。

我们刷新页面看看效果：

美化页面

<textarea id="tucao_input" cols="50" rows="10" style="border-radius: 5px;padding-left: 10px; box-shadow: 4px 4px 9px grey"></textarea>

增加默认文案（一定要写匿名吐槽！不然用户的害怕报复和不好意思心里会很多）：

 placeholder="匿名吐槽专用，点击 呸 按钮即可怒喷开发者！"

4. 接下来要做一个button发送按钮-呸，别忘了用br换行，border-radius 是圆角

<button id="pei" onclick="pei()" style="border-radius: 0px 0px 50px 50px; width: 100px">呸！</button>
<script>
    function pei() {
        $.get("/pei/",{
            "tucao_text":document.getElementById('tucao_input').value,
        },function (ret) {
            alert('已成功吐槽！')
        })
    }
</script>

添加映射：

url.py

url(r'^pei/$', pei),  # 匿名吐槽

views.py

def pei(request):
    tucao_text = request.GET['tucao_text']

这个吐槽内容我们后台已经成功拿到了。那么要怎么通知我们管理员呢？发短信、邮件、企业微信等。

这里选择：存放在django数据库中，创建吐槽表，管理员去后台查看，以后还可以利用这些吐槽做个弹幕…

具体放在下一节中讲解，下节预告：django自带的sqlite3数据库和orm使用-吐槽内容存放。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body{
            background: url("/static/home.jpg") fixed;
            background-size: cover;
        }
    </style>
</head>

向往的美好生活

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
接口测试平台-13：基于生态考虑的菜单重构+意见反馈功能设计

1. 关于生态建设一定一定不要忽视生态建设，不然你的平台99%会被冷落，无人问津，最后死在摇篮在大型动工之前，我们需要进行一个未来生态的设计层面上的改动。首先就是菜单：目前：项目管理 { 项目列表 / 接口库 / 用例库 } 改动后：项目列表/接口调试/帮助/后台因为接口库和用例库是属于项目列表内的模块，用户点击项目列表 - 然后点击具体项目- 进入项目下的接口库和用例库即可。接口调试功能，属于并列在外的大模块。是用来充当postman的帮助模块和后台模块是非
复制链接

扫一扫