接口测试平台代码实现11: 用户管理模块设计和开发

上节，我们已经做完了首页，那么针对于一个平台来说，这并不仅仅是一个有界面的工具/脚本，而是实实在在可多人协同使用的平台。那么就必然不可缺少 用户概念。

如果没有用户概念，那就拿我们接下来要做的东西举例子，小邪😈同学创建了一个项目，里面有她的个 人开发或测试的接口/数据/用例 等等，作为一个精致的女孩，她把自己的项目打理的井井有条，测试数据一丝不苟。然后中午的时候，小资的她去了一个优雅的西式餐厅，优雅的点了一杯卡布奇诺，吃着昂贵的全麦吐司面包，加上一盘小巧健康草莓披萨。然后下午回来，发现她的项目被好几个老糙汉子给用了一遍，接口删的删，改的改，注视和备注乱的一塌糊涂，用例数据几乎全部断线成了脏数据，然后她想起一句台词：吃着火锅唱着歌，然后就遇到土匪了，窟咚一声掉河里，出来我就到这了。

所以为了更好的区分使用者，防止互相影响，也为了平台更加高大上。我们必须引入用户模块。

但是用户模块这里要说一下，大概有俩种：

1. 利用django原生的用户系统，简单快捷，性能优秀。
2. 公司内有cas统一单点登陆，需要你的平台介入cas统一登陆。

第二种cas登陆的话是指 所有内部平台都使用统一的用户数据库。这个数据库由运维管理，注册和注销都由hr控制，只能公司内部员工方可登陆。测试平台只需要使用专用的djaog 的cas库即可，且本地会形成影子用户表，相当于一个二层数据库，来方便你进行其他如冻结，增删用户画像等低级权限设置。

不过我们要学习的是第一种，我们测试平台的独立用户数据库。毕竟用户数据牢牢控制在自己手中才是王道。

那么我们打算先设计的就是前端页面。先调动起我们自身的兴趣才是正事对不？

那么好。我们新建一个html文件，叫做login.html,tittle写测试平台登陆

然后去新建url映射：

然后去写一个进入登陆页面的后端函数：login,这个函数返回的可不是welcome.html了，而是实实在在的就一个登陆页面，也不用带什么json数据。

接下来就到了老少爷们最喜欢的设计登陆页面的环节了。

打开login.html，我们给弄个全面的背景图吧？

我们去找一张小邪😈同学看到自己的项目被毁后伤心一个人来到花丛的图片作为背景，放在static目录下,取名为login.jpg

然后我们在login.html中的head标签内增加一个style标签，这个代表全局默认样式：在里面写什么东西，都会在全页面内生效。比如我在里面写给所有button都变成黑色，那么之后在body中的所有按钮，如果你不单独设置颜色，那么就全是黑的。

不过我们这次要写的是body。虽然页面只有一个body，但是我们也要写在这里比较好：

然后给body增加如下图所示的样式。

分别是背景图地址，背景图适应浏览器的设置等。大家找葫芦画瓢就好。

然后让我们进入 127.0.0.1:8000/login/ 来看看效果。

很漂亮吧。

接下来，让我们添加 用户名 /密码 输入框，登陆按钮，注册按钮这一套。

先搭建一个底层矩形div。白色透明。大家可以看下样式，其中opacity是透明度。自己也可以适当改改。这里不具体说前面章节已经讲过的样式了：

效果：

然后 添加欢迎语 和 用户名 输入框 密码输入框。

其中新技巧：样式块，.wqrf_input。这是我随便起的名字，就是在style内写的全局默认样式，只不过前面要加.点。这样它便不再特制某类元素，而是你随意使用，使用方式就是在元素内加入 class 。值为wqrf_input这里不加.点

看看效果：

可能有点长了这个白底，下面我们要添加 登陆和注册按钮，反馈超链接等，顺便缩短一下这个白底。

然后再适当添加 阴影属性给整个div白底，box-shadow属性。

然后来看看效果，其中注册账号因为使用频率过低，所以做成一个超链接

如果显示的和我不同也没关系，浏览器/系统不同显示出来的都可能不一致。

接下来就是简单的美化美化来，因作者也是一边实际开发，一边写本文，所以不会一开始就完全写好，最后需要优化是必然的，这样也更好的使读者领略真实情况，而不是神剧。

 <div style="box-shadow: 4px 4px 6px #2a262a;margin-left: -webkit-calc(50% - 150px);width: 300px;background-color: white; opacity:0.91;border-radius: 10px;text-align: center">
        <strong><span style="font-size: xx-large;color: #031e13">接口测试平台</span></strong>
        <br>
        <span>欢迎使用</span>
        <br><br>
        <div style="padding-left: 10px;text-align: left">
            <span style="font-size: large;color: #656565">用户名：</span> <input type="text" class="wqrf_input">
            <br><br>
            <span style="font-size: large;color: #656565">密码：</span><input type="text" class="wqrf_input">
        </div>
        <br><br>
        <button style="width: 90%;height: 35px;border-radius: 5px;background-color: #068e01;color: white;font-size: large">登 陆</button>
        <br><br>
        若首次登陆,请点击 <a href="">注册账号</a>
        <br><br>
    </div>

以上是修改后的代码：

最后看看效果，就结束了～：

好了，希望女同学们能设计出更加优雅 漂亮的页面哦～

欢迎分享给我。