3.3 网站界面的设计与制作

一、开发工程师的具体职责（开发过程的输入、输出）

输入
1、需求说明书
建立一个智能大棚，拥有综合环境控制系统，利用该系统可以直接调节室内温、光、水、肥、气等诸多因素，可以实现全年高产、稳步精细化标准化生产农产品，能有效降低经营成本，提高经济效益。
2、基本设计
①实现登录、注册、忘记密码、重置密码等功能。
②建立数据库，保存相关信息。
输出
3、代码

二、该网站的开发使用了哪些技术，分别有什么用。

①HTML、CSS、Bootstrap：搭建前端布局
②ASP.NET、VS：搭建后端触发事件，实现对应功能
③SQL Sever ：用户更改密码，管理员管理用户，查询相关数据

三、该网站的开发过程（重点描述用户登录相关的功能实现）

①部署调试网站，安装IIS，搭建数据库

image.png

②制作登陆页面（使用Bootstrap，采用它来设计页面常见的控件，完成页面的自适应布局，使用Chrome浏览器，在线修改页面布局）

image.png

image.png

四、重要功能贴入图片，贴入代码片段。

①实现登陆功能

                       </div>
                        <div class="card fat">
                            <div class="card-body">
                                <h4 class="card-title">登录</h4>
                                <div class="form-group">
                                    <label for="email">邮件地址</label>

                                    <input id="email" type="email" class="form-control" name="email" value="" required autofocus />
                                </div>

                                <div class="form-group">
                                    <label for="password">
                                        密码
                                    </label>
                                    <input id="password" type="password" class="form-control" name="password" required data-eye />
                                </div>

                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" name="remember" />
                                        记住我
                                        <a href="forgot.html" class="float-right">忘记密码?
                                        </a>
                                    </label>
                                </div>

                                <div class="form-group no-margin">
                                    <input type="submit" class="btn btn-primary btn-block" value="登录" />
                                </div>
                                <div class="margin-top20 text-center">
                                    没有账户? <a href="register.html">注册</a>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            Copyright &copy; 2018 &mdash; CQCET-IOT
                        </div>