智能大棚管理系统项目的开发文档
2018-06-27 本文已影响0人
热心市民袁先生
一、开发过程输入输出
项目背景：
随着社会的发展，在科技日新月异的增长的时代，智能化已经逐渐步入人们的生活中，在农业生产方面也需要科学化的管理，所以此次项目为智能大棚管理系统的开发。
需求说明书：
- 智能大棚管理系统需要以下基础功能：
1.系统的登陆与用户信息管理；
2.设备状态查询；
3.设备控制； - 其他优化功能：
1.登陆界面需要忘记密码、注册新账号和记住账号的功能；
2.系统管理界面有当前操作员信息显示和当前日期时间显示；
3.界面布局工整清晰；
基本设计：
- 网站页面设计
- 数据库建立
- 链接网站与数据库
开发重要代码：
登陆界面设计：
登录界面
<div class="form-group">
<label for="email">邮箱地址</label>
<input id="email" type="text" class="form-control" name="email" value="" required autofocus runat="server" />
</div>
<div class="form-group">
<label for="password">
密码
</label>
<input id="password" type="password" class="form-control" name="password" required autofocus runat="server" />
</div>
PS：runat="server"用来把输入得到的数据与数据库比较
<div class="form-group no-margin">
<asp:button id="bt_Login" runat="server" text="登录" cssclass="btn btn-primary btn-block" onclick="bt_Login_Click" />
</div>
PS：登录按钮是调用的C#工具箱中的button控件
重置密码：
重置密码
<div class="form-group">
<label for="email">邮箱地址</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus />
<div class="form-text text-muted">
点击“重置密码”，我们将向您的邮箱发送一个重置链接
</div>
</div>
系统主界面：
系统主界面
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!-- data-ride="carousel" 自动轮播 -->
<div class="carousel slide" id="carousel-412649" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-412649" class="active"></li>
<li data-slide-to="1" data-target="#carousel-412649"></li>
<li data-slide-to="2" data-target="#carousel-412649"></li>
<li data-slide-to="3" data-target="#carousel-412649"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="Carousel Bootstrap First" src="Images/banner1.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap Second" src="Images/banner2.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap Third" src="Images/banner3.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap Fourth" src="Images/banner4.jpg" />
</div>
</div>
<a class="carousel-control-prev" href="#carousel-412649" data-slide="prev"><span class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-412649" data-slide="next"><span class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
PS：系统页面排版代码
当前环境检测界面：
环境检测界面
<link href="Content/my-monitor.css" rel="stylesheet" />
PS：界面布局引用CSS技术
设备控制界面：
设备控制界面
<div class="col-4">
<asp:button id="bt_OpenFan" runat="server" text="打开风机" cssclass="btn btn-dark disabled control-button" enabled="False" onclick="bt_OpenFan_Click" />
<asp:button id="bt_CloseFan" runat="server" text="关闭风机" cssclass="btn btn-success control-button" onclick="bt_CloseFan_Click" />
</div>
