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>