一、开发过程输入输出

项目背景：

随着社会的发展，在科技日新月异的增长的时代，智能化已经逐渐步入人们的生活中，在农业生产方面也需要科学化的管理，所以此次项目为智能大棚管理系统的开发。

需求说明书：

• 智能大棚管理系统需要以下基础功能：
  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>

PS：用asp的Button来实现设备的打开和关闭