在课程设计阶段,老师手里突然来了一个实际项目,而我正好缺少一个实际项目检验自己的能力,经过一节课的纠结,思量,最后接了这个比较难的项目,说它比较难是因为其对实际应用性的要求极高,这就要求我们在做项目时,不仅仅要实现后台的功能完备性,同时要满足极大部分用户的体验感,即前端,使用逻辑要简洁有力,符合用户逻辑。好久没更了,最近做完项目,正逢春节,趁有时间,一把把她更完,省的后面时间久了容易遗忘~~~2019.1.18
2019.1.10 | 初步构想本文架构,开了头 |
---|---|
2019.1.18 | 整理前端部分常识,主要是type |
2019.1.19 | 建立本表, |
2019.2.2 | 考完科目二,晚上失眠,继续更新博客, |
2019.2.8 | 项目中的不足之处 |
本项目中存在以下不足之处:
1、角色管理,由于项目比较特殊,存在实际情况:要求管理员登陆进行相应的操作,故一般用户如果没有正确的账户、密码,是不能登陆并且进行数据操作的。
2、登录窗口没有密码格式校验,所谓的密码格式校验并不是和数据库中的数据进行比对,而是运用正则匹配进行校验,比如要求密码更换不超过十六位,必须包含数字、字母,下划线等等。
3、Hibernate中使用一个关联来操纵数据,实际项目中应该使用多个,并且用一个总的Hibernate来实现 Hibernate统领
4、在前端显示是没有使用级联功能
5、在数据库中没有使用触发器或者存储过程
6、没有做到前后端分离
本文主要从以下两条逻辑线索进行分享学习:
1、前端 主要是JQuery、bootstrap
2、后端 主要是Struts2、Hibernate3.3
好嘞,废话不多说,直接撸代码上案例:
一、首先,是前端部分
整体的思路是这样的:SSH深度整合。
但写得时候想起来啥就写啥,毕竟自己目前还没能达到讲师的水平,不能很好的将教授方法研究透,这一点还请广大读者朋友们给予最大限度的理解、支持哦。
实现前端后台的数据交互需要一个发力点,找到这个发力点就能打通任督二脉,实现SSH框架局部灵活,整体通透的特性,一开始并没用特意去寻找这个发力点,只是单纯的试试而已,没想到就被我寻找到了,啊哈哈,其实当你真正全身心投入到编程中,用思想去感受她时,就会自觉不自觉地学会一些技术,甚至再后来自己回头看代码时都会有一种莫名的感动!!!
1、发力点是这样的:
(1)第一种方式是form表单提交:<form action = "*.action">
(2)第二种方式是比较常用的需要重点熟记于心,下面以“新增”按钮为例进行说明:
基本形式是这样的:type-->button-->onclick = "add()"-->
下面直接撸代码加以说明
<html>
<head>
</head>
<body>
<input type="button" value="新增" class="ui_input_btn01" onclick="add();" />
</body>
<script type="text/javascript" src="scripts/jquery/jquery-1.7.1.js"></script>
.
.
.
/** 新增 **/
function add() {
document.forms[0].action = "add.action";
document.forms[0].submit();
//$("#submitForm").attr("action", "/xngzf/archives/luruFangyuan.action").submit();
}
.
.
.
</script>
</html>
在这段代码中有几个地方需要注意:
(1)type,目前我们接触到的比较多的type类型有:hidden、button、submit、password、checkbox、radio、reset、text,其中重点讲下button、hidden、checkbox,其他几种简单带过。
- hidden:其属性是隐藏不想让用户看到的信息,使得整个界面视图的逻辑更加符合正常的逻辑思维,比如其在数据库中的id,这个id通常是进行删除,修改、查询的依据,所以是必须的,但是展示给用户就很不对逻辑,会使用户一头雾水。hidden经常和value、数据库中id一起配合使用,比如本项目中涉及到的批量删除功能,就涉及到这种使用方式,其中value多为JSTL表达式表达的值,说到JSTL表达式,就不能这么马马虎虎将hidden介绍完毕,必须详细讲一讲JSTL表达式
a.首先是在JSP中用JSTL表达式的引用:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
有两个地方需要注意:一是必须在.jsp不是在.html中使用,二是uri="http://java.sun.com/jsp/jstl/core其中的jsp不能省略,是不是一依赖二,这一点待考证
下面是JSTL表达式的经典应用,是范例,应该记住:
1'<c:forEach items="${list}" var="p">:
循环遍历后台传过来的list集合,并将list的值赋值给p,然后利用${p.projectName}展示在视图上
2'<c:if test="${p.stage=='0'}">准备阶段(立项)</c:if>
做判断用的,相当于if,如果p.stage=='0',那么就将准备阶段(立项)展示给用户。
3'<td>${p.projectName}</td>
<c:forEach items="${list}" var="p">
<tr>
<td><input type="checkbox" name="IDCheck" value="${p.id}" class="acb" /></td>
<td><c:if test="${p.stage=='0'}">准备阶段(立项)</c:if>
<c:if test="${p.stage=='1'}">一阶段(综合布线)</c:if>
<c:if test="${p.stage=='2'}">二阶段(网络设备部署)</c:if>
<c:if test="${p.stage=='3'}">三阶段(调试运行)</c:if>
<c:if test="${p.stage=='4'}">四阶段(项目验收)</c:if>
</td>
<td>${p.projectName}</td>
<td>
<c:if test="${p.state=='76'}">已结束</c:if>
<c:if test="${p.state=='10'}">进行中</c:if>
<c:if test="${p.state=='14'}">偏离一周左右</c:if>
<c:if test="${p.state=='71'}">偏离两周以上</c:if>
</td>
<td>${p.planStartD}</td>
<td>${p.planFiniD}</td>
<td>${p.factFiniD}</td>
<td>${p.zhfjob}</td>
<td>${p.sdjujob}</td>
<td><a href="singledelete.action?id=${p.id}">删除</a>
<a href="edit.action?id=${p.id}">编辑
</td>
</tr>
</c:forEach>
其实,讲完JSTL表达式,细心的网友会发现代码里面有一句:
<a href="edit.action?id=${p.id}">编辑
这个是之前根本就没接触过的一个写法,这段代码的意思是点击“编辑”这个链接,会将edit.action连同id=${p.id}这个id的值传给后台,后台获取id的值后可以根据id进行CRUD操作这个操作就比较骚了,其中后台获取id值的方法是:
HttpServletRequest hsr = ServletActionContext.getRequest();
String id = hsr.getParameter("id");
这样讲着讲着就讲到了后台,言归正传,继续咱们的前端,
- button,button通常作为触发事件,类似JFrame中的JButton,其通用的格式如下:
<input type="button" value="查询" class="ui_input_btn01" onclick="search();" />
</body>
<script>
function search() {
document.forms[0].action = "query.action";
document.forms[0].submit();
}
</script>
</html>
其中最为重要的是οnclick="search();" 这个属性,他定义触发事件后的动作响应,整个流程是这样的:点击按钮-->onclick生效-->在当前上下文中寻找function search(),这里的上下文其实就是<script type="text/javascript">......</script >中,这里有一个小技巧,可以使Tomcat启动时迅速将页面加载出来:将<script type="text/javascript">......</script >写在</body>后面而不是写在<head></head>中,但他本应该是写在<head></head>中,此处是为了运行提高效率,否则就会出现页面响应超时的现象,其实代码上没有错的,只是响应文件太长,导致响应超时。
(2)class=“” 这个class用来引用你页面的类样式。即你先在<style type="text/css"></style>标签内定义一个类样式,然后再来引用它。需要注意的是在style 里面引用的方法是: 点 +class名字。如:
<style type="text/css">
.btn{
color:red;
}
</style>
.
.
.
<input type="button" class="btn" />
以上代码说明规定了按钮的颜色为红色。在style里面还可以设置多种样式,比如鼠标焦点移动至哪一行,那一行背景颜色能够主动变深,达到引人注意的效果。本项目也确实达到这个效果,尤其是按钮,当鼠标指针停留在按钮上时,按钮颜色由灰色变为蓝色,确实达到效果。