【pyhton】bugbase管理系统设计与实现（1）_使用python写一套bug管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/pengneng123/article/details/131788523

如何自己设计并实现一个bugbase管理系统呢？先看看我们需要做哪些东西：

首先，我们得有一个主页面，其次就是登录功能的实现，进入主页面后，每个角色的权限及功能。

一.环境配置

python+flask+html+css+javascript+jQuery

1.python环境的话，我这边用的是3.7.8的版本，如果不清楚怎么安装的话可以看看我这篇文章：

https://blog.youkuaiyun.com/pengneng123/article/details/129260074?spm=1001.2014.3001.5502

2.flask库可以直接用pip安装：

pip3 install flask

3.html+css+javascript+jQuery的话可以用vscode–开源免费，EditPlus --免费软件

二.页面设计及实现

这一章的话，我们先来设计并实现一个登录界面：

1.先用html实现基础框架

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>Bugbase管理系统</title>
	<style type="text/css">

</head>
<body class="div7">

    <div class="div11">Bugbase管理系统登录界面

        <br/><p>账号：<input id="attr" type="text" value=""/></p>
        <p>密码：<input id="val" type="text" value=""/></p>
        <label><input type="radio" name="fruit" value="管理员" checked/>管理员</label>
        <label><input type="radio" name="fruit" value="测试" />测试</label>
        <label><input type="radio" name="fruit" value="研发" />研发</label>
        <input id="BT" type="button" value="登录" />


    </div>
</body>

</html>

2.CSS实现属性

<style type="text/css">
div {text-align:center}
div {font-size:30px; }
p {text-align:center}
p {font-weight:bold;}
p {font-size:20px;}
label {font-size:20px;}
.div7{

        border:1px solid silver;
        background-image:url(tu2.jpg);
        background-repeat:repeat;
        background-attachment:fixed;
        background-position:center center;
};       /*图片背景固定铺满显示*/


.div9{
        display:inline-block;   /*将块元素转换为inline-block元素*/
        padding:40px 80px;   /*内边距*/
        margin:40px 80px;    /*外边距*/
        width:100px;    /*宽*/
        height:40px;    /*高*/
        background-color:#FFDEAD;   /*内填充颜色*/
        border:1px solid red;   /*字体颜色*/
        }    /*宽、高设置*/


.div11{
        width:400px;
        height:250px;
        border:1px solid silver;
        background-color:green;  /*固定值，滚动不消失*/
        position:absolute;       /*绝对定位方法*/
        top:300px;
        right:770px;
        background-image:url(tu3.jpg);
}



#btn_5
    {
        width:60px;
        height:30px;
        //background-color:green;  /*id定位法*/
    } 

</style>

3.javascript代码：

<script src="jquery-1.12.1.min.js"></script>
<script>
    window.onload = function () 
    {



        var oBtn_6 = document.getElementById("BT");   //通过id获取主元素
        var oFruit = document.getElementsByName("fruit");  //通过name获取元素
        oBtn_6.onclick = function ()    //按钮事件
        {
            //使用for循环遍历所有的单选框
            for(var i=0;i<oFruit.length;i++)//循环length长度也就是有几个name名称
            {
                //判断当前遍历的单选框是否选中（也就是checked是否为true）
                if(oFruit[i].checked)
                {
                    alert(oFruit[i].value);  //选中哪个，就会输出哪个checked   单选框
                }
            }
        };

    }




</script>

显示如下：