个人项目开发步骤及界面

前言

最近我在学习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">&copy; 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.d