前言

最近我在学习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.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>&nbsp;&nbsp;<a href="#">更新</a></td></tr><tr><td>Mark</td><td>Otto</td><td>@mdo</td><td>Mark</td><td><a href="#">删除</a>&nbsp;&nbsp;<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>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

msyql数据库[云图智联]
免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/1.数据库的基本介绍1.1数据库介绍1.1.1生活中的数据？大家在生活中随处可见可收集的非常多的信息，比如说手机上的短信、报纸上的新闻、硬盘中的文件等等，这些信息我们都可以统称为数据，那么数据一般存放在哪里呢？…...
2024/4/20 21:10:29
连连跨境支付上线eBay欧元收款服务及使用教程！
eBay是全球电子商务先锋，连接全球数以亿计的买家与卖家，通过互联网为他们创造更多的机会。不久前，eBay发布eBay2020年第一季度财报，根据财报显示，在这个前所未有的特殊时期，eBay交出了一份漂亮的成绩单：eBay第一季度营收24亿美元，总交易额213亿美元。eBay作为最有潜力的…...
2024/5/4 4:07:19
剑指offer——从尾到头打印链表
输入一个链表，按链表从尾到头的顺序返回一个ArrayList。解题思路：递归来写，非常简单 import java.util.ArrayList; public class Solution {ArrayList<Integer> list = new ArrayList<Integer>();public ArrayList<Integer> printListFromTailToHead(Li…...
2024/4/16 14:17:46
nginx 不同场景写入cookie根据if判断处理和正则匹配
if ($http_cookie !~* "access_origin_url=(.+?)(?=;|$)") {add_header Set-Cookie access_origin_url=$http_referer; domain=$root_domain; path=/;}1、正则表达式匹配：==:等值比较;~：与指定正则表达式模式匹配时返回“真”，判断匹配与否时区分字符大小写；~*…...
2024/4/19 0:49:42
NGK公链未来发展态势
区块链技术魅力在于建立信任，其核心功能是提升各个纬度的治理能力，从而解决社会问题。区块链是未来数字经济的基础设施，像今天的移动支付一样改变亿万民众的生活，从而形成从信息互联网到价值互联网的飞跃。区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机…...
2024/4/16 14:18:27
记一次zabbix-agent启动失败
启动 systemctl start zabbix-agent 报错 Job for zabbix-agent.service failed because the control process exited with error code. See "systemctl status zabbix-agent.service" and "journalctl -xe" for details.执行 journalctl -xe 显示 Jul 03 …...
2024/4/18 17:33:26
beego api请求返回base64图片
beego api请求返回base64图片代码 // @router /imgs/:img_id [get] func (t *TestController) GetImage() {img = "yourbase64"data, _ := base64.StdEncoding.DecodeString(strings.Split(img, "base64,")[1])t.Ctx.Output.Header("Content-Type&qu…...
2024/4/16 14:18:27
解决Ubuntu中文件管理器死掉的情况
有时会遇到Ubuntu文件管理器死掉的情况，怎么点击都没有反应，这时只需在终端上运行ps -A | grep nautilus，查找文件管理器nautilus对应的pid,然后sudo+kill+pid就可以关闭文件管理器进程，随便点击一个文件夹就可以重启文件管理器了...
2024/5/4 5:18:59
RFC2889广播时延测试——网络测试仪实操
一、简介RFC 2889为LAN交换设备的基准测试提供了方法学，它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备，提供了交换机转发性能（Forwarding Performance）、拥塞控制（Congestion Control）、延迟（Latency）、地址处理（Address Handling）和错误过滤…...
2024/4/16 14:18:22
js立即执行函数的写法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul id=”test”><li>这是第一条</li><li>这是第二条</li><li&…...
2024/5/4 8:06:06
ENOENT: no such file or directory, scandir ‘E:\workplace\xthk_teaching_management_center\node_modul
报错：解决： npm rebuild node-sass --save-dev...
2024/4/4 21:16:12
[BUUCTF 2018]Online Tool -wp
打开网页可以看到代码，进行代码审计 $sandbox = md5("glzjin". $_SERVER[REMOTE_ADDR]);echo you are in sandbox .$sandbox;@mkdir($sandbox);chdir($sandbox);获取你的ip，然后进行加密，把MD5值输出，然后以这个值创建一个目录尝试一下127.0.0.1 ，发现调用nm…...
2024/4/4 21:16:11
IDEA安装及项目创建
IDEA安装及项目创建下载地址： https://www.jetbrains.com/ 创建Java项目确保project SDK是下载的jdk位置直接下一步配置文件位置，创建文件名HELLO 新建Javaclass 输入文件名HELLO 直接就有了HELLO文件Hello,world!代码快捷键输出内容、运行、看结果...
2024/4/25 2:10:07
计算机研究生入学前的准备有哪些？
通过了研究生入学考试的磨炼，很多学生如愿收获了自己的喜悦。在确定录取以除了收获喜悦还有对于研究生生涯的憧憬，时光飞逝，研究生生涯短暂而又富有创造力，那么如何提前为短暂的研究生生涯做准备呢？1、联系导师、师兄师姐对于一些学校，复试结束后就确定了导师，导师是你的…...
2024/5/4 5:17:49
《上帝掷骰子吗量子物理史话》
超星学习通app《上帝掷骰子吗：量子物理史话》导读章节测验答案1【单选题】经典物理体系中不包括(D)。A、经典力学B、经典电磁场理论C、经典统计力学D、量子物理学2【单选题】下列各物理理论中可以划入新物理学范畴的是(D)。A、牛顿力学B、麦克斯韦电磁理论C、能量守恒定律D、量…...
2024/5/4 3:25:48
学习pytorch--》手势识别--》机器人学习
FOA，我这个是个人笔记，很乱，别看 Pytorch Linux 和 Windows 查看 CUDA 和 cuDNN 版本 https://www.cnblogs.com/wuliytTaotao/p/11453265.html#%E6%9F%A5%E7%9C%8B-cuda-%E7%89%88%E6%9C%AC Ubuntu16.04安装pytorch（pip） https://blog.csdn.net/u013832707/article/detail…...
2024/4/16 14:19:08
谷粒商城-首页商品分类
欢迎访问加群：1107019965，学习更多的知识 1. 门户首页商品分类搜索做完之后，把目光移动首页，首页最重要的模块之一便是商品分类，商品分类也是进入商品列表，找到心仪商品的另一个主要途径。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffx2…...
2024/4/16 14:18:17
spring注解---AOP基于@Aspect的AOP配置
Spring AOP面向切面编程，可以用来配置事务、做日志、权限验证、在用户请求时做一些处理等等。用@Aspect做一个切面，就可以直接实现。1.首先定义一个切面类，加上@Component @Aspect这两个注解 @Component @Aspect public class LogAspect {private static final Logger lo…...
2024/5/4 3:34:43
互联网、政务外网、政务专网、政务内网区别是什么？（最全）
互联网、政务外网、政务专网、政务内网区别是什么？简介：政务网包含（政务外网、政务内网、政务专网）。是政府单位的局域网。1.互联网互联网（英语：Internet），又称网际网络，或音译因特网(Internet)、英特网，互联网始于1969年美国的阿帕网。是网络与网络之间所串连成的…...
2024/4/20 14:40:35
智慧树知到创意手工
提示：选项顺序是系统随机打乱的，请大家看清楚具体选项内容再作答第一章1【判断题】 (1分)纸艺是一种新兴的手工艺。BA对B错2【判断题】 (1分)用于穿编长颈鹿的纸条粗细必须一致。AA对B错3【判断题】 (1分)穿编过程中纸条长度不够时可以使用同色纸条来接。AA对B错4【判断题】…...
2024/4/16 14:19:03

个人项目开发步骤及界面

个人项目需求分析详解

前言

思维导图

前台界面设计

相关文章

最新文章