最近我在学习easyUI，就想配合之前学习的mvc框架做一个小型项目，这篇博客就讲讲项目的功能和需求分析！
首先我是画了个需求分析： 按照我们开发一个项目的步骤
第一步，我们需要对项目进行定位，比如说这是一个什么样的项目，什么人会使用，以及使用者的角色划分。
如下： 第二步，我们需要做一个需求分析，一般来说都是有前端和后端，根据角色来对角色写需求。
如下：
第三步，我们需要对需求分析进行进一步的功能划分，即每一个需求都要什么功能来实现。
如下：
第四步，我们就要对这个项目进行数据库表设计，开发项目之前肯定是要先设计表的啦。
如下： 进行完上面四部曲后，我们就可以设计界面啦！
登录界面： 实现代码，（我是在bootstrap官网找的模板，使用了其中的form表单，再进行宽度边距的细微调整）：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>登录界面</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style> .form-signin{ /* position: absolute; 绝对定位*/ /* position: relative; 绝对定位*/ position: relative; width: 400px; top: 100px; left: 50%; margin-left: -200px; } </style> </head> <body> <form class="form-signin" action="" method="post"> <div class="text-center mb-4"> <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">用户登录</h1> </div> <div class="form-label-group"> <input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名..." required autofocus> </div> <div class="form-label-group"> <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码..." required> </div> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p> </form> <script src="js/bootstrap.min.js"></script> </body> </html>注册界面： 实现代码，其实和登录差不多哇，我就不放代码了。
首页界面（其中）： 实现代码（主体是用到了栅格布局，左侧菜单用了列表组的应用和其中用了jQuery的选择器）：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/fg.css" /> </head> <body> <div class="container"> <!-- 横幅 --> <div class="row"> <div class="col-sm-4"> 您好，欢迎来到网上书城！ </div> <div class="col-sm-4 col-sm-offset-4"> <a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i> </div> </div> <!-- 搜索栏 --> <div class="row"> <div class="col-sm-12 search-parent"> <!-- 本来这里应该放一张背景图的 --> <div class="search"></div> <input type="text" id="book_name" name="name" value="" /> <button type="button" class="btn btn-primary">搜索</button> </div> </div> <!-- 主内容区 --> <div class="row content"> <div class="col-sm-3 l-content"> <ul class="list-group c-category "> <li class="list-group-item" style="color: white;">书籍分类</li> <li class="list-group-item">现代言情</li> <li class="list-group-item">古代言情</li> <li class="list-group-item">幻想仙侠</li> <li class="list-group-item">玄幻</li> <li class="list-group-item">都市</li> <li class="list-group-item">奇幻</li> <li class="list-group-item">军事</li> <li class="list-group-item">科幻</li> <li class="list-group-item">武侠</li> <li class="list-group-item">青春</li> <li class="list-group-item">竞技</li> <li class="list-group-item">历史</li> <li class="list-group-item">游戏</li> <li class="list-group-item">其他</li> </ul> </div> <div class="col-sm-9 r-content"> <!-- 广告 --> <img src="img/banner.png" class="img-thumbnail" style="width: 1000px;height: 300px;" alt="..."> <!-- 新书上架 --> <div class="news container"> <div class="tip row"> <img src="img/title_bj.png" /> <h5 style="color: white;">新书上架</h5> </div> <div class="row book"> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> </div> </div> <!-- 热销 --> <div class="hots container"> <div class="tip row"> <img src="img/title_bj.png" /> <h5 style="color: white;">热销图书</h5> </div> <div class="row book"> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> <div class="col-sm-2"> <img src="img/1.png" /> <p>冷间谍</p> <b style="color: red;">￥12</b> </div> </div> </div> </div> </div> <!-- 底部版权 --> <div class="row"> <div class="col-sm-12 text-center"> Copyright 2020 教育，版权所有 </div> </div> </div> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { $(".c-category li").eq(0).addClass('bg-color1'); $(".c-category li:gt(0)").addClass('bg-color2'); $(".c-category li:gt(0)").hover(function() { $(this).addClass('bg-opacity'); }, function() { $(this).removeClass('bg-opacity'); }); }) </script> </body> </html>搜索页：
实现代码（主要也是用到了栅格）：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>搜索页</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/fg.css" /> </head> <body> <div class="container"> <!-- 横幅 --> <div class="row"> <div class="col-sm-4"> 您好，欢迎来到网上书城！ </div> <div class="col-sm-4 col-sm-offset-4"> <a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i> </div> </div> <!-- 搜索栏 --> <div class="row"> <div class="col-sm-12 search-parent"> <!-- 本来这里应该放一张背景图的 --> <div class="search"></div> <input type="text" id="book_name" name="name" value="" /> <button type="button" class="btn btn-primary">搜索</button> </div> </div> <!-- 主内容区 --> <div class="row content"> <div class="col-sm-3 l-content"> <ul class="list-group c-category "> <li class="list-group-item" style="color: white;">书籍分类</li> <li class="list-group-item">现代言情</li> <li class="list-group-item">古代言情</li> <li class="list-group-item">幻想仙侠</li> <li class="list-group-item">玄幻</li> <li class="list-group-item">都市</li> <li class="list-group-item">奇幻</li> <li class="list-group-item">军事</li> <li class="list-group-item">科幻</li> <li class="list-group-item">武侠</li> <li class="list-group-item">青春</li> <li class="list-group-item">竞技</li> <li class="list-group-item">历史</li> <li class="list-group-item">游戏</li> <li class="list-group-item">其他</li> </ul> </div> <div class="col-sm-9"> <div class="media"> <img src="img/2.png" class="align-self-center mr-3" alt="..."> <div class="media-body"> <p>第一商会</p> <p>作者：</p> <p>价格：￥24</p> <p>出版社：丛恒文学</p> <p>简介：三天更一章</p> <p> <button class="btn btn-danger" style="width: 150px;">加入购物车</button> <button class="btn btn-danger" style="width: 150px;">去结算</button> </p> </div> </div> <div class="media"> <img src="img/2.png" class="align-self-center mr-3" alt="..."> <div class="media-body"> <p>第一商会</p> <p>作者：</p> <p>价格：￥24</p> <p>出版社：丛恒文学</p> <p>简介：三天更一章</p> <p> <button class="btn btn-danger" style="width: 150px;">加入购物车</button> <button class="btn btn-danger" style="width: 150px;">去结算</button> </p> </div> </div> </div> </div> <!-- 底部版权 --> <div class="row"> <div class="col-sm-12 text-center"> Copyright 2020 教育，版权所有 </div> </div> </div> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { $(".c-category li").eq(0).addClass('bg-color1'); $(".c-category li:gt(0)").addClass('bg-color2'); $(".c-category li:gt(0)").hover(function() { $(this).addClass('bg-opacity'); }, function() { $(this).removeClass('bg-opacity'); }); }) </script> </body> </html>购物车界面：
实现代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/fg.css" /> </head> <body> <div class="container"> <!-- 横幅 --> <div class="row"> <div class="col-sm-4"> 您好，欢迎来到网上书城！ </div> <div class="col-sm-4 col-sm-offset-4"> <a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i> </div> </div> <!-- 搜索栏 --> <div class="row"> <div class="col-sm-12 search-parent"> <!-- 本来这里应该放一张背景图的 --> <div class="search"></div> <input type="text" id="book_name" name="name" value="" /> <button type="button" class="btn btn-primary">搜索</button> </div> </div> <!-- 主内容区 --> <div class="row content"> <div class="col-sm-3 l-content"> <ul class="list-group c-category "> <li class="list-group-item" style="color: white;">书籍分类</li> <li class="list-group-item">现代言情</li> <li class="list-group-item">古代言情</li> <li class="list-group-item">幻想仙侠</li> <li class="list-group-item">玄幻</li> <li class="list-group-item">都市</li> <li class="list-group-item">奇幻</li> <li class="list-group-item">军事</li> <li class="list-group-item">科幻</li> <li class="list-group-item">武侠</li> <li class="list-group-item">青春</li> <li class="list-group-item">竞技</li> <li class="list-group-item">历史</li> <li class="list-group-item">游戏</li> <li class="list-group-item">其他</li> </ul> </div> <div class="col-sm-9"> <table class="table"> <thead class="thead-dark"> <tr style="background-color: papayawhip;"> <th scope="col">书名</th> <th scope="col">单价</th> <th scope="col">数量</th> <th scope="col">小计</th> <th scope="col">操作</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td> <a href="#">删除</a> <a href="#">更新</a> </td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td> <a href="#">删除</a> <a href="#">更新</a> </td> </tr> <tr> <td colspan="5"> <div class="btn btn-danger" style="width: 200px;">清空购物车</div> <div class="btn btn-danger shop-table-tab" style="width: 200px;">继续购物</div> <div class="btn btn-danger" style="width: 200px;">去结算</div> </td> </tr> </tbody> </table> </div> </div> <!-- 底部版权 --> <div class="row"> <div class="col-sm-12 text-center"> Copyright 2020 教育，版权所有 </div> </div> </div> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { $(".c-category li").eq(0).addClass('bg-color1'); $(".c-category li:gt(0)").addClass('bg-color2'); $(".c-category li:gt(0)").hover(function() { $(this).addClass('bg-opacity'); }, function() { $(this).removeClass('bg-opacity'); }); }) </script> </body> </html>