个人项目开发步骤及界面

最新推荐文章于 2022-06-02 23:56:33 发布

VIP文章 Jiang呀

最新推荐文章于 2022-06-02 23:56:33 发布

阅读量543

点赞数

分类专栏：个人小项目文章标签： html bootstrap

本文链接：https://blog.csdn.net/JiangHu_Java/article/details/107066481

版权

个人项目需求分析详解

前言
思维导图
前台界面设计

前言

最近我在学习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>

注册界面：