如何自己设计并实现一个bugbase管理系统呢？先看看我们需要做哪些东西：
首先，我们得有一个主页面，其次就是登录功能的实现，进入主页面后，每个角色的权限及功能。
一.环境配置
python+flask+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 flask3.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>显示如下：
三.总结
这样，一个简单的登录页面就实现了，上述做了一个账号和密码的文本框，以及三个选项框，不同的角色，登录进去的功能不同，下一章，来说如何管理账户以及主页面的设计。
@Neng
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
