[pyhton] 버그베이스 관리 시스템 설계 및 구현 (1)

버그베이스 관리 시스템을 직접 설계하고 구현하는 방법은 무엇입니까? 먼저 우리가 해야 할 일을 살펴보겠습니다.

첫째, 메인 페이지가 있어야 하고, 둘째, 로그인 기능을 구현해야 하며, 메인 페이지에 들어간 후 각 역할의 권한과 기능을 확인해야 합니다.

1. 환경 구성

파이썬+플라스크+html+css+javascript+jQuery

1. Python 환경에서는 3.7.8 버전을 사용하고 있습니다. 설치 방법을 모르신다면 제 글을 읽어보세요:

https://blog.csdn.net/pengneng123/article/details/129260074?spm=1001.2014.3001.5502

2. 플라스크 라이브러리는 pip를 사용하여 직접 설치할 수 있습니다.

pip3 install flask

3. html+css+javascript+jQuery의 경우 vscode(오픈 소스 및 무료), EditPlus(무료 소프트웨어)를 사용할 수 있습니다.

2. 페이지 디자인 및 구현

이 장에서는 먼저 로그인 인터페이스를 설계하고 구현합니다.

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.자바스크립트 코드:

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

다음과 같이 표시됩니다.

3. 요약

위와 같이 간단한 로그인 페이지가 구현됩니다.위에서는 계정과 비밀번호를 입력하는 텍스트 상자와 세 개의 옵션 상자가 생성됩니다. 역할에 따라 로그인 기능도 다릅니다.다음 장에서는 계정 및 메인 페이지를 관리하는 방법에 대해 설명합니다. 디자인.

@넨