[pyhton] バグベース管理システムの設計と実装 (1)

バグベース管理システムを自分で設計して実装するにはどうすればよいですか? まず、何をする必要があるかを見てみましょう。

まず、メインページを作成し、次にログイン機能を実装し、メインページに入ったら、各ロールの権限と機能を設定します。

1. 環境構築

Python+フラスコ+html+css+javascript+jQuery

1. Python 環境では、バージョン 3.7.8 を使用しています。インストール方法がわからない場合は、私の記事を参照してください。

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

2. flask ライブラリは、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.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>

次のように表示されます。

3. まとめ

このようにして、簡単なログインページが実装されます。上記により、アカウントとパスワードのテキストボックスと 3 つのオプションボックスが作成されます。役割が異なると、ログイン機能も異なります。次の章では、アカウントとメインページの管理方法について説明します。のデザイン。

@ネン